| Excerpt | ||
|---|---|---|
| ||
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:
| Code Block |
|---|
<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:
| Code Block |
|---|
{
"results": [
{
"_indexid": "430856",
"search_index_20241210063555",_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
} |
...
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.
...
Generierter HTML-Code nach Verarbeitung der Placeholder
| Code Block |
|---|
<ws-search-result> ... <div class="product-item"> <img src="https://www.ihr-shop.de/produkte/medien/bilder/klein/B402396/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="HoseJoggingschuhe"> <h3>Hose<<h3>Joggingschuhe</h3> <p>Levis<<p>adidas</p> <p>32<p>111.0049 €</p> </div> ... </ws-search-result> |