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

# Anzahl der Ergebnisse

> Trefferanzeige '1-10 von 150 Produkten' mit den Platzhaltern result.from, result.to und result.total auf Such- und Kategorieseiten ausgeben.

Die Anzeige der Anzahl der Suchergebnisse pro Seite kann mit den Werten `result.from`, `result.to` und `result.total` erfolgen. Dies ermöglicht eine Übersicht nach dem Schema **"1-10 von 150 Produkten"**. Diese Anzeige wird automatisch aktualisiert, wenn eine neue Seite aufgerufen oder ein Filter angewendet wird.

## Komponente

Die Komponente kann wie folgt auf der Kategorie- und Suchergebnisseite eingebunden werden:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div class="total-container" data-template="{{result.from}} - {{result.to}} von {{result.total}} Produkten"></div>
```

* Das `data-template`-Attribut muss an einem Element mit der Klasse `total-container` gesetzt werden (siehe Beispiel oben).
* `{{result.from}}`: Gibt die Zahl des ersten angezeigten Produkts auf der aktuellen Seite an. Diese Zahl hängt von der Anzahl der Produkte pro Seite und der aktuellen Seite ab (z. B. `1` auf Seite 1 oder `17` auf Seite 2, wenn 16 Treffer pro Seite eingestellt sind).
* `{{result.to}}`: Gibt die Zahl des letzten angezeigten Produkts auf der aktuellen Seite an. Diese Zahl ist abhängig von der eingestellten Anzahl der Treffer pro Seite (z. B. `16` oder `32`).
* `{{result.total}}`: Zeigt die Gesamtanzahl der Produkte.

> [!NOTE]
>
> Beim Wechsel von einer Seite zur nächsten oder beim Anwenden von Filtern wird diese Anzeige automatisch aktualisiert.

Die Komponente erzeugt den folgenden Quellcode, z.B. für die erste Seite:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
1 - 16 von 275 Produkten
```

Der Quellcode erzeugt **kein CSS** automatisch. Die Ausgabe kann durch zusätzlichen HTML-Code und eigene CSS-Anweisungen angepasst werden.


## Related topics

- [ws-search-info](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-info.md)
- [API-Referenz Bildkonverter](/schnittstellen/admin-interface-api/api-referenz-bildkonverter.md)
- [Search API](/schnittstellen/search-api.md)
- [Konfiguration des Such-Moduls](/ws-search/konfiguration-des-such-moduls.md)
- [ws-pagination](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-pagination.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.