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

> ws-pagination zeigt eine Blätternavigation mit Seitenzahlen, Vor- und Zurück-Buttons für Such- und Kategorieergebnisse und hält die URL synchron.

Die Komponente `<ws-pagination>` stellt eine Blätterfunktion bereit, mit der Nutzer zwischen verschiedenen Seiten der Suchergebnisse oder Kategorie navigieren können.

***

## Voraussetzungen

* Die Paginierungsfunktion ist abhängig von den Einstellungen der Komponente `<ws-page-size-selector>`.
* Die Paginierung wird nur angezeigt, wenn der **Standardwert** oder der vom Nutzer gewählte Wert für die Anzahl der angezeigten Ergebnisse pro Seite kleiner ist als die Gesamtzahl der Suchergebnisse.

***

## Komponente

### Klassische Blätternavigation

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"]}}
<ws-pagination max-pages="5" source="product">
  <button slot="first" show-page-number="true">«</button>
  <button slot="prev">‹</button>
  ...
  <button slot="standard"></button>
  <button slot="current"></button>
  ...
  <button slot="next">›</button>
  <button slot="last" show-page-number="true">»</button>
</ws-pagination>
```

* `max-pages`: Gibt an, wie viele Seitenzahlen gleichzeitig angezeigt werden sollen.
* `source`: Gibt den Quellindex an. Mögliche Werte sind `product`, `category` und `content`. Verknüpft die Pagination mit dem zugehörigen `<ws-search-result>`.
* `slot`: Separator. Zeigt einen neuen Slot als optischen Trenner für `first/prev` und `next/last`.
* `show-page-number`: Zeigt die Seitennummer im Button an statt den Text (für `slot="first"` & `slot="last"`)
* `show-with`: Separator-Sichtbarkeit - wird nur dann angezeigt, wenn der hier angegebene Slot sichtbar ist und `first` und/oder `last` beinhaltet.

**Slots:**

* `prev`: Button für die vorherige Seite (`<`).
* `current`: Zeigt die aktuelle Seite (hervorgehoben / 4).
* `first`: Zeigt die erste Seite (1).
* `last`: Zeigt die letzte Seite (108).
* `next`: Button für die nächste Seite (`>`).

***

### Mehrere Suchergebnisquellen mit eigener Pagination

Wenn auf einer Seite mehrere `<ws-search-result>`-Instanzen mit unterschiedlichen Quellen (z.B. Produkte und Kategorien) eingebunden sind, erhält jede Instanz eine eigene `<ws-pagination>` und einen eigenen `<ws-page-size-selector>`. Die Zuordnung erfolgt über das `source`-Attribut.

**Beispiel:**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-result class="bsp 123 xyz" use-ajax="yes" source="product"></ws-search-result>
<ws-pagination source="product"></ws-pagination>
<ws-page-size-selector source="product"></ws-page-size-selector>

<ws-search-result class="bsp 456 xyz" use-ajax="yes" source="category"></ws-search-result>
<ws-pagination source="category"></ws-pagination>
<ws-page-size-selector source="category"></ws-page-size-selector>
```

<Info>
  Die `source`-Angabe muss in `<ws-search-result>`, `<ws-pagination>` und `<ws-page-size-selector>` übereinstimmen, damit die Komponenten korrekt miteinander kommunizieren.
</Info>

***

### Weiterladen-Button oder Infinite Scrolling

Wenn anstelle der klassischen Seitennavigation ein „Weiterladen"-Button oder Infinite Scrolling verwendet wird, ist keine Integration von `ws-pagination` im Template erforderlich.

In diesem Szenario muss jedoch in der UI-Komponente `ws-search` die `page-size` gesetzt werden. Die `page-size` definiert die Startmenge der geladenen Treffer (ohne Blättern). Der „Weiterladen"-Button bzw. das Infinite Scrolling lädt anschließend paketweise in derselben Größe weitere Treffer nach.

Beispiel (Start mit 16 Treffern, danach Nachladen in 16er-Schritten):

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search
  ...
  page-size="16"
  ...>
</ws-search>
```

Mehr Informationen zur UI-Komponente `ws-search` finden Sie hier: [ws-search](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search).

Für die Umsetzung eines „Weiterladen"-Buttons oder Infinite Scrolling wird `ws-page-size-selector` benötigt (siehe [ws-page-size-selector](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-page-size-selector)).

***

### Keine Blätterfunktion verwenden

Wenn **keine Paginierung** gewünscht ist und **alle Treffer auf einer Seite** angezeigt werden sollen, ist keine `ws-pagination`-Integration im Template erforderlich. In diesem Fall ist lediglich sicherzustellen, dass in der UI-Komponente `ws-search` die `page-size` ausreichend hoch gesetzt wird, damit alle Ergebnisse in einem Durchlauf geladen und vollständig dargestellt werden können:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search
  ...
  page-size="1000"
  ...>
</ws-search>
```

Mehr Informationen zur UI-Komponente `ws-search` finden Sie hier: [ws-search](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search).

***

## HTML & CSS

Die folgenden **CSS-Klassen** werden in der Ausgabe generiert und können für individuelles Styling verwendet werden:

* `.pagination`: Container für die Paginierung.
* `.pagination-prev`: Styling für den "Zurück"-Button.
* `.pagination-next`: Styling für den "Weiter"-Button.
* `.pagination-page`: Styling für die einzelnen Seitenzahlen.
* `.pagination-page.current`: Styling für die aktuell ausgewählte Seite.

Zusätzlicher HTML-Code kann nicht innerhalb der Komponente eingefügt werden. Anpassungen sind nur über **Slots** oder **CSS** möglich.