Diese Dokumentation beschreibt die Integration und Nutzung der Suchfunktionen des Moduls WEBSALE | search in einen WEBSALE Onlineshop. Sie umfasst die Einrichtung des Sucheingabefeldes (mit oder ohne Suggestfunktion), die Anzeige von Suchergebnissen sowie die After-Search-Navigation zur Filterung und Sortierung der Ergebnisse.

Inhaltsverzeichnis

1 1. Bereitstellung der benötigten Ressourcen
- 1.1 1.1 JavaScript-Bundle (ws-search-component-1.0.0.js)
- 1.2 1.2 Kommunikationskomponente
2 2. Sucheingabefeld mit optionaler Suggestfunktion
3 3. Anzeige der Suchergebnisse
4 4. Filterung der Suchergebnisse
5 5. Sortierung der Suchergebnisse
6 6. Paginierung / Blättern der Suchergebnisse

1. Bereitstellung der benötigten Ressourcen

1.1 JavaScript-Bundle (ws-search-component-1.0.0.js)

WEBSALE stellt ein JavaScript-Bundle mit dem Namen ws-search-component-1.0.0.js über die WEBSALE JavaScript-Bibliothek bereit. Dieses Bundle wird über das WEBSALE PageSpeed-Tool verwaltet und ist für die Integration und Funktionalität der Suchkomponente erforderlich.

Sie können das Bundle direkt in Ihre Templates einbinden, wie alle anderen von WEBSALE bereitgestellten JavaScript-Komponenten, indem Sie es über das PageSpeed-Tool konfigurieren.

Falls Sie das Bundle individualisieren oder anpassen möchten, steht Ihnen die Datei zum Download unter folgender URL zur Verfügung:

http://<ihre-domain>/$WS/ws_sysdata/js/ws-search-component-1.0.0.js

Durch diese Möglichkeit können Sie spezifische Anpassungen für Ihre Shop-Templates vornehmen, beispielsweise Änderungen am Verhalten der Suche oder Filterlogik.

1.2 Kommunikationskomponente

Zusätzlich zum JavaScript-Bundle ist die Kommunikationskomponente erforderlich. Diese wird ebenfalls von WEBSALE bereitgestellt und muss zwingend eingebunden werden, da sie die Kommunikation zwischen dem Frontend, dem Backend und den verschiedenen WebComponents steuert.

Die Einbindung erfolgt wie folgt:

<ws-communication 
    url="https://<ihre-shopid>.search.websale.net/api" 
    version="1.0" 
</ws-communication>

Weitere Details zur Kommunikationskomponente finden Sie in der detaillierten Dokumentation zur Komponente ws-communication.

2. Sucheingabefeld mit optionaler Suggestfunktion

Das Sucheingabefeld wird über die <ws-searchbox> Komponente eingebunden. Diese Komponente bildet das Frontend-Eingabefeld ab und kann optional mit einer Suggestfunktion ergänzt werden. Zusätzlich wird ein Button zur Absendung der Suchanfrage über die <ws-search-button> Komponente integriert.

<ws-searchbox use-suggest="true">
    <input type="search" name="query" placeholder="Artikel suchen">
    <ws-search-button>
        <button type="button" title="Suche abschicken"></button>
    </ws-search-button>
</ws-searchbox>

Weitere Details zur Nutzung Komponenten finden Sie in den detaillierten Dokumentationen zur Komponente ws-searchbox und ws-search-button.

3. Anzeige der Suchergebnisse

Die Anzeige der Suchergebnisse auf der Ergebnisseite erfolgt in mehreren Schritten. Dabei wird sowohl eine WebComponent zur Darstellung der Produktliste als auch AJAX zum Nachladen der WEBSALE Produktbox verwendet. Dadurch stehen alle erweiterten Shop-Funktionen wie "Produkt auf die Merkliste legen", "Direkt kaufen" und weitere zur Verfügung.

3.1 Verwendung der Komponente ws-search-results

