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.

CSS & Styling

Diese Komponente generiert 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 werden.