Produktanzeige

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 {{record.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:

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

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

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 record-Prefix angegeben.

Beispiel für die Anzeige eines Produkts

<template id="resultItemTemplate">
    <div class="product-item">
        <img src="{{record.thumbnail}}" alt="{{record.name}}">
        <h3>{{record.name}}</h3>
        <p>{{record.brand}}</p>
        <p>{{record.price}} €</p>
    </div>
</template>

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

Generierter HTML-Code nach Verarbeitung der Placeholder