> ## 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-search-info

> ws-search-info displays search-result information such as hit count, search term, and page range using freely definable templates.

The `<ws-search-info>` component displays information about the search result, for example the total number of hits, the search term, or the result range currently shown. The display is controlled via a freely definable template and updates automatically when new search results are available.

The component replaces the previous hit display via the CSS class `total-container`.

## Prerequisite

* JavaScript bundle `ws-search-component-<version>.js` from version **1.9.1** onwards

## Component

The component can be used multiple times on a page, for example on the category and search result page.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Source code -->
<ws-search-info data-template="{% result.total %} results"></ws-search-info>

<ws-search-info data-template="Search for: '{% result.query %}'"></ws-search-info>

<ws-search-info data-template="Showing {% result.from %}-{% result.to %} of {% result.total %}"></ws-search-info>

<!-- DOM Output -->
<ws-search-info data-template="{% result.total %} results">42 results</ws-search-info>

<ws-search-info data-template="Search for: '{% result.query %}'">Search for: 'search term'</ws-search-info>

<ws-search-info data-template="Showing {% result.from %}-{% result.to %} of {% result.total %}">Showing 1-24 of 42</ws-search-info>
```

* **Attributes**
  * `data-template`: **Required.** Template string with placeholders that defines the displayed text.
  * `source`: Optional. Limits the display to one or more sources (comma-separated), for example `source="content"` or `source="content_static,content_blog"`. Without a `source` attribute, the values refer to the entire search result.

## Available placeholders

| **Placeholder**                   | **Description**                                                                                                |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `{% result.total %}`              | Total number of results                                                                                        |
| `{% result.query %}`              | Current search term                                                                                            |
| `{% result.from %}`               | Start index of the displayed range (1-based)                                                                   |
| `{% result.to %}`                 | End index of the displayed range                                                                               |
| `{% result.[source].sub_total %}` | Number of results of a single source when using multiple sources, for example `{% result.product.sub_total %}` |

## Behavior

* The component can be used multiple times on a page.
* The display updates automatically as soon as new search results are available (for example after filtering, sorting, or paging).

<Info>
  `ws-search-info` is available from `ws-search-component-1.9.1.js` onwards and replaces the previous hit display via elements with the CSS class `total-container` and the `data-template` attribute. The previous approach can still be used, but should no longer be used in new projects.
</Info>