FACT-Finder: Filters, sorting and navigation

The direct connection is deprecated and no longer supported. It is only available up to FactFinder version 6.9 and is neither maintained nor further developed by WEBSALE. For new integrations, use the FactFinder WebComponents according to the official FactFinder documentation. This page is intended for existing shops that still use the direct connection.

By default, the hit list displays the filters as FACT-Finder delivers them. Filters, their order and the mapping of field names to display names are preconfigured in the FACT-Finder Management. What happens in the shop afterwards is determined in the result template: how many hits appear per page and whether a filter appears as a selection list, as checkboxes, as a list of links or as a slider.

When crawling the shop, search engines also follow the links of all filter options and their subsequent pages. This can greatly increase the number of pages retrieved. Discuss with your SEO manager how to limit this, for example via rel="nofollow" on these links. There is also a dedicated solution for the links themselves; see the last section.

If you have used the incl_factfinder_search.htm template from the materials area, you will find an area for each topic between comments with “ANFANG” and “ENDE”. For the following examples, replace the code between these two markers in each case.

A filter can have any number of options. Individual options can be highlighted in the FACT-Finder Management. These appear as the first entries in the shop and can be styled separately. A typical case: the first five manufacturers are shown as links, and the rest disappear into a selection list.

{@E-Search_FilterField}
{E-Search_FilterField_Option}
   <div>
      <div class="FilterFieldName">~E-Search_FilterField_Text~</div>

      <!-- die hervorgehobenen Optionen als Links -->
      {@E-Search_FilterField_DetailedLinks}
         <div>
            <a href="~E-Search_FilterField_Link~">~E-Search_FilterField_Content~ (~E-Search_FilterField_Count~)</a>
         </div>
      {/@E-Search_FilterField_DetailedLinks}

      <!-- die restlichen Optionen in einer Auswahlliste -->
      {E-Search_FilterField_SelectLinks}
         <select name="~E-Search_FilterField_SelectName~" onchange="submit()">
            <option value="">mehr...</option>
            {@E-Search_FilterField_SelectLinks}
               <option value="~E-Search_FilterField_Select~">~E-Search_FilterField_Content~ (~E-Search_FilterField_Count~)</option>
            {/@E-Search_FilterField_SelectLinks}
         </select>
      {/E-Search_FilterField_SelectLinks}
   </div>
{/E-Search_FilterField_Option}
{/@E-Search_FilterField}

Which options are highlighted is decided solely by the FACT-Finder Management. The template only splits up what arrives: E-Search_FilterField_DetailedLinks contains the highlighted options, E-Search_FilterField_SelectLinks the rest.

Reference: E-Search_FilterField() · E-Search_FilterField_Content · E-Search_FilterField_Count · E-Search_FilterField_DetailedLinks · E-Search_FilterField_Link · E-Search_FilterField_Option() · E-Search_FilterField_Select · E-Search_FilterField_SelectLinks · E-Search_FilterField_SelectName · E-Search_FilterField_Text Multiple selection must be set up in the FACT-Finder Management for this.

{@E-Search_FilterField}
   <h2>~E-Search_FilterField_Text~</h2>

   <!-- bereits gewählte Optionen -->
   {@E-Search_FilterField_Active}
      <input type="checkbox" id="~E-Search_FilterField_Content~"
             onClick="document.location.href='~E-Search_FilterField_Link~'" checked>
      <label for="~E-Search_FilterField_Content~">~E-Search_FilterField_Content~ (~E-Search_FilterField_Count~)</label>
   {/@E-Search_FilterField_Active}

   <!-- noch nicht gewählte Optionen -->
   {@E-Search_FilterField_Option}
      <input type="checkbox" id="~E-Search_FilterField_Content~"
             onClick="document.location.href='~E-Search_FilterField_Link~'">
      <label for="~E-Search_FilterField_Content~">~E-Search_FilterField_Content~ (~E-Search_FilterField_Count~)</label>
   {/@E-Search_FilterField_Option}
{/@E-Search_FilterField}

The only difference between the two loops is the checked and the link: clicking a checked box leads to the link that removes the filter again.

Reference: E-Search_FilterField_Active Any slider can be built in. The following example uses noUiSlider.

For a filter to be treated as a price filter, an adjustment in the FACT-Finder Management is required. Only then does the filter receive the style that the E-Search_FilterField_Style() bracket checks for. You can find out the name of the style from Omikron; in the example it is SLIDER.

Step 1: Download the slider

Download the JavaScript and CSS files of noUiSlider and save them in the corresponding directories of your shop.

Steps 2 and 3: Integrate files on the search results page

