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

```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. Sind mehrere Content-Quellen konfiguriert, werden deren Vorschläge zusammengefasst dargestellt.<br />- `content_<name>` — Vorschläge einer einzelnen Content-Quelle, beispielsweise `content_blog`. Siehe Abschnitt [Mehrere Content-Quellen](#mehrere-content-quellen).<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=""`.                                                                                                                                                                                                                                                                                                          |

***

## Mehrere Content-Quellen

<Info>
  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.
</Info>

Sind im Such-Modul [mehrere Content-Quellen](/ws-search/konfiguration-des-such-moduls#mehrere-content-quellen-für-die-suche) konfiguriert, können Sie deren Vorschläge getrennt ausgeben. Der Name nach dem Unterstrich entspricht dem `name` der Quelle aus der Konfiguration.

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

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

***

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

<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

<Warning>
  `hide-with` ist deprecated und wird ab `ws-search-component-1.9.1.js` durch das Attribut [visibility](/ws-search/integration-in-die-templates-storefront/sichtbarkeit-von-elementen-an-komponenten-koppeln) abgelöst. `hide-with` funktioniert weiterhin, sollte aber in neueren Projekten nicht mehr verwendet werden.
</Warning>

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

<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>
```

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<br />- `to` — Endpunkt der aktuellen Seite, beispielsweise `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, beispielsweise `1` bei Seitenanzahl 16<br />- `to` — Endpunkt der aktuellen Seite, beispielsweise `16` bei Seitenanzahl 16<br />- `size` — Seitenanzahl, beispielsweise `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>
```


## Related topics

- [ws-suggest](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest.md)
- [Sichtbarkeit von Elementen an Komponenten koppeln](/ws-search/integration-in-die-templates-storefront/sichtbarkeit-von-elementen-an-komponenten-koppeln.md)
- [UI-Komponenten](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten.md)
- [ws-search-result](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result.md)
- [ws-search-result-tabs](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result-tabs.md)