Product display

The data for displaying products returned as part of the search or filtering comes from a JSON object (response) that is delivered by the search API. This object contains all product data that has been configured in the search module. Template placeholders enable direct access to this data in order to display it in the frontend. Access is done via the syntax {{result.fieldname}}, where fieldname stands for a specific data field in the JSON object. To check the JSON data, you can use the following script

<script>
  wsResultDispatcher.subscribe("result", function(resultData) {
    console.log(resultData); // Outputs the JSON data of the search results in the console
  });
</script>

It outputs the complete response in the browser console. The JSON response contains the list of found products as well as the product attributes configured in the search module:

{
  "results": [
    {
      "_id": "430856",
      "_source": {
        "prodindexbase": "430856",
        "name": "Jogginghose",
        "price": "50.99",
        "brand": "adidas",
        "image": "https://ihr-shop.de/path/to/image.jpg"
      }
    },
    {
      "_id": "450366",
      "_source": {
        "prodindexbase": "450366",
        "name": "Joggingschuhe",
        "price": "111.49",
        "brand": "adidas",
        "image": "https://ihr-shop.de/path/to/image.jpg"
      }
    }
  ],
  "total": 129
}

Currently, the display of products is only possible in combination with reloading the WEBSALE product box via Ajax. The following steps describe how it works without Ajax and are not relevant for the Ajax method.

The values from the JSON object can be included in the frontend via the template placeholders. Access to a data field is always specified with the result prefix. Example of a product display

<template id="resultItemTemplate">
    <img src="{{result.thumbnail}}" alt="{{result.name}}">
    <h3>{{result.name}}</h3>
    <p>{{result.brand}}</p>
    <p data-sep=",">{{result.price}} €</p>
</template>

Explanation of the syntax:
- result.name: Shows the name of the product (e.g. Hose).
- result.price: Shows the price of the product (e.g. 32.00 €).
- result.thumbnail: Shows the URL of the product image.
- result.brand: Shows the brand of the product (e.g. Levis).

Generated HTML code after processing the placeholders

<ws-search-result>
...
      <img src="https://ihr-shop.de/path/to/image.jpg" alt="Jogginghose">
      <h3>Jogginghose</h3>
      <p>adidas</p>
      <p>50,99 €</p>
      <img src="https://ihr-shop.de/path/to/image.jpg" alt="Joggingschuhe">
      <h3>Joggingschuhe</h3>
      <p>adidas</p>
      <p>111,49 €</p>
...
</ws-search-result>

WS-Search

Setup

Integration into templates (Storefront)

Web components – Template placeholders

Web components – UI components