Integration von FINDOLOGIC - WEBSALE Dokumentation

Die interne Suche des Shops findet, was der Kunde schreibt. FINDOLOGIC findet, was er meint: Es verzeiht Tippfehler, erkennt sinnverwandte Begriffe und sortiert die passenden Produkte nach oben. Ein Kunde, der “tshrit” eingibt, bekommt T-Shirts, und wer “iPad” sucht, bekommt iPads und keine Ladekabel.

WEBSALE V8s bindet drei Funktionen von FINDOLOGIC direkt an:

Funktion	Was sie leistet
Suche	ersetzt die interne Suche, mit eigenem Ranking und Fehlertoleranz
Suggest	zeigt schon beim Tippen Vorschläge zu Produkten, Kategorien und Marken
Filter	verfeinert die Trefferliste nach Kategorie, Hersteller, Preis und Attributen

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 das Attribut rel="nofollow" an diesen Links.

Voraussetzungen

Zwei Konten sind nötig, und beide Seiten müssen etwas beitragen:

Bei wem	Was
FINDOLOGIC	ein Konto, das Sie direkt dort anfordern
WEBSALE	Freischaltung der FINDOLOGIC-Suche, der Tracking-Schnittstelle und des Dataflow-Managers

Wird die Suche eingesetzt, müssen die Produktdaten regelmäßig zu FINDOLOGIC übertragen werden. Dieser Export läuft über den Dataflow-Manager und wird von WEBSALE angestoßen. Den Datenfeed an FINDOLOGIC können Sie derzeit nicht selbst anpassen, das übernimmt WEBSALE. Wahlweise kann der Export auch aus Ihrem Warenwirtschaftssystem heraus erfolgen.

Vorher klären

Diese Fragen gehören mit FINDOLOGIC und mit WEBSALE besprochen, bevor jemand ein Template anfasst:

Welche der drei Funktionen sollen eingesetzt werden?
Welche Datenbasis, welche Datenquelle und welches Aktualisierungsintervall sind gewünscht?
In welchen Subshops soll FINDOLOGIC arbeiten?
Welche Filter und Sortierungen soll die Trefferliste anbieten? Das wird je Subshop festgelegt.
Wie lauten die Adresse und der Shopkey für den Aufruf aus dem Shop?

Die letzten beiden Punkte brauchen Sie in jedem der folgenden Schritte, und beide bekommen Sie nur von FINDOLOGIC.

Die Datenübergabe

Standardmäßig bekommt FINDOLOGIC ausschließlich Produktdaten Ihres Shops, und zwar als Grundlage für alle drei Funktionen. Für weitere Daten gelten besondere Voraussetzungen, die mit beiden Seiten zu klären sind. Der Weg dorthin führt über ein Profil im Dataflow-Manager, das Sie gemeinsam mit WEBSALE festlegen. Es bestimmt, welche Produktfeldtypen und welche einzelnen Angaben übergeben werden, beispielsweise Preis, Marke und Farbe, dazu das Intervall der Übertragung. Nach dem Anlegen des Profils bekommen Sie eine Export-Adresse für den Datenfeed als CSV-Datei. Diese Adresse tragen Sie in Ihrem FINDOLOGIC-Konto unter “Einstellungen > Import/Export” im Feld “CSV-URL” ein. Steht der Export, legen Sie mit FINDOLOGIC die Vorkonfiguration für Filter und Sortierungen fest.

Die Suche einbinden

Schritt 1: Die Rückfallebene einrichten

Fällt FINDOLOGIC aus, soll der Kunde nicht vor einer leeren Trefferliste stehen. Der LiveCheck prüft die Erreichbarkeit, und im Ernstfall zeigt der Shop seine eigenen Suchergebnisse.

<ExternSystemLiveChecks>
   <+Entry>
      ID        = FindologicSearch
      URL       = https://...  (Adresse von FINDOLOGIC inklusive Shopkey)
      Type      = 2
      CheckMode = always
      Timeout   = 1000
   </+Entry>
</ExternSystemLiveChecks>

Die Adresse für diese Prüfung bekommen Sie von FINDOLOGIC, sie endet üblicherweise auf alivetest.php und trägt den Shopkey als Parameter:

https://srv12.findologic.com/ps/ihr-shop.de/alivetest.php?shopkey=<Ihr Shopkey>

CheckMode = always prüft bei jedem Seitenaufruf neu. Das kostet Zeit, ist hier aber richtig: Eine für die ganze Sitzung gemerkte Störung würde den Kunden auch dann noch auf die interne Suche schicken, wenn FINDOLOGIC längst wieder antwortet. Referenz: Abschnitt ExternSystemLiveChecks Wegweiser: Externe Inhalte einbinden

Schritt 2: Die Suchergebnisseite anpassen

