Zum Hauptinhalt springen
Die Komponente <ws-suggest> dient zur Anzeige von Suchvorschlägen innerhalb einer Suchbox. Die einzelnen Vorschläge werden als Liste dargestellt und können per Mausklick oder über die Tastatur (Pfeiltasten zur Navigation, Enter zur Auswahl) ausgewählt werden. Optional kann am Ende der Liste ein zusätzliches „Alle Ergebnisse anzeigen”-Element eingeblendet werden, das wie ein regulärer Vorschlag behandelt wird. Bei Auswahl wird eine Suche mit dem aktuellen Suchbegriff ausgelöst. Der Platzhalter {%query%} in show-all-message wird dabei dynamisch durch den eingegebenen Suchbegriff ersetzt.

​
Komponente

Die Komponente kann innerhalb von <ws-search-box> integriert werden, um die Anzeige der Suggestbox zu steuern: 
<ws-suggest
  suggest-container-class="suggestions"
  suggest-item-class="suggestion-item"
  use-show-all="yes"
  show-all-class="suggestion-show-all-item"
  show-all-message="Alle Ergebnisse anzeigen für: <strong>{%query%}</strong>">
</ws-suggest>
  • Attribute
    • suggest-container-class - Angabe von CSS-Klasse(n) für den Container der Suggestbox
    • suggest-item-class - Angabe von CSS-Klasse(n) für die Suggest-Items
    • use-show-all
      • true / yes - Aktiviert das zusätzliche „Show-All”-Element (Alle Ergebnisse anzeigen) am Ende der Vorschlagsliste
    • show-all-class - Angabe von CSS-Klasse(n) für das „Show-All”-Element
    • show-all-message - Anzeigetext für das „Show-All”-Element. Im Anzeigetext kann {%query%} durch den aktuellen Suchbegriff ersetzt werden. Default: Alle Ergebnisse anzeigen für: '{%query%}'.
Die Attribute use-show-all, show-all-class und show-all-message sind nur im einfachen Modus (ohne <ws-suggest-result>) relevant. Im Orchestrator Mode wird show-all über ein <ws-suggest-result source="show-all">-Element konfiguriert.

​
Orchestrator Mode

Sobald <ws-suggest> mindestens ein <ws-suggest-result>-Kindelement enthält, aktiviert sich automatisch der Orchestrator Mode. In diesem Modus übernimmt <ws-suggest-result> die Steuerung der Darstellung je Ergebnistyp (z.B. Suchvorschläge, Produkte, Kategorien). Weitere Details zur Konfiguration von <ws-suggest-result> sind hier beschrieben.

​
suggest-container

Das Attribut suggest-container kann auf beliebigen HTML-Elementen gesetzt werden. Dadurch wird dieses Element (inklusive aller Kindelemente) zusammen mit dem zugehörigen <ws-suggest-result> aus- und eingeblendet - z.B. um Abschnittsüberschriften gemeinsam mit dem Ergebnisbereich zu verstecken, weil keine Ergebnisse vorhanden sind. Beispiel 
<ws-suggest class="wsSuggest">

    <!-- Alles innerhalb dieses Containers (inklusive des Containers selbst)
         wird zusammen mit ws-suggest-result ein-/ausgeblendet -->
    <div suggest-container>
      Suchvorschläge

      <ws-suggest-result source="query">
        <template id="wsQuerySuggestTemplate">
          {%result.label%}
        </template>
      </ws-suggest-result>

    </div>

</ws-suggest>

​
Mustache-Delimiter in Templates

Da die VX-Template-Engine {{ }} als Delimiter verwendet, was zu Konflikten mit dem Mustache-Rendering der Komponenten führt, werden in allen Webcomponent-Templates abweichende Delimiter verwendet:
  • Webcomponents (ws-suggest, ws-suggest-result, …) verwendet {% %}
  • VX-Template-Engine verwendet {{ }}
Beispiel 
<template id="wsProductSuggestTemplate">
  <a href="{%result.url%}" data-value="{%result.name%}">
    {%result.name%}
    {%result.price%} {%result.currency%}
  </a>
</template>

​
Styling per CSS

Werden keine eigenen CSS-Klassen über die Komponente angegeben, setzt die Suche Standardklassen:
  • suggestions
  • suggestion-item
  • show-all-item
Beispiel-Quellcode für den Suggest-Container 
<ws-suggest use-show-all="yes" show-all-class="suggestion-show-all-item" show-all-message="Alle Ergebnisse anzeigen für: &lt;strong&gt;{%query%}&lt;/strong&gt;">
...

      Mokassin (90)
      Mokassin-Ballerina (73)
      Mokassin-Handnaht (50)
      Alle Ergebnisse anzeigen für: <strong>Mokas</strong>

...
</ws-suggest>