FACT-Finder: Filter, Sortierung und Navigation

Die Direktanbindung ist veraltet und wird nicht mehr unterstützt. Sie steht nur bis FactFinder-Version 6.9 zur Verfügung und wird von WEBSALE weder gepflegt noch weiterentwickelt. Für neue Integrationen verwenden Sie die FactFinder WebComponents nach der offiziellen Dokumentation von FactFinder. Diese Seite ist für bestehende Shops gedacht, die noch mit der Direktanbindung arbeiten.

Im Auslieferzustand zeigt die Trefferliste die Filter so an, wie FACT-Finder sie liefert. Vorkonfiguriert werden Filter, ihre Reihenfolge und die Zuordnung von Feldnamen zu Anzeigenamen im FACT-Finder Management. Was danach im Shop passiert, bestimmen Sie im Ergebnis-Template: wie viele Treffer je Seite erscheinen und ob ein Filter als Auswahlliste, als Kästchen, als Linkliste oder als Schieberegler auftritt.

Suchmaschinen folgen beim Durchlaufen des Shops auch den Links aller Filteroptionen und deren Folgeseiten. Die Zahl der abgerufenen Seiten kann dadurch stark ansteigen. Besprechen Sie mit Ihrem SEO-Verantwortlichen, wie das eingegrenzt wird, beispielsweise über rel="nofollow" an diesen Links. Für die Links selbst gibt es außerdem eine eigene Lösung, siehe den letzten Abschnitt.

Haben Sie das Template incl_factfinder_search.htm aus dem Materialbereich verwendet, finden Sie darin je Thema einen Bereich zwischen Kommentaren mit “ANFANG” und “ENDE”. Für die folgenden Beispiele ersetzen Sie jeweils den Code zwischen diesen beiden Marken.

Einzelne Filteroptionen hervorheben

Ein Filter kann beliebig viele Optionen haben. Im FACT-Finder Management lassen sich einzelne davon hervorheben. Diese erscheinen im Shop als erste Einträge und lassen sich eigens gestalten. Ein typischer Fall: Die ersten fünf Hersteller stehen als Links da, der Rest verschwindet in einer Auswahlliste.

{@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}

Welche Optionen hervorgehoben sind, entscheidet allein das FACT-Finder Management. Das Template teilt nur auf, was ankommt: E-Search_FilterField_DetailedLinks enthält die hervorgehobenen, E-Search_FilterField_SelectLinks den Rest. Referenz: 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

Filteroptionen als Kästchen

Die Mehrfachauswahl muss dafür im FACT-Finder Management eingerichtet sein.

{@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}

Der Unterschied zwischen den beiden Schleifen ist nur das checked und der Link: Ein Klick auf ein gesetztes Kästchen führt auf den Link, der den Filter wieder entfernt. Referenz: E-Search_FilterField_Active

Einen Preisfilter als Schieberegler

Jeder beliebige Schieberegler lässt sich einbauen. Das folgende Beispiel verwendet noUiSlider.

Damit ein Filter als Preisfilter behandelt wird, ist eine Anpassung im FACT-Finder Management nötig. Erst dadurch bekommt der Filter den Stil, auf den die Klammerung E-Search_FilterField_Style() prüft. Die Bezeichnung des Stils erfahren Sie von Omikron, im Beispiel ist es SLIDER.

Schritt 1: Den Schieberegler herunterladen

Laden Sie die JavaScript- und CSS-Dateien von noUiSlider herunter und speichern Sie sie in den entsprechenden Verzeichnissen Ihres Shops.

Schritt 2 und 3: Dateien auf der Suchergebnisseite einbinden

<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>

Die WEBSALE Systembibliothek und die Design-Komponente müssen mindestens in Version 1.8.1 vorliegen.

Schritt 4: Die Tags im Ergebnis-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}

Der Zähler sorgt für eindeutige Kennungen. Gibt es mehrere Filter mit Schieberegler, hätte sonst jeder dieselbe Kennung, und nur der erste würde arbeiten.

Schritt 5: Das Skript für den Schieberegler

Es gehört innerhalb der Klammerung aus Schritt 4 an die dort markierte Stelle.

<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>

Schritt 6: Gewählte Filter mitgeben

Damit die bereits gesetzten Filter beim Absenden erhalten bleiben, gehören sie als versteckte Felder in das Formular.

{@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}

Ohne diesen Block verliert der Kunde beim Betätigen des Schiebereglers alle übrigen gesetzten Filter.

Referenz: 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

Die Sortierung

Welche Einträge zur Auswahl stehen, wird bei FACT-Finder konfiguriert. Ihr Ansprechpartner bei Omikron richtet das ein.

