| Excerpt | ||
|---|---|---|
| ||
Gibt alle Elementte Produkte wieder, die gefunden worden sind. |
...
Die Komponente |
Komponente
Die Komponente <ws-search-result> ist dafür verantwortlich, die Ergebnisse einer Suche oder Filterung in der Storefront darzustellen. Sie verarbeitet die Antwort (Response) des Such-Moduls und gibt für jedes gefundene Produkt eine Produktreferenz aus.
| Code Block |
|---|
<ws-search-result></ws-search-result> |
Die Ausgabe der Ergebnisse wird über das React-spezifische <template>-Tag definiert. Innerhalb dieses Template-Tags können Sie die gewünschten Produktdaten platzieren.
| Code Block |
|---|
<template id="resultItemTemplate">
<div class="result-item {{record.ProdIndex}}">
<img src="{{record.image}}" alt="{{record.name}}">
<div class="brand">{{record.brand}}</div>
<p class="name">{{record.name}}</p>
<p class="price">{{record.price}} €</p>
</div>
</template> |
Basierend auf dem Template-Tag erzeugt die Komponente für jedes gefundene Produkt eine HTML-Ausgabe:
| Code Block |
|---|
<ws-search-result>
<div class="result-item 810610"></div>
<div class="result-item 810687"></div>
<div class="result-item 580065"></div>
<div class="result-item 810608"></div>
<div class="result-item 810576"></div>
</ws-search-result> |
Debugging und Ausgabe in der Konsole
Um die JSON-Daten zu überprüfen, können Sie das folgende Skript verwenden. Es gibt die Ergebnisse in der Browser-Konsole aus:
| Code Block |
|---|
<script>
wsResultDispatcher.subscribe("result", function(resultData) {
console.log(resultData); // Gibt die vollständige JSON-Antwort in der Konsole aus
});
</script> |
Die JSON-Antwort enthält die Liste der gefundenen Produkte sowie die im Such-Modul konfigurierten Produktattribute:
| Code Block |
|---|
{
"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
} |
CSS & Styling
Die Komponente <ws-search-result> selbst erzeugt keine spezifischen CSS-Klassen. Das Styling wird vollständig über das <template>-Tag definiert. Sie können innerhalb dieses Templates beliebige CSS-Anweisungen verwenden, um die Darstellung der Suchergebnisse individuell anzupassen.