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

# Number of results

> Show hit counts like '1-10 of 150 products' with the placeholders result.from, result.to and result.total on search and category pages.

The display of the number of search results per page can be done with the values `result.from`, `result.to`, and `result.total`. This makes it possible to provide an overview in the format **"1-10 of 150 products"**. This display is updated automatically when a new page is opened or a filter is applied.

## Component

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

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

* The `data-template` attribute must be set on an element with the `total-container` class (see example above).
* `{{result.from}}`: Indicates the number of the first product displayed on the current page. This number depends on the number of products per page and the current page (e.g. `1` on page 1 or `17` on page 2 if 16 hits per page are set).
* `{{result.to}}`: Indicates the number of the last product displayed on the current page. This number depends on the configured number of hits per page (e.g. `16` or `32`).
* `{{result.total}}`: Shows the total number of products.

<Info>
  When switching from one page to the next or when applying filters, this display is updated automatically.
</Info>

The component produces the following source code, e.g. for the first page:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
1 - 16 von 275 Produkten
```

The source code does **not** produce any CSS automatically. The output can be adjusted with additional HTML code and your own CSS instructions.