ws-search-result

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.

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

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

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

<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

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

<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 without a source attribute.

From ws-search-component-1.9.1.js onwards, the 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.

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

This solution is only necessary if more than one index is used.

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:

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

{
  "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": ""
}

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

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.

WS-Search

Setup

Integration into templates (Storefront)

Web components – Template placeholders

Web components – UI components

Component

Placeholder template

HTML output

Total container

Debugging and output in the console

CSS & styling

​Component

​Placeholder template

​HTML output

​Total container

​Debugging and output in the console

​CSS & styling

Component

Placeholder template

HTML output

Total container

Debugging and output in the console

CSS & styling