Als Auswahlliste

Diese Form ist die Vorgabe und im Material-Template bereits enthalten. Sie gehört innerhalb des Formulars.

<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>

Als Links

Für ein einzelnes Feld, hier den Preis, lässt sich die Sortierung auch als zwei Links anbieten. Der technische Name des Feldes steht dabei im Tag-Namen.

{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}

Referenz: E-Search_SortActive · E-Search_SortAsc · E-Search_SortDescription · E-Search_SortSelect · E-Search_SortSelectName · E-Search_SortAscActive_“technischer Name” · E-Search_SortAscLink_“technischer Name” · E-Search_SortAscSelect_“technischer Name” · E-Search_SortDescActive_“technischer Name” · E-Search_SortDescLink_“technischer Name” · E-Search_SortDescSelect_“technischer Name”

Treffer je Seite als Links

Im Standard erscheint die Auswahl als Auswahlliste. Welche Werte zur Wahl stehen, wird im FACT-Finder Management festgelegt, und zwar für beide Darstellungen gleichermaßen.

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

Referenz: E-Search_ResultPerPage_Option · E-Search_ResultPerPage_Active · E-Search_ResultPerPage_Link

Eigene Bezeichnungen für Filter und Optionen

Benennen Sie Filter und Optionen nach Möglichkeit im FACT-Finder Management. Der folgende Weg ist nur nötig, wenn Ihre Datenfelder rein technische Werte enthalten und diese unverändert an den Shop übergeben werden, beispielsweise Brand statt “Marke” oder yellow statt “gelb”.

Schritt 1: Die automatische Übernahme abschalten

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

Schritt 2: Filter benennen

Die Zuordnung läuft über die Nummer, und diese ergibt sich aus der Reihenfolge der Filter im FACT-Finder Management.

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

Parameter	Inhalt
`Field1…100Name`	der technische Name des Filters
`Field1…100Text`	der Name, der im Shop erscheinen soll

Schritt 3: Optionen benennen

Je Filter, dessen Optionen umbenannt werden sollen, entsteht ein eigener Abschnitt. Die Nummer im Abschnittsnamen ist wieder die Nummer des Filters. Im Beispiel ist “Farbe” der zweite Filter.

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

Jede Option braucht hier einen Eintrag, auch wenn technischer Name und Anzeigename identisch sind. Eine Option ohne Eintrag wird überhaupt nicht angezeigt.

Referenz: Abschnitt SearchFactFinder-Filter · Abschnitt SearchFactFinder-FilterContent1…100

FACT-Finder auf Kategorieebene

Mit der Navigation übernimmt FACT-Finder nicht nur die Filter, sondern auch die Sortierung, die Anzahl der Produkte je Seite, die Blätterfunktion und die Anzeige der Produkte selbst. Neue Produkte und Kategorien bildet sie automatisch ab. Fällt FACT-Finder aus, lässt sich ersatzweise die gewohnte Produktübersichtsseite anzeigen. Sortierung, Anzahl je Seite und Blätterfunktion kommen dann von WEBSALE, ebenso die eigenen Filter, sofern eingerichtet.

Schritt 1: Produktdaten

Ein eigener Datenfeed ist nicht nötig, es wird der Feed der Suchfunktion verwendet.

Im Dataflow-Manager muss dafür die Option “Produkte mehrfach exportieren, wenn sie in mehreren Kategorien zugewiesen sind” gesetzt werden. Veranlassen Sie das bei Ihrem WEBSALE Ansprechpartner. Ohne diese Einstellung fehlen Produkte in den Kategorien, denen sie nicht als erstes zugeordnet sind.

Schritt 2: Die shop.config anpassen

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

Parameter	Bedeutung
`CategoryTemplate`	das Template für die Anzeige auf Kategorieebene
`MaxFilterOptions`	Höchstzahl der angezeigten Filter
`Timeout`	Abbruch des Verbindungsaufbaus nach dieser Zeit in Millisekunden

MaxFilterOptions ist eine Schutzmaßnahme. Sind im FACT-Finder Management sehr viele Filter definiert, würde der Shop sonst alle aufbauen, und die Seite wird langsam.

Ohne Timeout versucht der Shop bei einem Ausfall von FACT-Finder unbegrenzt, eine Verbindung aufzubauen. Der Wert sollte etwa 500 Millisekunden unter dem Wert liegen, der im Tag WS-Module() steht.

Referenz: Abschnitt Search

Schritt 3: Das Template anlegen

Speichern Sie es unter dem Namen aus CategoryTemplate in Ihrem Template-Verzeichnis. Es sollte enthalten:

