> ## 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-search-info

> ws-search-info zeigt Suchergebnis-Informationen wie Trefferanzahl, Suchbegriff und Seitenbereich über frei definierbare Templates an.

Die Komponente `<ws-search-info>` zeigt Informationen zum Suchergebnis an, beispielsweise die Gesamtanzahl der Treffer, den Suchbegriff oder den aktuell angezeigten Ergebnisbereich. Die Darstellung wird über ein frei definierbares Template gesteuert und aktualisiert sich automatisch bei neuen Suchergebnissen.

Die Komponente ersetzt die bisherige Trefferanzeige über die CSS-Klasse `total-container`.

## Voraussetzung

* JavaScript-Bundle `ws-search-component-<Versionsnummer>.js` ab Version **1.9.1**

## Komponente

Die Komponente kann mehrfach auf einer Seite verwendet werden, beispielsweise auf der Kategorie- und Suchergebnisseite.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Source code -->
<ws-search-info data-template="{% result.total %} Ergebnisse"></ws-search-info>

<ws-search-info data-template="Suche für: '{% result.query %}'"></ws-search-info>

<ws-search-info data-template="Zeige {% result.from %}-{% result.to %} von {% result.total %}"></ws-search-info>

<!-- DOM Output -->
<ws-search-info data-template="{% result.total %} Ergebnisse">42 Ergebnisse</ws-search-info>

<ws-search-info data-template="Suche für: '{% result.query %}'">Suche für: 'Suchbegriff'</ws-search-info>

<ws-search-info data-template="Zeige {% result.from %}-{% result.to %} von {% result.total %}">Zeige 1-24 von 42</ws-search-info>
```

* **Attribute**
  * `data-template`: **Pflichtfeld.** Template-String mit Platzhaltern, der den Anzeigetext definiert.
  * `source`: Optional. Schränkt die Anzeige auf eine oder mehrere Sources ein (komma-separiert), z.B. `source="content"` oder `source="content_static,content_blog"`. Ohne `source`-Attribut beziehen sich die Werte auf das gesamte Suchergebnis.

## Verfügbare Platzhalter

| **Platzhalter**                   | **Beschreibung**                                                                                             |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `{% result.total %}`              | Gesamtanzahl der Ergebnisse                                                                                  |
| `{% result.query %}`              | Aktueller Suchbegriff                                                                                        |
| `{% result.from %}`               | Start-Index des angezeigten Bereichs (1-basiert)                                                             |
| `{% result.to %}`                 | End-Index des angezeigten Bereichs                                                                           |
| `{% result.[source].sub_total %}` | Anzahl der Ergebnisse einer einzelnen Source bei Multi-Source-Nutzung, z.B. `{% result.product.sub_total %}` |

## Verhalten

* Die Komponente kann mehrfach auf einer Seite verwendet werden.
* Die Anzeige aktualisiert sich automatisch, sobald neue Suchergebnisse vorliegen (z.B. nach Filterung, Sortierung oder Blättern).

<Info>
  `ws-search-info` ist ab `ws-search-component-1.9.1.js` verfügbar und ersetzt die bisherige Trefferanzeige über Elemente mit der CSS-Klasse `total-container` und `data-template`-Attribut. Die alte Vorgehensweise ist weiterhin nutzbar, sollte in neuen Projekten aber nicht mehr verwendet werden.
</Info>