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

# Product display

> Display product data from the search API response in the frontend via the result.fieldname template placeholder and embed JSON fields selectively.

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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:

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "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
}
```

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

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```