ws-suggest-result

ws-suggest-result rendert einen einzelnen Vorschlag der Autosuggest-Liste mit Bild, Titel und Link und übergibt die Auswahl an ws-search-box.

Die Komponente <ws-suggest-result> ist ein Kindelement von <ws-suggest> und ermöglicht es, mehrere Ergebnistypen getrennt voneinander zu konfigurieren und darzustellen, beispielsweise Suchvorschläge, Produkte und Kategorien. Sobald mindestens ein <ws-suggest-result> vorhanden ist, aktiviert sich automatisch der Orchestrator Mode in <ws-suggest>.

---

​

Komponente

Ergebnisse werden pro Typ gruppiert. Für jeden Typ wird eine eigene <ws-suggest-result>-Instanz als Kindelement von <ws-suggest> verwendet, beispielsweise für product und category.

<ws-suggest class="wsSuggestContainer">

  <ws-suggest-result class="wsQuerySuggest" source="query">
    <template id="wsQuerySuggestTemplate">

        {%result.label%}

    </template>
  </ws-suggest-result>

  <ws-suggest-result class="wsShowAllSuggest" source="show-all">
    <template id="wsShowAllSuggestTemplate">

        Alle Ergebnisse anzeigen für: {%query%}

    </template>
  </ws-suggest-result>

  <ws-suggest-result class="wsProductSuggest" source="product">
    <template id="wsProductSuggestTemplate">

        ...

    </template>
  </ws-suggest-result>

</ws-suggest>

Attribute

Wert	Beschreibung
source	Legt den Ergebnistyp fest, der von dieser Instanz dargestellt wird. Mögliche Werte: - query — Suchvorschläge - product — Produkt-Vorschläge - category — Kategorie-Vorschläge - content — Content-Vorschläge. Sind mehrere Content-Quellen konfiguriert, werden deren Vorschläge zusammengefasst dargestellt. - content_<name> — Vorschläge einer einzelnen Content-Quelle, beispielsweise content_blog. Siehe Abschnitt Mehrere Content-Quellen. - show-all — „Alle Ergebnisse anzeigen”-Link
use-ajax	Optional Aktiviert externes Rendering über die wsLoadAjax-Template-Funktion (wsResultDispatcher.subscribe("suggest", ...)). - Erfordert ws-search-template-helper ab Version 1.0.6. - Bei use-ajax="no" wird ein <template>-Element zum Rendern benötigt, siehe Beispiel oben.
data-value	Pflichtfeld bei klickbaren Elementen Jedes klickbare Element innerhalb eines Templates muss das Attribut data-value besitzen, damit die Tastaturnavigation korrekt funktioniert. Bei source="show-all" kann der Wert leer sein: data-value="".

---

​

Mehrere Content-Quellen

Die getrennte Darstellung einzelner Content-Quellen setzt websale_search_webcomponents v1.7.0 voraus. Im Backend werden zusätzlich elasticsearch_manager v1.15.0 und websale_search v1.18.0 benötigt.

Sind im Such-Modul mehrere Content-Quellen konfiguriert, können Sie deren Vorschläge getrennt ausgeben. Der Name nach dem Unterstrich entspricht dem name der Quelle aus der Konfiguration.

<!-- Alle Content-Vorschläge zusammengefasst -->
<ws-suggest-result source="content"></ws-suggest-result>

<!-- Nur die statischen Inhaltsseiten -->
<ws-suggest-result source="content_static"></ws-suggest-result>

<!-- Nur die Blog-Vorschläge -->
<ws-suggest-result source="content_blog"></ws-suggest-result>

<!-- Nur die Magazin-Vorschläge -->
<ws-suggest-result source="content_magazin"></ws-suggest-result>

Damit eine Quelle Vorschläge liefert, muss sie zusätzlich im suggest_config des Suchmoduls aktiviert sein. Quellen ohne Eintrag erscheinen nur in den Suchergebnissen, nicht in der Suggest-Liste.

Die bisherige Nutzung mit source="content" bei einer einzelnen Content-Konfiguration funktioniert unverändert weiter.

---

​

show-all: Einfache Text-Ersetzung

Bei den anderen source-Typen wie query oder product wird Mustache verwendet. Das ist ein Template-System, das Platzhalter wie {%result.value%} durch echte Werte aus der API-Antwort ersetzt und auch Logik wie Schleifen oder Bedingungen verarbeiten kann.

