> ## 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 a separate `<ws-search-result>` instance is used, for example for `product` and `category`. These instances 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`: All content results. If [several content sources](/en/ws-search/konfiguration-des-such-moduls#multiple-content-sources-for-the-search) are configured, their results are displayed combined.
  * `content_<name>`: Only the results of a single content source, for example `content_blog`. See section [Multiple content sources](#multiple-content-sources).
* `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"` is set.
* `item-class`: Sets the CSS class for the individual result items. Relevant when rendering directly via the component, that is when `use-ajax="no"` is set.

***

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

***

## Multiple content sources

<Info>
  The separated display of individual content sources requires **websale\_search\_webcomponents v1.7.0**. In the backend, **elasticsearch\_manager v1.15.0** and **websale\_search v1.18.0** are additionally required.
</Info>

If [several content sources](/en/ws-search/konfiguration-des-such-moduls#multiple-content-sources-for-the-search) are configured in the search module, you decide via the `source` attribute whether an instance combines all sources or displays only a single source. The name after the underscore corresponds to the `name` of the source in the import module configuration.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- All content results combined -->
<ws-search-result source="content"></ws-search-result>

<!-- Only the static content pages -->
<ws-search-result source="content_static"></ws-search-result>

<!-- Only the blog results -->
<ws-search-result source="content_blog"></ws-search-result>

<!-- Only the magazine results -->
<ws-search-result source="content_magazin"></ws-search-result>
```

The component automatically detects whether the response is in multi-content format, that is when the results are nested per source below `content`. An adjustment in the template is only necessary if you want to output individual sources separately.

<Info>
  The previous usage with `source="content"` for a single content configuration continues to work unchanged.
</Info>

***

## 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`, `content`, as well as `content_<name>` for multiple content sources.
* `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. The value `1`, for example, displays starting from the first result.
  * `{%result.to%}`: Pagination, up to which result is displayed. The value `24`, for example, displays up to the 24th result.

**Overall total across multiple indices**

If several indices are used, for example `product`, `category` and `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": ""
}
```

For multiple content sources, the content hits are nested below `content`. Each source forms its own block there with `results` and `sub_total`. The total hit count `total` still sums across all indices.

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "product": {
    "results": [],
    "sub_total": 120
  },
  "content": {
    "static": {
      "results": [],
      "sub_total": 3
    },
    "blog": {
      "results": [],
      "sub_total": 5
    },
    "magazin": {
      "results": [],
      "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.


## Related topics

- [Search & search result page](/en/ws-search/integration-in-die-templates-storefront/suche-suchergebnisseite.md)
- [ws-search](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search.md)
- [ws-search-result-tabs](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result-tabs.md)
- [ws-suggest-result](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result.md)
- [ws-pagination](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-pagination.md)