In diesem Abschnitt erfahren Sie, welche WebComponents für die Integration des Such-Moduls zur Verfügung stehen und wie diese eingesetzt werden können.

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. Sie generieren automatisch Quellcode für HTML und CSS und erleichtern die Integration komplexer Funktionen wie Suche, Filterung oder Paginierung in die Storefront-Templates.

Jede WebComponent beginnt mit dem Präfix ws- und folgt der bekannten HTML-Syntax. Sie müssen wie HTML-Elemente geöffnet und geschlossen werden und können zusätzlich erweitert werden.

Ein einfaches Beispiel für die Struktur einer WebComponent:

<ws-searchbox> </ws-searchbox>

WebComponents können auch um zusätzliche HTML-Elemente oder Attribute ergänzt werden, um die Funktionalität und das Design individuell anzupassen.

Zum Beispiel:

<ws-searchbox use-suggest="true">
    <input type="search" name="query" placeholder="Artikel suchen">
</ws-searchbox>

CSS-Anweisungen, die von den WebComponents generiert werden, können in eigene CSS-Dateien übernommen oder durch zusätzliche Anweisungen ergänzt werden, um das Erscheinungsbild vollständig an das Shop-Design anzupassen.

Die von WEBSALE bereitgestellten WebComponents basieren auf dem React-JS-Framework. Dadurch können sie React-spezifische Funktionalitäten nutzen, wie beispielsweise das <template>-Tag.

Ein Beispiel für eine Komponente, die auf React basiert:

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