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.

Beispiel eines JSON-Objekts für Ergebnisse

{
  "results": [
    {
      "_index": "search_index_20241210063555",
      "_id": "402396",
      "_score": 40.209557,
      "_source": {
        "number": "402396",
        "prodindexbase": "402396",
        "name": "Hose",
        "price": "32.00",
        "brand": "Levis",
        "thumbnail": "https://www.hir-shop.de/produkte/medien/bilder/klein/B402396.jpg"
      }
    }
  ],
  "total": 2192
}

Syntax für den Zugriff auf die JSON-Daten

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

<div class="product-item">
    <img src="https://www.ihr-shop.de/produkte/medien/bilder/klein/B402396.jpg" alt="Hose">
    <h3>Hose</h3>
    <p>Levis</p>
    <p>32.00 €</p>
</div>