> ## 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 displays a paging navigation with page numbers, previous and next buttons for search and category results and keeps the URL in sync.

The `<ws-pagination>` component provides a paging feature that lets users navigate between different pages of the search results or category.

***

## Requirements

* The pagination feature depends on the settings of the `<ws-page-size-selector>` component.
* Pagination is only displayed when the **default value** or the value chosen by the user for the number of displayed results per page is smaller than the total number of search results.

***

## Component

### Classic paging navigation

The component can be embedded as follows on the category and search result page:

```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`: Specifies how many page numbers are displayed at the same time.
* `source`: Specifies the source index. Possible values are `product`, `category`, and `content`. Links the pagination with the corresponding `<ws-search-result>`.
* `slot`: Separator. Displays a new slot as a visual separator for `first/prev` and `next/last`.
* `show-page-number`: Displays the page number in the button instead of the text (for `slot="first"` & `slot="last"`).
* `show-with`: Separator visibility – only displayed if the slot given here is visible and contains `first` and/or `last`.

**Slots:**

* `prev`: Button for the previous page (`<`).
* `current`: Displays the current page (highlighted / 4).
* `first`: Displays the first page (1).
* `last`: Displays the last page (108).
* `next`: Button for the next page (`>`).

***

### Multiple search result sources with their own pagination

When a page embeds several `<ws-search-result>` instances with different sources (e.g. products and categories), each instance gets its own `<ws-pagination>` and its own `<ws-page-size-selector>`. The mapping is done via the `source` attribute.

**Example:**

```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>
  The `source` value must be the same in `<ws-search-result>`, `<ws-pagination>`, and `<ws-page-size-selector>` so that the components communicate with each other correctly.
</Info>

***

### Load more button or infinite scrolling

When a "Load more" button or infinite scrolling is used instead of classic page navigation, no integration of `ws-pagination` in the template is required.

In that scenario, however, `page-size` must be set on the `ws-search` UI component. `page-size` defines the initial number of hits loaded (without paging). The "Load more" button or infinite scrolling then loads additional hits in packages of the same size.

Example (start with 16 hits, then reload in steps of 16):

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

For more information on the `ws-search` UI component see [ws-search](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search).

To implement a "Load more" button or infinite scrolling, `ws-page-size-selector` is required (see [ws-page-size-selector](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-page-size-selector)).

***

### Not using a paging feature

If **no pagination** is desired and **all hits should be displayed on a single page**, no `ws-pagination` integration in the template is required. In this case you only need to make sure that `page-size` on the `ws-search` UI component is set high enough so that all results are loaded in one go and can be displayed in full:

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

For more information on the `ws-search` UI component see [ws-search](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search).

***

## HTML & CSS

The following **CSS classes** are generated in the output and can be used for individual styling:

* `.pagination`: Container for the pagination.
* `.pagination-prev`: Styling for the "Previous" button.
* `.pagination-next`: Styling for the "Next" button.
* `.pagination-page`: Styling for the individual page numbers.
* `.pagination-page.current`: Styling for the currently selected page.

Additional HTML code cannot be inserted inside the component. Adjustments are only possible via **slots** or **CSS**.