ws-suggest-result - WEBSALE Dokumentation

Die Komponente <ws-suggest-result> ist ein Kindelement von <ws-suggest> und ermöglicht es, mehrere Ergebnistypen (z.B. Suchvorschläge, Produkte, Kategorien) getrennt voneinander zu konfigurieren und darzustellen. 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 (z.B. product, category) wird eine eigene <ws-suggest-result>-Instanz als Kindelement von <ws-suggest> verwendet.

<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 - `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=""`.

show-all: Einfache Text-Ersetzung

Bei den anderen source-Typen (z.B. query, product) wird Mustache verwendet - 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: 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

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 - z.B. Tab-Buttons oder Überschriften, die nur sichtbar sein sollen, wenn der zugehörige Ergebnisbereich Inhalte hat. Syntax: hide-with="ws-search-result-<source>" bzw. 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>

total-container

Das Attribut total-container (bzw. 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 (z.B. `1` bei Seitenanzahl 16) - `to` - Endpunkt der aktuellen Seite (z.B. `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 (z.B. `1` bei Seitenanzahl 16) - `to` - Endpunkt der aktuellen Seite (z.B. `16` bei Seitenanzahl 16) - `size` - Seitenanzahl (z.B. `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>

​Komponente

​show-all: Einfache Text-Ersetzung

​hide-with

​total-container

​sort-order

Komponente

show-all: Einfache Text-Ersetzung

hide-with

total-container

sort-order