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

<Info>
  Beim Wechsel von einer Seite zur nächsten oder beim Anwenden von Filtern wird diese Anzeige automatisch aktualisiert.
</Info>

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.