Die Komponente <ws-search-results> liefert die Produktliste basierend auf dem eingegebenen Suchbegriff, den gewählten Filtern und Sortieroptionen.

Details zur Funktionsweise dieser Komponente finden Sie in der detaillierten Dokumentation zu ws-search-results.

3.2 Template-Platzhalter für die Produktbox

Damit später die Darstellung der Suchergebnisse über die WEBSALE Produktbox erfolgen kann und die WEBSALE Produktbox dynamisch nachgeladen werden kann, wird für jedes Suchergebnis eine eindeutige ID generiert. Diese ID wird im HTML-Template über die Platzhalterstruktur wsProductWebComponent-{{record.ProdIndex}} definiert.

Details zu den Template Platzhaltern finden Sie in der detaillierten Dokumentation zu Template Placeholdern.

3.3 JavaScript zum Nachladen der WEBSALE Produktbox per Ajax

Das folgende Skript lädt die Produktboxen dynamisch über eine AJAX-Anfrage nach, wenn Ergebnisse vorhanden sind. Es nutzt den wsResultDispatcher, um auf die Suchergebnisse zuzugreifen und die Produktdaten abzurufen.

Das Skript zeigt die erhaltenen Ergebnisse (resultData) in der Browser-Konsole an, um eine schnelle Kontrolle zu ermöglichen.

3.4 Template für die Produktbox

Das Template incl_productbox.htm definiert, wie die nachgeladenen Produktinformationen angezeigt werden. Es muss im Template-Verzeichnis des Shops angelegt werden.

~WS-Fast_Include(Incl-ProductBoxCategory)~: Dies ist der Include-Bereich, der die vollständige Produktbox mit allen Shop-Funktionen lädt.

Hinweis: Der Name Incl-ProductBoxCategory stammt üblicherweise aus der Datei incl_fast_includes.htm, kann aber je nach Shop anders lauten. Achten Sie darauf, den korrekten Namen einzutragen.

4. Filterung der Suchergebnisse

Bevor Filter im Frontend verfügbar sind, müssen die Produktdatenfelder, die für eine Filterung verwendet werden können, in der Konfiguration des Such-Moduls definiert werden. Diese Konfiguration legt fest, welche Filterarten (z. B. Checkboxen, Slider) für bestimmte Felder genutzt werden können.

Um Nutzern eine flexible Filterung ihrer Suchergebnisse zu ermöglichen, können mehrere Komponenten für die Filterverwaltung eingebunden werden. Diese Komponenten umfassen die eigentlichen Filteroptionen, die Anzeige der aktivierten Filter sowie die Möglichkeit, Filter zurückzusetzen.

Beispiel für die Integration der Filter-Komponenten:

Die Filter-Komponenten arbeiten dynamisch und werden basierend auf der Konfiguration des Such-Moduls gerendert.

Weitere Details zur Nutzung und Konfiguration finden Sie in den detaillierten Dokumentationen:

5. Sortierung der Suchergebnisse

Die Sortierung der Suchergebnisse ermöglicht es den Nutzern, die Reihenfolge der Ergebnisse interaktiv anzupassen, basierend auf den im Such-Modul definierten Optionen. Dieser Abschnitt beschreibt, wie die Sortiermöglichkeiten konfiguriert und über die Komponente <ws-sortbox> im Frontend angezeigt werden.

Weitere Details zur Komponente finden Sie in der detaillierten Dokumentation zu ws-sortbox.

6. Paginierung / Blättern der Suchergebnisse

Die Paginierung ermöglicht es Nutzern, die Ergebnisseite zu steuern, indem die Anzahl der angezeigten Produkte pro Seite ausgewählt und zwischen den Seiten navigiert werden kann. Dies erfolgt durch eine Kombination aus mehreren Komponenten für die Ergebnisanzeige, Seitengröße und Blätterfunktion.

Beispiel für die Integration der Paginierungs-Komponenten: