Voraussetzungen

• Die Komponente <ws-communication> muss auf der Seite eingebunden sein, um die Kommunikation mit der Such-API sicherzustellen.

• Das JavaScript-Bundle wsSearchComponent.js muss integriert sein.

Komponente

Die Komponente kann wie folgt auf alle Seiten des Shops, auf denen ein Sucheingabefeld angezeigt werden soll, integriert werden:

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

• Attribute und Elemente

  • use-suggest:

    • Wenn auf true gesetzt, wird die Suggestfunktion aktiviert (automatische Vorschläge während der Eingabe).

    • Wird auf false gesetzt oder weggelassen, bleibt die Suggestfunktion deaktiviert.

  • <ws-search-button>: Komponente zur Darstellung des Suchbuttons.

Suggest

Die Suggest-Funktion wird innerhalb der Komponente <ws-searchbox> bereitgestellt und zeigt automatisch Vorschläge an, sobald der Nutzer mindestens zwei Zeichen im Eingabefeld eingibt. Die Funktion wird durch das JavaScript-Bundle wsSearchComponent.js gesteuert, welches die Effekte zum Ein- und Ausblenden der Vorschläge realisiert.

Sobald der Nutzer mindestens zwei Zeichen eingibt, wird dynamisch folgender HTML-Code für die Vorschläge erzeugt:

<div class="suggestions" style="display: block;">
    <div class="suggestion-item" data-value="Krämer">
        Vorschlag (480)
    </div>
    <div class="suggestion-item" data-value="Kragen">
        Kragen (286)
    </div>
    <div class="suggestion-item" data-value="Kreditkarte">
        Kreditkarte (104)
    </div>
    <div class="suggestion-item" data-value="Kreuzbegurtung">
        Kreuzbegurtung (91)
    </div>
    <div class="suggestion-item" data-value="Krankenschuhe">
        Krankenschuhe (25)
    </div>
</div>

• Attribute der generierten Vorschläge

  • suggestions: Container für die Liste der Vorschläge.

    • style="display: block;": Der Stil steuert die Sichtbarkeit der Vorschläge. Das Ein- und Ausblenden wird durch das wsSearchComponent.js-Bundle gesteuert.

  • suggestion-item: Jedes Element der Vorschlagsliste.

    • data-value: Der Wert, der im Eingabefeld übernommen wird, wenn der Nutzer den Vorschlag auswählt.

    • Der sichtbare Text zeigt den Vorschlagsbegriff sowie die Anzahl der Treffer in Klammern an (z. B. "Kragen (286)").

CSS & Styling

Diese Komponente generiert ohne aktivierte Suggestfunktion keine spezifischen CSS-Klassen. Das Styling kann jedoch durch zusätzliche CSS-Anweisungen angepasst werden. Innerhalb der Komponente können weitere HTML-Elemente eingefügt und gestaltet werden.

Mit aktivierter Suggestfunktion werden folgende CSS-Klassen automatisch generiert und können für individuelles Styling verwendet werden:

• suggestions: Container für die Liste der Vorschläge.

• suggestion-item: Einzelnes Vorschlagselement, das den Text und die Trefferanzahl anzeigt.