Sortiermöglichkeit
Auswahl der Anzahl der Produkte je Seite
Blätterfunktion
Anzeige der Produkte
den Ersatzinhalt für den Fall, dass FACT-Finder nicht erreichbar ist

Unter “Materialien” liegt eine Vorlage mit all dem. Für den Ersatzinhalt sind darin Klammerungen vorbereitet, in die Sie den Inhalt Ihrer Produktübersichtsseite übernehmen. Materialien: incl_factfinder_shopnavigation.htm

Schritt 4: Die Produktübersichtsseite anpassen

Ein Tag bindet das gesamte Template aus Schritt 3 ein.

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

Der Parameter category_factfinder ist von WEBSALE fest vergeben und darf nicht geändert werden.

Die Klammerung mit CAT-Data sorgt dafür, dass die Filter nur erscheinen, wenn die Kategorie überhaupt Produkte enthält. Voreingestellt sind drei Sekunden Wartezeit. Antwortet FACT-Finder nicht, bricht der Shop danach ab. Eine andere Zeit weisen Sie in eckigen Klammern zu: ~WS-Module([2500]category_factfinder)~. Ändern Sie diese Zeit, passen Sie auch Timeout im Abschnitt <Search> an. Referenz: CAT-Data · WS-Module()

Doppelte Inhalte durch Filterlinks vermeiden

Die Link-Tags von FACT-Finder geben vollständige Adressen aus, samt des Parameters ?d=1. Das stellt sicher, dass die Adresse technisch immer stimmt, erzeugt aus Sicht der Suchmaschinen aber doppelte Inhalte. Zu jedem dieser Tags, die auf Link enden, gibt es ein Gegenstück, das auf Params endet und nur die Parameter liefert, ohne Adresse.

Tag	Gibt aus
`~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`

Mit dem Params-Tag bauen Sie den Link selbst zusammen, und zwar auf Basis einer sauberen Shop-Adresse.

{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}

Auf der Kategorieseite ist die Grundlage $CAT-Link$ , im Rahmen der Produktsuche stattdessen $WS-Link$&act=search. Dasselbe Muster gilt für alle übrigen Params-Tags:

Tag	Für
`E-Search_FilterField_Params`	Filterlinks
`E-Search_SortParams`	Sortierlinks
`E-Search_NoSortSelectParams`	die Sortierung ohne Auswahl
`E-Search_ResultPerPage_Params`	Treffer je Seite
`E-Search_PagingParams`	Blätterfunktion
`E-Search_CampaignAdvisorItem_Params`	Antworten in Berater-Kampagnen

Referenz: Tags für die FACT-Finder-Integration Wegweiser: SEO: Übersicht

​Einzelne Filteroptionen hervorheben

​Filteroptionen als Kästchen

​Einen Preisfilter als Schieberegler

​Schritt 1: Den Schieberegler herunterladen

​Schritt 2 und 3: Dateien auf der Suchergebnisseite einbinden

​Schritt 4: Die Tags im Ergebnis-Template

​Schritt 5: Das Skript für den Schieberegler

​Schritt 6: Gewählte Filter mitgeben

​Die Sortierung

​Als Auswahlliste

​Als Links

​Treffer je Seite als Links

​Eigene Bezeichnungen für Filter und Optionen

​Schritt 1: Die automatische Übernahme abschalten

​Schritt 2: Filter benennen

​Schritt 3: Optionen benennen

​FACT-Finder auf Kategorieebene

​Schritt 1: Produktdaten

​Schritt 2: Die shop.config anpassen

​Schritt 3: Das Template anlegen

​Schritt 4: Die Produktübersichtsseite anpassen

​Doppelte Inhalte durch Filterlinks vermeiden

​Verwandte Themen

Einzelne Filteroptionen hervorheben

Filteroptionen als Kästchen

Einen Preisfilter als Schieberegler

Schritt 1: Den Schieberegler herunterladen

Schritt 2 und 3: Dateien auf der Suchergebnisseite einbinden

Schritt 4: Die Tags im Ergebnis-Template

Schritt 5: Das Skript für den Schieberegler

Schritt 6: Gewählte Filter mitgeben

Die Sortierung

Als Auswahlliste

Als Links

Treffer je Seite als Links

Eigene Bezeichnungen für Filter und Optionen

Schritt 1: Die automatische Übernahme abschalten

Schritt 2: Filter benennen

Schritt 3: Optionen benennen

FACT-Finder auf Kategorieebene

Schritt 1: Produktdaten

Schritt 2: Die shop.config anpassen

Schritt 3: Das Template anlegen

Schritt 4: Die Produktübersichtsseite anpassen

Doppelte Inhalte durch Filterlinks vermeiden

Verwandte Themen