WebComponents bieten standardisierte Bausteine für die Umsetzung interaktiver Funktionen. Sie ermöglichen es, Elemente wie Suche, Filterung, Sortierung und Paginierung einfach und flexibel in HTML-Templates einzubinden.

Inhaltsverzeichnis

Prinzip der WEBSALE WebComponents

Die WEBSALE WebComponents sind wiederverwendbare Bausteine, die von WEBSALE bereitgestellt werden und automatisch Quellcode für HTML und CSS generieren. Sie vereinfachen die Integration komplexer Funktionen, wie Suche, Filterung oder Paginierung, in die Storefront-Templates.

Die von WEBSALE bereitgestellten WebComponents basieren auf dem React-JS-Framework. Dank der Nutzung von React können für die WebComponents auch React-spezifische Funktionalitäten verwendet werden, z.B. die Verwendung des <template>-Tags:

<template id="resultItemTemplate">
    <div className="result-item">
        <h3>{product.name}</h3>
        <p>{product.price} €</p>
    </div>
</template>

Übersicht der WebComponents

Die folgenden WebComponents stehen zur Verfügung:

• <ws-searchbox>: Eingabefeld für die Suche mit optionaler Suggest-Funktion.

• <ws-search-result>: Darstellung der Suchergebnisse.

• <ws-pagination>: Navigation durch mehrere Seiten von Suchergebnissen.

• <ws-sortbox>: Auswahl der Sortieroptionen für Suchergebnisse.

• <ws-filter>: Dynamische Filter, z. B. Checkboxen, Slider oder Range-Filter.

• <ws-applied-filters>: Liste der aktuell aktiven Filter.

• <ws-set-filter-back>: Button zum Zurücksetzen aller Filter.

• <ws-paging-size-selector>: Auswahl der Trefferanzahl pro Seite.

Dann habe ich noch <template> in Michis Code gefunden. Dann wäre noch die Frage, was man bei jedem einzelnen angeben kann - also welche Werte.