Zum Hauptinhalt springen
Die Komponente <ws-search-box> 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.

​
Komponente

Die Komponente <ws-search-box> kann mehrfach innerhalb desselben Templates verwendet werden. Dies ist beispielsweise dann sinnvoll, wenn das Sucheingabefeld für Desktop und Mobilgeräte unterschiedlich positioniert oder gestaltet werden soll (z. B. im Header und zusätzlich im Offcanvas-Menü). Die Komponente kann wie folgt auf alle Seiten des Shops, auf denen ein Sucheingabefeld angezeigt werden soll, integriert werden: 
<ws-search-box
  use-suggest="yes"
  use-auto-completion="yes"
  show-query="yes"
  input-delay="500"
  ghost-color="rgba(128,128,128,0.5)">
  <input type="search" name="query" placeholder="Suchbegriff / Artikelnummer eingeben">
  <ws-search-button>
    <button type="button" title="Suche abschicken"></button>
  </ws-search-button>
</ws-search-box>
  • 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.
    • use-auto-completion:
      • yes - Auto-Vervollständigung ist im Eingabefeld aktiv.
      • no - Auto-Vervollständigung im Eingabefeld ist deaktiviert. Die serverseitige Auto-Completion läuft weiterhin mit und liefert zusätzliche Vorschläge für die Suggest.
    • show-query: Gibt an, ob der Suchbegriff nach einer Suche in der Suchleiste angezeigt werden soll.
    • input-delay: Gibt an, mit wie viel Millisekunden Verzögerung ein Suchvorschlag erscheinen soll.
    • ghost-color: rgba-Farbe des „Ghost Texts” bei aktiver Auto-Vervollständigung
    • <ws-search-button>: Komponente zur Darstellung des Suchbuttons.

​
CSS & Styling

Diese Komponente generiert ohne aktivierte Suggestfunktion keine spezifischen CSS-Klassen oder HTML-Code. 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.