Zum Hauptinhalt springen
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 
<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
}
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.
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 
<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 
<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>