Page Comparison

...

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": [
    {
      "_indexid": "search_index_20241210063555","430856",
      "_source": {
        "prodindexbase": "430856",
        "_idname": "402396Jogginghose",
        "_scoreprice": 40.209557,"50.99",
        "brand": "adidas",
        "image"_source: "https: {
 //ihr-shop.de/path/to/image.jpg"
      }
    },
    {
      "number_id": "402396450366",
      "_source": {
        "prodindexbase": "402396450366",
        "name": "HoseJoggingschuhe",
        "price": "32111.0049",
        "brand": "Levisadidas",
        "thumbnailimage": "https://www.hirihr-shop.de/produktepath/medien/bilder/klein/B402396to/image.jpg"
      }
    }
  ],
  "total": 2192129
}

...

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.

...

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