Die Komponente <ws-search-result> ist dafür verantwortlich, die Ergebnisse einer Suche oder einer Filterung in der Storefront darzustellen. Sie verarbeitet die Antwort (Response) des Such-Moduls und gibt für jedes gefundene Produkt eine Produktreferenz aus.

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.

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

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

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

Die Anzeige der Produkte muss nicht zwingend über die innerhalb des <template>-Tags definierten Platzhalter erfolgen. Alternativ können Sie die Produktboxen der WebComponents durch die WEBSALE Produktbox ersetzen. Dies geschieht durch die Integration einer eindeutigen ID im <template>-Tag.

Die ID wsProductWebComponent-{{record.ProdIndex}} ermöglicht es, an dieser Stelle per AJAX die Inhalte der WEBSALE Produktbox nachzuladen. Dadurch kann die Ausgabe der Produkte um alle Shop-Funktionen ergänzt werden, die über die WEBSALE Produktbox bereitgestellt werden.

Debugging und Ausgabe in der Konsole

Um die Anzeige der Ergebnisse mit dem technischen Response zu überprüfen, können Sie das folgende Skript verwenden. Es gibt die Ergebnisse in der Browser-Konsole aus:

Die JSON-Antwort enthält die Liste der gefundenen Produkte sowie die im Such-Modul konfigurierten Produktattribute:

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.