<head>
   ...
   <script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
   <script type="text/javascript" src="../ihr-verzeichnis/ws-design-1.8.3.js"></script>
   <script type="text/javascript" src="../ihr-verzeichnis/nouislider.min.js"></script>

   <link rel="stylesheet" href="../ihr-verzeichnis/nouislider.min.css" type="text/css">
   <link rel="stylesheet" href="../ihr-verzeichnis/nouislider.pips.css" type="text/css">
   ...
</head>

The WEBSALE system library and the design component must be at least version 1.8.1.

Step 4: The tags in the result template

{@E-Search_FilterField}
   ~DC-Counter1_inc~

   {E-Search_FilterField_Style(SLIDER)}

      <div id="slider~DC-Counter1~"></div>

      Von: <input type="text" name="~E-Search_FilterField_BeginName~" value="~E-Search_FilterField_BeginValue~">
      Bis: <input type="text" name="~E-Search_FilterField_EndName~" value="~E-Search_FilterField_EndValue~">

      <input type="submit" value="Preis filtern">

      <!-- hier folgt das Skript aus Schritt 5 -->

   {/E-Search_FilterField_Style(SLIDER)}

   {!E-Search_FilterField_Style(SLIDER)}
      Gestaltung aller übrigen Filter
   {/!E-Search_FilterField_Style(SLIDER)}

{/@E-Search_FilterField}

The counter ensures unique IDs. If there are several filters with sliders, each would otherwise have the same ID, and only the first one would work.

Step 5: The script for the slider

It belongs inside the bracket from step 4 at the position marked there.

<script type="text/javascript">
(function() {
   var inputFrom = $("[name=~E-Search_FilterField_BeginName~]");
   var inputTo   = $("[name=~E-Search_FilterField_EndName~]");

   $("#slider~DC-Counter1~").noUiSlider({
      // Startwerte: gewählter Wert, sonst Minimum und Maximum
      start: [
         {!E-Search_FilterField_BeginValue}~E-Search_FilterField_MinValue~{/!E-Search_FilterField_BeginValue}
         {E-Search_FilterField_BeginValue}~E-Search_FilterField_BeginValue~{/E-Search_FilterField_BeginValue}
         ,
         {!E-Search_FilterField_EndValue}~E-Search_FilterField_MaxValue~{/!E-Search_FilterField_EndValue}
         {E-Search_FilterField_EndValue}~E-Search_FilterField_EndValue~{/E-Search_FilterField_EndValue}
      ],
      step: 1,
      connect: true,
      range: {
         'min': ~E-Search_FilterField_MinValue~,
         'max': ~E-Search_FilterField_MaxValue~
      }
   })
   // Bewegung des Reglers in die Textfelder übernehmen
   .on({
      slide: function(ev, val){
         inputFrom.val(val[0]);
         inputTo.val(val[1]);
      }
   });

   // Eingabe in den Textfeldern auf den Regler übernehmen
   var changeInput = function() {
      var varFrom = parseInt(inputFrom.val());
      var varTo   = parseInt(inputTo.val());

      if (isNaN(varFrom)) varFrom = ~E-Search_FilterField_MinValue~;
      if (isNaN(varTo))   varTo   = ~E-Search_FilterField_MaxValue~;

      $("#slider~DC-Counter1~").val([varFrom, varTo]);
   };

   inputFrom.on("change", changeInput);
   inputTo.on("change", changeInput);
})();
</script>

Step 6: Pass along selected filters

So that filters already set are retained on submission, they belong in the form as hidden fields.

{@E-Search_SelectedFilter}
   {@E-Search_SelectedFilter_Value}
      <input type="hidden" name="~E-Search_SelectedFilter_selectname~"
             value="{E-Search_SelectedFilter_Exclude}!{/E-Search_SelectedFilter_Exclude}~E-Search_SelectedFilter_Value~">
   {/@E-Search_SelectedFilter_Value}
{/@E-Search_SelectedFilter}

Without this block, the customer loses all other filters set when operating the slider.

Reference: E-Search_FilterField_BeginName · E-Search_FilterField_BeginValue · E-Search_FilterField_EndName · E-Search_FilterField_EndValue · E-Search_FilterField_MinValue · E-Search_FilterField_MaxValue · E-Search_FilterField_Style() · E-Search_SelectedFilter · E-Search_SelectedFilter_Exclude · E-Search_SelectedFilter_selectname · E-Search_SelectedFilter_Value

Sorting

Which entries are available for selection is configured at FACT-Finder. Your contact person at Omikron sets this up.

As a selection list

This form is the default and is already included in the materials template. It belongs inside the form.

