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

> ws-search-result renders the hit list of the search or category with product data, templates, and placeholders from the Search API response.

The `<ws-search-result>` component is responsible for displaying the results of a search or filtering in the storefront. It processes the response of the search module and outputs a reference for each product or category found.

***

## Component

Results are grouped per index – for each index (for example `product`, `category`), a separate `<ws-search-result>` instance is used, which can be placed freely in the layout.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-result
  source="product"
  use-ajax="yes"
  wrapper-class="result-grid"
  item-class="result-item">
  <template slot="result-placeholder">
    ...
  </template>
</ws-search-result>

<ws-search-result
  source="category"
  use-ajax="yes"
  wrapper-class="category-grid"
  item-class="category-item">
  <template slot="result-placeholder">
    ...
  </template>
</ws-search-result>
```

**Attributes**

* `source`: Specifies the source index whose results this instance displays. If no `source` is set, the component behaves as before. Possible values:
  * `product`
  * `category`
  * `tab`: Only relevant within [ws-search-result-tabs](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result-tabs). Bundles several `ws-search-result` instances in a shared tab. Without `tab`, the `source` forms the tab.
  * `content`
* `use-ajax`: Specifies whether an Ajax call is used to reload the WEBSALE product boxes.
  * `true/yes`: An Ajax call is used.
  * If not set, the web components render the product boxes.
* `wrapper-class`: Sets the CSS class for the wrapper container. Relevant when rendering directly via the component (that is, when `use-ajax="no"`).
* `item-class`: Sets the CSS class for the individual result items. Relevant when rendering directly via the component (that is, when `use-ajax="no"`).

***

## Placeholder template

To avoid height shifts while the boxes load, a `<template>` with the slot `result-placeholder` can be specified within `<ws-search-result>`. It is displayed as a placeholder for each result until the box is fully loaded.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-result class="result-grid" use-ajax="yes">
  <template slot="result-placeholder">

      ...

  </template>
</ws-search-result>
```

***

## HTML output

**Products** (`source="product"`): The component generates a container with the ID prefix `wsProductWebComponent-` and the attribute `data-product-id` for each product found. Via this ID the WEBSALE product box can be reloaded via AJAX.

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

    <div id="wsProductWebComponent-430856" data-product-id="430856">
        ...
    </div>

    <div id="wsProductWebComponent-450366" data-product-id="450366">
        ...
    </div>

</ws-search-result>
```

**Categories** (`source="category"`): For the category results, the ID prefix `wsCategoryWebComponent-` and the attribute `data-category-id` are used analogously. The ID is used in the storefront by the AJAX script to reload the WEBSALE category box.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-result class="category-grid" source="category">

    <div id="wsCategoryWebComponent-100012" data-category-id="100012">
        ...
    </div>

</ws-search-result>
```

***

## Total container

The `<ws-search-result>` component also takes care of rendering total containers. A total container displays information about the total number of search results and the current pagination.

Important: The CSS class `total-container` must be contained in the `class` attribute so that the component detects and renders the container.

**Example**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div class="total-container" source="product" data-template="{%result.from%} - {%result.to%} of {%result.total%} products"></div>
```

After the search results are received, the container is rendered by `ws-search-result`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div class="total-container" source="product" data-template="{%result.from%} - {%result.to%} of {%result.total%} products">
  1 - 24 of 123 products
</div>
```

**Attributes**

* `source`: The index whose total is to be displayed. Possible values are `product`, `category`, and `content`.
* `data-template`: A string template that is used to render the `textContent`. Contains placeholders that are replaced with the actual values:
  * `{%result.total%}`: Total number of search results.
  * `{%result.from%}`: Pagination: from which result the display starts (for example `1` → displays starting from the first result).
  * `{%result.to%}`: Pagination: up to which result is displayed (for example `24` → displays up to the 24th result).

**Overall total across multiple indices**

If several indices are used (for example `product`, `category`, `content`) and the cross-index overall total is to be displayed, use [ws-search-info](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-info) without a `source` attribute.

<Info>
  From `ws-search-component-1.9.1.js` onwards, the [ws-search-info](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-info) component handles the hit display – including the cross-index overall total, which previously required a script in the template. The approach described here can still be used, but should no longer be used in new projects.
</Info>

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
  // Update global total-containers (without source attribute)
  var globalTotalContainers = document.querySelectorAll('.total-container:not([source])');

  for (var i = 0; i < globalTotalContainers.length; i++) {
    var template = globalTotalContainers[i].getAttribute('data-template');

    if (template) {
      var data = {
        total: event.detail.total,
        query: event.detail.query,
        from: event.detail.from + 1,
        to: Math.min(event.detail.from + event.detail.size, event.detail.total)
      };

      var rendered = template.replace(/{%\s*result\.(\w+)\s*%}/g, function(match, key) {
        return data[key] !== undefined ? data[key] : match;
      });

      globalTotalContainers[i].innerHTML = rendered;
    }
  }
</script>
```

<Info>
  This solution is only necessary if more than one index is used.
</Info>

***

## Debugging and output in the console

To check the display of the results against the technical response, you can use the following script. It prints the results to the browser console:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
  wsResultDispatcher.subscribe("result", function(resultData) {
    console.log(resultData); // Prints the full JSON response to the console
  });
</script>
```

The JSON response contains the list of found products as well as the product attributes configured in the search module:

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "product": {
    "results": [
      {
        "_id": "430856",
        "_source": {
          "prodindexbase": "430856",
          "name": "Jogging pants",
          "price": "50.99",
          "brand": "adidas",
          "image": "https://your-shop.com/path/to/image.jpg"
        }
      }
    ],
    "sub_total": 1
  },
  "category": {
    "results": [
      {
        "_id": "100012",
        "_source": {
          "name": "Pants",
          "url": "https://your-shop.com/pants"
        }
      }
    ],
    "sub_total": 1
  },
  "total": 129,
  "filters": {},
  "applied_filters": {},
  "zero_result_filters": [],
  "wssearchdata": ""
}
```

<Info>
  To make the fields under `_source` available, you need to contact WEBSALE Support. They enable the fields in the backend configuration.
</Info>

***

## CSS & styling

The `<ws-search-result>` component itself does not generate any specific CSS classes. Styling is defined entirely via the `<template>` tag. Within this template you can use any CSS statements to customize the display of the search results.