Versions Compared

Version Old Version 1 New Version 2
Changes made by

Jennifer Pusch

Jennifer Pusch

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Excerpt
namesearchbox

Die Komponente <ws-searchbox> stellt das Sucheingabefeld im Frontend bereit. Sie ermöglicht die Integration eines Suchfeldes mit optionaler Suggestfunktion. Die Komponente kann durch zusätzliche HTML-Elemente wie ein Eingabefeld und einen Suchbutton erweitert werden.

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:

Code Block
<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.