<form action="~FORM-Template(ws_search.htm)~" method="GET">
   ...
   <select name="~E-Search_SortSelectName~" onchange="submit();">
      {@E-Search_SortSelect}
         <option value="~E-Search_SortSelect~" {E-Search_SortActive}selected{/E-Search_SortActive}>
            ~E-Search_SortDescription~ {E-Search_SortAsc}aufsteigend{/E-Search_SortAsc}{!E-Search_SortAsc}absteigend{/!E-Search_SortAsc}
         </option>
      {/@E-Search_SortSelect}
   </select>
   ...
</form>

As links

For a single field, here the price, sorting can also be offered as two links. The technical name of the field is part of the tag name.

{E-Search_SortAscSelect_Price}
   <a href="~E-Search_SortAscLink_Price~">~E-Search_SortDescription~</a>
{/E-Search_SortAscSelect_Price}

{E-Search_SortDescSelect_Price}
   <a href="~E-Search_SortDescLink_Price~">~E-Search_SortDescription~</a>
{/E-Search_SortDescSelect_Price}

Reference: E-Search_SortActive · E-Search_SortAsc · E-Search_SortDescription · E-Search_SortSelect · E-Search_SortSelectName · E-Search_SortAscActive_“technical name” · E-Search_SortAscLink_“technical name” · E-Search_SortAscSelect_“technical name” · E-Search_SortDescActive_“technical name” · E-Search_SortDescLink_“technical name” · E-Search_SortDescSelect_“technical name”

Hits per page as links

By default, the selection appears as a selection list. Which values are available is defined in the FACT-Finder Management, equally for both display types.

Anzahl:
{@E-Search_ResultPerPage_Option}
   <div {E-Search_ResultPerPage_Active}class="active"{/E-Search_ResultPerPage_Active}>
      <a href="~E-Search_ResultPerPage_Link~">~E-Search_ResultPerPage_Option~</a>
   </div>
{/@E-Search_ResultPerPage_Option}
Produkte pro Seite

Reference: E-Search_ResultPerPage_Option · E-Search_ResultPerPage_Active · E-Search_ResultPerPage_Link

Custom names for filters and options

Name filters and options in the FACT-Finder Management whenever possible. The following approach is only necessary if your data fields contain purely technical values that are passed to the shop unchanged, for example Brand instead of “Marke” or yellow instead of “gelb”.

Step 1: Disable automatic adoption

<SearchFactFinder-Filter>
   DirectShow = no
</SearchFactFinder-Filter>

Step 2: Name filters

The mapping is based on the number, which results from the order of the filters in the FACT-Finder Management.

<SearchFactFinder-Filter>
   Field1Name = Brand
   Field1Text = Marke
   Field2Name = Color
   Field2Text = Farbe
</SearchFactFinder-Filter>

Parameter	Content
`Field1…100Name`	the technical name of the filter
`Field1…100Text`	the name that should appear in the shop

Step 3: Name options

A separate section is created for each filter whose options are to be renamed. The number in the section name is again the number of the filter. In the example, “Farbe” is the second filter.

<SearchFactFinder-FilterContent2>
   yellow = gelb
   blue   = blau
   purple = lila
   green  = grün
</SearchFactFinder-FilterContent2>

Every option needs an entry here, even if the technical name and display name are identical. An option without an entry is not displayed at all.

Reference: SearchFactFinder-Filter section · SearchFactFinder-FilterContent1…100 section

FACT-Finder at category level

With navigation, FACT-Finder takes over not only the filters but also the sorting, the number of products per page, the paging and the display of the products themselves. It automatically reflects new products and categories. If FACT-Finder fails, the usual product overview page can be displayed as a fallback. Sorting, number per page and paging then come from WEBSALE, as do the shop’s own filters, if set up.

Step 1: Product data

A separate data feed is not required; the feed of the search function is used.

For this, the option “Export products multiple times if they are assigned to multiple categories” must be set in the Dataflow-Manager. Arrange this with your WEBSALE contact person. Without this setting, products are missing from the categories to which they are not assigned first.

Step 2: Adapt the shop.config

<Search>
   CategoryTemplate = incl_factfinder_shopnavigation.htm
   MaxFilterOptions = 100
   Timeout          = 2500
</Search>

Parameter	Meaning
`CategoryTemplate`	the template for display at category level
`MaxFilterOptions`	maximum number of filters displayed
`Timeout`	abort of the connection attempt after this time in milliseconds

MaxFilterOptions is a protective measure. If a very large number of filters is defined in the FACT-Finder Management, the shop would otherwise build all of them, and the page becomes slow.

Without Timeout, the shop tries indefinitely to establish a connection if FACT-Finder fails. The value should be about 500 milliseconds below the value set in the WS-Module() tag.

Reference: Search section

Step 3: Create the template

Save it under the name from CategoryTemplate in your template directory. It should contain:

