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

# Produktanzeige

> Produktdaten aus dem Such-API-Response per Template-Placeholder result.fieldname im Frontend anzeigen und JSON-Felder gezielt einbinden.

Die Daten für die Anzeige von Produkten, die im Rahmen der Suche oder Filterung zurückgegeben werden, stammen aus einem JSON-Objekt (Response), das von der Such-API geliefert wird. Dieses Objekt enthält alle Produktdaten, die im Such-Modul konfiguriert worden sind.

Template-Placeholder ermöglichen den direkten Zugriff auf diese Daten, um sie im Frontend anzuzeigen. Dabei erfolgt der Zugriff über die Syntax `{{result.fieldname}}`, wobei `fieldname` für ein bestimmtes Datenfeld im JSON-Objekt steht.

**Zum Überprüfen der JSON-Daten können Sie das folgende Skript verwenden**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
  wsResultDispatcher.subscribe("result", function(resultData) {
    console.log(resultData); // Gibt die JSON-Daten der Suchergebnisse in der Konsole aus
  });
</script>
```

Es gibt die vollständige Antwort in der Browser-Konsole aus. Die JSON-Antwort enthält die Liste der gefundenen Produkte sowie die im Such-Modul konfigurierten Produktattribute:

```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>
  Aktuell ist die Anzeige von Produkten nur in Verbindung mit dem Nachladen der WEBSALE Produktbox per Ajax möglich. Die nachfolgenden Schritte beschreiben, wie es **ohne** Ajax funktioniert und sind für die Ajax-Methode nicht relevant.
</Info>

Die Werte aus dem JSON-Objekt können im Frontend über die Template-Placeholder eingebunden werden. Dabei wird der Zugriff auf ein Datenfeld immer durch den `result`-Präfix angegeben.

**Beispiel für die Anzeige eines Produkts**

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

* **Erklärung der Syntax:**
  * `result.name`: Zeigt den Namen des Produkts (z. B. *Hose*).
  * `result.price`: Zeigt den Preis des Produkts (z. B. *32.00 €*).
  * `result.thumbnail`: Zeigt die URL des Produktbildes an.
  * `result.brand`: Zeigt die Marke des Produkts (z. B. *Levis*).

**Generierter HTML-Code nach Verarbeitung der Placeholder**

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