Für source="show-all" ist das nicht nötig, da hier nur ein einziger dynamischer Wert existiert, nämlich der aktuelle Suchbegriff. Daher wird stattdessen eine einfache Text-Ersetzung genutzt. {%query%} wird direkt durch den eingegebenen Suchbegriff ersetzt.

Wichtig: Der einzige funktionsfähige Platzhalter ist {%query%}. Andere Mustache-Platzhalter wie {%result.value%} werden hier nicht ausgewertet und erscheinen unverändert im HTML.

Beispiel

<ws-suggest-result source="show-all">
  <template id="wsShowAllSuggestTemplate">

      Alle Ergebnisse für: {%query%}

  </template>
</ws-suggest-result>

---

​

hide-with

hide-with ist deprecated und wird ab ws-search-component-1.9.1.js durch das Attribut visibility abgelöst. hide-with funktioniert weiterhin, sollte aber in neueren Projekten nicht mehr verwendet werden.

Das Attribut hide-with kann auf beliebigen Elementen gesetzt werden, um diese in Abhängigkeit von einem <ws-suggest-result> oder <ws-search-result> auszublenden. Typische Anwendungsfälle sind Tab-Buttons oder Überschriften, die nur sichtbar sein sollen, wenn der zugehörige Ergebnisbereich Inhalte hat.

Syntax: hide-with="ws-search-result-<source>" beziehungsweise hide-with="ws-suggest-result-<source>"

hide-with ist aktuell nur für ws-suggest-result und ws-search-result verfügbar.

Beispiel

<button type="button" hide-with="ws-search-result-product">Produkte</button>
<button type="button" hide-with="ws-search-result-category">Kategorien</button>
<button type="button" hide-with="ws-search-result-content">Inhalte</button>

<h3 hide-with="ws-search-result-product">Produkte</h3>
<ws-search-result source="product"></ws-search-result>

<h3 hide-with="ws-search-result-category">Kategorien</h3>
<ws-search-result source="category"></ws-search-result>

<h3 hide-with="ws-search-result-content">Inhalte</h3>
<ws-search-result source="content"></ws-search-result>

Bei mehreren Content-Quellen folgt der Wert demselben Muster und enthält den Namen der Quelle, beispielsweise hide-with="ws-search-result-content_blog".

---

​

total-container

Das Attribut total-container beziehungsweise der gleichnamige CSS-Klassenname ermöglicht die Anzeige von Suchergebnis-Metadaten im Frontend. Es gibt zwei Nutzungsarten:

Modus	Beschreibung	Verfügbare Keys
Mit source-Attribut	Wird von den Webcomponents gerendert.	- from — Startpunkt der aktuellen Seite, beispielsweise 1 bei Seitenanzahl 16 - to — Endpunkt der aktuellen Seite, beispielsweise 16 bei Seitenanzahl 16 - total — Gesamtanzahl der Suchergebnisse
Ohne source-Attribut	Wird vom Template-Helper (>=v1.0.6) gerendert.	- query — Aktueller Suchbegriff - from — Startpunkt der aktuellen Seite, beispielsweise 1 bei Seitenanzahl 16 - to — Endpunkt der aktuellen Seite, beispielsweise 16 bei Seitenanzahl 16 - size — Seitenanzahl, beispielsweise 16 - total — Gesamtanzahl der Suchergebnisse

Beispiel

<h1 class="wsHeadlineBig mb-3 total-container"
    data-template="Suche nach &quot;{%result.query%}&quot; ({%result.total%} Treffer)">
</h1>

---

​

sort-order

Überschreibt die Backend-Sortierung für das Element, in dem es gesetzt ist. Hauptsächlich für <ws-suggest-result> gedacht, um angezeigte Vorschläge anhand eines Feldes zu sortieren.

Syntax: <Feldname>_<Richtung>

Erklärung

Teil	Beschreibung
Feldname	Feldname aus der API-Response. Muss in der Konfiguration des Suchmoduls unter display_fields eingetragen sein.
Richtung	asc (aufsteigend) oder desc (absteigend). Default: asc

Beispiel

<ws-suggest-result source="category" sort-order="cat_str_path_asc" use-ajax="yes" id="wsCategorySuggest">
</ws-suggest-result>

<ws-suggest-result source="content" sort-order="title_asc">
  <template id="wsContentSuggestTemplate">
    <a href="/{%result._id%}" class="wsSuggestItem" data-value="{%result._id%}">
      {%result._source.title%}
    </a>
  </template>
</ws-suggest-result>