sorting option
selection of the number of products per page
paging
display of the products
the fallback content in case FACT-Finder cannot be reached

Under “Materials” you will find a template with all of this. For the fallback content, brackets are prepared into which you transfer the content of your product overview page. Materials: incl_factfinder_shopnavigation.htm

Step 4: Adapt the product overview page

A single tag integrates the entire template from step 3.

{CAT-Data}
   ...
   ~WS-Module(category_factfinder)~
   ...
{/CAT-Data}

The parameter category_factfinder is fixed by WEBSALE and must not be changed.

The CAT-Data bracket ensures that the filters only appear if the category contains any products at all.

The default waiting time is three seconds. If FACT-Finder does not respond, the shop aborts after that. You assign a different time in square brackets: ~WS-Module([2500]category_factfinder)~. If you change this time, also adjust Timeout in the <Search> section.

Reference: CAT-Data · WS-Module()

Avoiding duplicate content through filter links

The FACT-Finder link tags output complete addresses, including the parameter ?d=1. This ensures that the address is always technically correct, but from the perspective of search engines it creates duplicate content. For each of these tags ending in Link, there is a counterpart ending in Params that delivers only the parameters, without the address.

Tag	Outputs
`~E-Search_PagingLink~`	`/websale8/Ctx=...&act=search&search_input=*&wsps_filter_type=Kunststoff&page=2&wsps_followsearch=10000`
`~E-Search_PagingParams~`	`search_input=*&wsps_filter_type=Kunststoff&page=2&wsps_followsearch=10000`

With the Params tag, you assemble the link yourself, based on a clean shop address.

{E-Search_Paging}
{@E-Search_Paging}

   {E-Search_PagingActive}
      ~E-Search_PagingPosition~
   {/E-Search_PagingActive}

   {!E-Search_PagingActive}
      ~DC-FPFactFinderLink_reset~
      ~DC-FPFactFinderLink_set($CAT-Link$)~

      {WS-TplComment}Trennzeichen anhängen, je nachdem ob die Adresse schon Parameter hat{/WS-TplComment}
      {E-Search_PagingParams}
         {DC-FPFactFinderLink_contains(?)}
            ~DC-FPFactFinderLink_append(&)~
         {/DC-FPFactFinderLink_contains(?)}
         {!DC-FPFactFinderLink_contains(?)}
            ~DC-FPFactFinderLink_append(?)~
         {/!DC-FPFactFinderLink_contains(?)}
      {/E-Search_PagingParams}

      ~WS-DisableXSSProtectionOnce~
      <a href="~DC-FPFactFinderLink~~E-Search_PagingParams~">~E-Search_PagingPosition~</a>
   {/!E-Search_PagingActive}

{/@E-Search_Paging}
{/E-Search_Paging}

On the category page, the basis is $CAT-Link$ ; in the context of the product search, it is $WS-Link$&act=search instead.

The same pattern applies to all other Params tags:

Tag	For
`E-Search_FilterField_Params`	filter links
`E-Search_SortParams`	sorting links
`E-Search_NoSortSelectParams`	sorting without selection
`E-Search_ResultPerPage_Params`	hits per page
`E-Search_PagingParams`	paging
`E-Search_CampaignAdvisorItem_Params`	answers in advisor campaigns

Reference: Tags for the FACT-Finder integration Guide: SEO: Overview

Guide: Integration of FACT-Finder
Guide: FACT-Finder campaigns
Guide: SEO URLs and link optimization

​Highlighting individual filter options

​Filter options as checkboxes

​A price filter as a slider

​Step 1: Download the slider

​Steps 2 and 3: Integrate files on the search results page

​Step 4: The tags in the result template

​Step 5: The script for the slider

​Step 6: Pass along selected filters

​Sorting

​As a selection list

​As links

​Hits per page as links

​Custom names for filters and options

​Step 1: Disable automatic adoption

​Step 2: Name filters

​Step 3: Name options

​FACT-Finder at category level

​Step 1: Product data

​Step 2: Adapt the shop.config

​Step 3: Create the template

​Step 4: Adapt the product overview page

​Avoiding duplicate content through filter links

​Related topics

Highlighting individual filter options

Filter options as checkboxes

A price filter as a slider

Step 1: Download the slider

Steps 2 and 3: Integrate files on the search results page

Step 4: The tags in the result template

Step 5: The script for the slider

Step 6: Pass along selected filters

Sorting

As a selection list

As links

Hits per page as links

Custom names for filters and options

Step 1: Disable automatic adoption

Step 2: Name filters

Step 3: Name options

FACT-Finder at category level

Step 1: Product data

Step 2: Adapt the shop.config

Step 3: Create the template

Step 4: Adapt the product overview page

Avoiding duplicate content through filter links

Related topics