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

# Blättern von Produkt zu Produkt

> Wie Sie in WEBSALE V8s auf der Produktdetailansicht eine Blättern-Funktion einbauen, mit der der Käufer direkt zum nächsten Produkt der Liste springt.

Beim Blättern von Produkt zu Produkt springt der Käufer aus der Detailansicht heraus direkt zum nächsten oder vorherigen Produkt, ohne den Umweg über die Produktliste. Die Tags gehören deshalb in das Einzelprodukt-Template.

Grundlage ist die Produktliste, aus welcher der Käufer das Produkt aufgerufen hat. Aus ihr ergibt sich sowohl die Reihenfolge als auch die Gesamtzahl.

> [!WARNING]
>
> Aus Gründen der Suchmaschinenoptimierung ist das Blättern durch die Einzelprodukte nicht zu empfehlen.

## Blättern-Funktion automatisch ausgeben

Ein einzelnes Tag genügt. WEBSALE V8s erzeugt daraus die vollständige Blättern-Funktion samt Vor- und Zurück-Button.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ProdPaging~
```

Referenz: [WS-ProdPaging](https://dokumentation.websale.de/v8s/referenz/tags/ws/suche-listen-und-blaettern.md#die-tags-im-uberblick)

Das Aussehen steuern Sie über Styles.

Referenz: Styles für Blättern von Kategorien und Produkten

### Bereich nur bei mehreren Produkten anzeigen

Dasselbe Tag lässt sich auch als Klammerung verwenden. Der Bereich erscheint dann nur, wenn die zugrunde liegende Liste mehr als ein Produkt enthält. So bleibt bei einem einzelnen Treffer keine leere Überschrift oder Umrandung stehen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-ProdPaging}
   ~WS-ProdPaging~
{/WS-ProdPaging}
```

## Position im Blätterlauf anzeigen

Zwei Tags geben die aktuelle Position und die Gesamtzahl aus.

| Tag | Inhalt |
| - | - |
| [`PR-CurrPage`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten#die-tags-im-uberblick) | Position des aktuellen Produkts in der Liste |
| [`PR-MaxPages`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten#die-tags-im-uberblick) | Gesamtzahl der Produkte in der Liste |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Seite ~PR-CurrPage~ von ~PR-MaxPages~
```

Das ergibt eine Anzeige wie "Seite 2 von 6".

## Vor- und Zurück-Button selbst positionieren

Reicht Ihnen die automatische Ausgabe gestalterisch nicht, setzen Sie die beiden Buttons an eine eigene Stelle im Template. `~WS-ProdPaging~` gibt dann nur noch die Seitenzahlen aus.

### Schritt 1: Automatische Buttons abschalten

Geben Sie das auf dem Produkt-Template an. Die Angabe steht in einem HTML-Kommentar, damit sie im Quelltext des Shops nicht sichtbar wird.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!--{WS-Config}
...
HidePagingKeys-Allow = yes
{/WS-Config}-->
```

Referenz: [WS-Config](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md#die-tags-im-uberblick)

### Schritt 2: Buttons selbst setzen

Je Richtung gehören eine Klammerung und ein Link-Tag zusammen. Die Klammerung sorgt dafür, dass der Zurück-Button beim ersten und der Vor-Button beim letzten Produkt der Liste verschwindet, statt ins Leere zu führen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-ProdPagingBack}
   <a href="~WS-ProdPagingBackLink~">zurück</a>
{/WS-ProdPagingBack}

{WS-ProdPagingNext}
   <a href="~WS-ProdPagingNextLink~">weiter</a>
{/WS-ProdPagingNext}
```

## Verwandte Themen

* Wegweiser: [Blättern in Produktlisten](https://dokumentation.websale.de/v8s/anwendungsbeispiele/anwendungsbeispiele.md#blattern-in-produktlisten)
* Wegweiser: [Gewähltes Produkt anzeigen](https://dokumentation.websale.de/v8s/produkte/gewaehltes-produkt-anzeigen.md)


## Related topics

- [Produktlisten blättern und Produkte je Seite](https://dokumentation.websale.de/v8s/funktionen-fuer-produktdaten/produktlisten-blaettern-und-produkte-je-seite.md)
- [Blättern in Produktlisten ohne Seitenwechsel](https://dokumentation.websale.de/v8s/anwendungsbeispiele/appex-blaettern-ohne-seitenwechsel.md)
- [Suche, Listen und Blättern](https://dokumentation.websale.de/v8s/referenz/tags/ws/suche-listen-und-blaettern.md)
- [Produktlisten sortieren und blättern](https://dokumentation.websale.de/v8s/referenz/tags/cat/sortieren-und-blaettern.md)
- [Styles für Katalog und Produkte](https://dokumentation.websale.de/v8s/referenz/styles/katalog-und-produkte.md)


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