Angezeigt werden die Ergebnisse auf dem Template, das in der shop.config im Abschnitt <Templates> hinter Search steht. Dort wird der Bereich mit den eigenen Suchergebnissen um einen Bereich mit dem externen Include ergänzt. Der eigene Bereich erscheint danach nur noch, wenn FINDOLOGIC nicht erreichbar ist.

{WS-ExternSystemLiveCheck(FindologicSearch)}

   <!-- Suchergebnisse von FINDOLOGIC -->
   ~WS-ExternInclude(https://srv12.findologic.com/ps/ihr-shop.de/index.php?Ctx=$WS-Ctx$&search_input=$WS-SearchEnc$&shopkey=<Ihr Shopkey>)~

{/WS-ExternSystemLiveCheck(FindologicSearch)}

{!WS-ExternSystemLiveCheck(FindologicSearch)}

   <!-- eigene Suchergebnisse, wenn FINDOLOGIC nicht erreichbar ist -->
   {@PR-Data}
      ~PR-Name~
   {/@PR-Data}

{/!WS-ExternSystemLiveCheck(FindologicSearch)}

Der Suchbegriff geht über WS-SearchEnc in die Adresse, also in der für Adressen codierten Form. Der uncodierte Begriff würde bei Leerzeichen und Umlauten eine ungültige Adresse ergeben.

Damit die interne Suche im Normalbetrieb nicht zusätzlich arbeitet, lässt sie sich abschalten. Das ist ein eigener Schritt und gehört zur Umstellung dazu.

Referenz: WS-ExternSystemLiveCheck() · WS-ExternInclude() · WS-SearchEnc Wegweiser: Interne WEBSALE Suche bei Verwendung externer Suchdienstleister deaktivieren

Schritt 3: Die Trefferliste gestalten

Gestaltet wird nicht im Shop, sondern im Templatemanager des FINDOLOGIC-Kontos. Dort liegt ein shopspezifisches Template mit dem Namen websale.tpl, das Ihr FINDOLOGIC-Ansprechpartner auf Anfrage bereitstellt. Es bringt bereits mit:

Filtern und Sortieren der Suchergebnisse
Auswahl der Treffer je Seite
Blätterfunktion
Anzeige des Suchbegriffs und der Trefferzahl
die Suchergebnisse selbst

Der eigentliche Kniff steckt im Bereich <div id="flResults">: Dort dürfen Sie WEBSALE-Tags verwenden. Die Produktdarstellung im Shop und in der FINDOLOGIC-Trefferliste kann damit dieselbe sein.

<div id="flResults">
   {not_found message="Es wurden keine Produkte gefunden"}
   {foreach from=$RESULT item=ITEM}
      {literal}~DC-FP1_set({/literal}{$ITEM.ORDERNUMBER}{literal})~{PR-AdvData($DC-FP1$)}~PR-Name~{/PR-AdvData($DC-FP1$)}{/literal}
   {/foreach}
   <div class="clear"></div>
</div>

So arbeitet der Block: FINDOLOGIC liefert je Treffer die Bestellnummer. Diese wird in einen freien Platzhalter gelegt, und PR-AdvData() holt dazu die Produktdaten aus dem Shop. Innerhalb dieser Klammerung stehen dann alle gewohnten Produkt-Tags zur Verfügung. Die {literal}-Bereiche gehören zur Templatesprache von FINDOLOGIC. Sie sorgen dafür, dass die WEBSALE-Tags dort unverändert durchgereicht werden, statt selbst als Anweisungen gelesen zu werden. Nutzen Sie für die Produktdarstellung bereits ein FastInclude, lässt es sich hier genauso einsetzen:

<div id="flResults">
   {not_found message="Es wurden keine Produkte gefunden"}
   {foreach from=$RESULT item=ITEM}
      {literal}~DC-FP1_set({/literal}{$ITEM.ORDERNUMBER}{literal})~{PR-AdvData($DC-FP1$)}~WS-Fast_Include(Incl-ProductList)~{/PR-AdvData($DC-FP1$)}{/literal}
   {/foreach}
   <div class="clear"></div>
</div>

Damit sehen Produktkacheln in der Kategorie und in der Trefferliste gleich aus, und eine Änderung wirkt an beiden Stellen. Referenz: DC-FP1…5 · DC-FP1…5_set() · PR-AdvData() · PR-Name · WS-Fast_Include()

Schritt 4: Gestaltung übernehmen

Die HTML-Elemente im FINDOLOGIC-Template tragen bereits Klassen und Kennungen. Ergänzen Sie diese in der Stildatei Ihres Shops und geben Sie ihnen die gewünschten Eigenschaften.

Die Vorschlagsfunktion einbinden

Die Vorschläge erscheinen in einer eigenen Ebene direkt unter dem Sucheingabefeld, sobald FINDOLOGIC zu den eingegebenen Buchstaben etwas findet. Das ist oft schon nach wenigen Zeichen der Fall.

Schritt 1: WEBSALE JavaScript-Bibliothek

Prüfen Sie, ob Systembibliothek und Design-Komponente eingebunden sind, und ergänzen Sie sie andernfalls im <head>-Bereich.

<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>
   ...
</head>

Materialien: WEBSALE JavaScript-Bibliothek

Schritt 2: jQuery-Komponenten

Datei	Wofür
`jquery.autocomplete.js`	die Vorschlagsfunktion selbst, immer nötig
`jquery.preload.js`	nur nötig, wenn die Vorschläge Vorschaubilder zeigen sollen

Beide Dateien stehen unter “Materialien” zum Herunterladen bereit. Speichern Sie sie in Ihrem JavaScript-Verzeichnis und binden Sie sie im <head>-Bereich ein.

<head>
   ...
   <script type="text/javascript" src="../js/web/jquery.autocomplete.js"></script>
   <script type="text/javascript" src="../js/web/jquery.preload.js"></script>
   ...
</head>

Materialien: jquery.autocomplete.js · jquery.preload.js

Schritt 3: Das Sucheingabefeld anpassen

Verwendet wird das gewohnte QuickSearch-Formular. Zwei Dinge daran ändern sich:

Änderung	Warum
`method="get"` statt `method="post"`	die Vorschlagsfunktion arbeitet mit der Adresse, nicht mit gesendeten Formulardaten
`id="flAutocompleteInputText"` am Eingabefeld	daran findet das Skript das Feld, unter dem die Ebene erscheint

<form action="~FORM-QuickSearch~" method="get">

   <input name="~WS-Search_Input~" type="text" value="Ihr Suchbegriff" id="flAutocompleteInputText">
   <input type="submit" value="Suchen">

   <script type="text/javascript">autocompleteField = jQuery("#flAutocompleteInputText");</script>
   <script type="text/javascript" src="../js/web/findologic_suggest.js"></script>

</form>

Die Kennung flAutocompleteInputText ist zwingend und darf nicht umbenannt werden. Ohne sie erscheint keine Vorschlagsebene, und zwar ohne Fehlermeldung.Das Skript findologic_suggest.js setzt die beiden jQuery-Komponenten aus Schritt 2 voraus. Es muss deshalb nach ihnen geladen werden. Steht es davor, bleibt die Funktion wirkungslos.

Referenz: FORM-QuickSearch · WS-Search_Input Materialien: findologic_suggest.js

Schritt 4: Die Vorschlagsebene gestalten

Die Ebene baut findologic_suggest.js selbst auf. Ihre Elemente tragen bereits Klassen, denen Sie Eigenschaften geben. Unter “Materialien” liegt eine Stildatei mit einer Auswahl dieser Klassen. Sie können die Datei entweder im CSS-Verzeichnis ablegen oder ihren Inhalt in die vorhandene Stildatei des Shops übernehmen. Materialien: findologic_suggest.css

Der Ablauf im Überblick

Für die Planung, in welcher Reihenfolge was passiert:

FINDOLOGIC kontaktieren, Funktionen bestellen und die Konfiguration vereinbaren.
Bei WEBSALE die Freischaltungen veranlassen und den Datenexport festlegen.
Subshops auswählen und die sprachabhängigen Punkte klären, beispielsweise die Umwandlung der Zeichencodierung und das Verhältnis von Feld- zu Anzeigenamen.
Die Suchergebnisseite einbauen, dazu Treffer je Seite, Blätterfunktion und die Filter konfigurieren.
Die Vorschlagsfunktion auf allen Shopseiten einbauen.
Alle Anzeigeelemente an das Design des Shops anpassen.

​Voraussetzungen

​Vorher klären

​Die Datenübergabe

​Die Suche einbinden

​Schritt 1: Die Rückfallebene einrichten

​Schritt 2: Die Suchergebnisseite anpassen

​Schritt 3: Die Trefferliste gestalten

​Schritt 4: Gestaltung übernehmen

​Die Vorschlagsfunktion einbinden

​Schritt 1: WEBSALE JavaScript-Bibliothek

​Schritt 2: jQuery-Komponenten

​Schritt 3: Das Sucheingabefeld anpassen

​Schritt 4: Die Vorschlagsebene gestalten

​Der Ablauf im Überblick

​Verwandte Themen

Voraussetzungen

Vorher klären

Die Datenübergabe

Die Suche einbinden

Schritt 1: Die Rückfallebene einrichten

Schritt 2: Die Suchergebnisseite anpassen

Schritt 3: Die Trefferliste gestalten

Schritt 4: Gestaltung übernehmen

Die Vorschlagsfunktion einbinden

Schritt 1: WEBSALE JavaScript-Bibliothek

Schritt 2: jQuery-Komponenten

Schritt 3: Das Sucheingabefeld anpassen

Schritt 4: Die Vorschlagsebene gestalten

Der Ablauf im Überblick

Verwandte Themen