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.

<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: All content results. If several content sources 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.
• 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.

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

---

Multiple content sources

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.

If several content sources 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.

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

The previous usage with source="content" for a single content configuration continues to work unchanged.

---

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

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.

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

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.