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

# Paging from product to product

> How to add a paging function to the product detail view in WEBSALE V8s so that the buyer jumps directly to the next product in the list.

When paging from product to product, the buyer jumps directly from the detail view to the next or previous product without the detour through the product list. The tags therefore belong on the single-product template.

The basis is the product list from which the buyer called up the product. Both the order and the total count are derived from it.

> [!WARNING]
>
> For reasons of search engine optimization, paging through the individual products is not recommended.

## Output the paging function automatically

A single tag is enough. WEBSALE V8s generates the complete paging function from it, including forward and back buttons.

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

Reference: WS-ProdPaging 

You control the appearance via styles.

Reference: Styles for paging of categories and products 

### Show the area only when there are multiple products

The same tag can also be used as a bracket. The area then only appears when the underlying list contains more than one product. This prevents an empty heading or frame from remaining when there is only a single hit.

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

## Show the position in the paging run

Two tags output the current position and the total count.

| Tag | Content |
| - | - |
| `PR-CurrPage` | position of the current product in the list |
| `PR-MaxPages` | total number of products in the list |

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

This produces a display like "Seite 2 von 6".

## Position the forward and back buttons yourself

If the automatic output does not suffice for your design, place the two buttons at your own position in the template. `~WS-ProdPaging~` then only outputs the page numbers.

### Step 1: Disable the automatic buttons

Specify this on the product template. The specification is placed inside an HTML comment so that it is not visible in the shop's source code.

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

Reference: WS-Config&#x20;

### Step 2: Place the buttons yourself

For each direction, a bracket and a link tag belong together. The bracket ensures that the back button disappears on the first product and the forward button on the last product of the list, instead of leading nowhere.

```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}
```

## Related topics

* Guide: Paging in product lists
* Guide: Displaying the selected product


## Related topics

- [Paging product lists and products per page](https://dokumentation.websale.de/en/v8s/funktionen-fuer-produktdaten/produktlisten-blaettern-und-produkte-je-seite.md)
- [Styles for catalog and products](https://dokumentation.websale.de/en/v8s/referenz/styles/katalog-und-produkte.md)
- [Sorting and paging product lists](https://dokumentation.websale.de/en/v8s/referenz/tags/cat/sortieren-und-blaettern.md)
- [Sorting product lists](https://dokumentation.websale.de/en/v8s/funktionen-fuer-produktlisten/produktlisten-sortieren.md)
- [PR- (Basics and product data)](https://dokumentation.websale.de/en/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)


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