Produktanzeige

Aktuell ist die Anzeige von Produkten nur in Verbindung mit dem Nachladen der WEBSALE Produktbox per Ajax möglich.

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

<ws-search-result>
...
  <div class="product-item">
      <img src="https://ihr-shop.de/path/to/image.jpg" alt="Jogginghose">
      <h3>Jogginghose</h3>
      <p>adidas</p>
      <p>50.99 €</p>
  </div>
  
  <div class="product-item">
      <img src="https://ihr-shop.de/path/to/image.jpg" alt="Joggingschuhe">
      <h3>Joggingschuhe</h3>
      <p>adidas</p>
      <p>111.49 €</p>
  </div>
...
</ws-search-result>

Dokumentation

Produktanzeige

Analytics