> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 (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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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:<br />- `query` - Suchvorschläge<br />- `product` - Produkt-Vorschläge<br />- `category` - Kategorie-Vorschläge<br />- `content` - Content-Vorschläge<br />- `show-all` - "Alle Ergebnisse anzeigen"-Link                 |
| `use-ajax`   | **Optional**<br />Aktiviert externes Rendering über die `wsLoadAjax`-Template-Funktion (`wsResultDispatcher.subscribe("suggest", ...)`).<br />- Erfordert `ws-search-template-helper` ab Version 1.0.6.<br />- Bei `use-ajax="no"` wird ein `<template>`-Element zum Rendern benötigt (siehe Beispiel oben). |
| `data-value` | **Pflichtfeld bei klickbaren Elementen**<br />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.

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

**Beispiel**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>"`

<Info>
  `hide-with` ist aktuell nur für `ws-suggest-result` und `ws-search-result` verfügbar.
</Info>

**Beispiel**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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)<br />- `to` - Endpunkt der aktuellen Seite (z.B. `16` bei Seitenanzahl 16)<br />- `total` - Gesamtanzahl der Suchergebnisse                                                                                 |
| Ohne `source`-Attribut | Wird vom Template-Helper (`>=v1.0.6`) gerendert. | - `query` - Aktueller Suchbegriff<br />- `from` - Startpunkt der aktuellen Seite (z.B. `1` bei Seitenanzahl 16)<br />- `to` - Endpunkt der aktuellen Seite (z.B. `16` bei Seitenanzahl 16)<br />- `size` - Seitenanzahl (z.B. `16`)<br />- `total` - Gesamtanzahl der Suchergebnisse |

**Beispiel**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```