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

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

2. Übersicht der WebComponents

2.X Paginierung <ws-pagination>

Die WebComponent <ws-pagination> stellt eine Blätterfunktion bereit, mit der Nutzer zwischen verschiedenen Seiten der Ergebnisse einer Suche oder Filterung navigieren können.

Die Komponente wird nur angezeigt, wenn Ergebnisse vorhanden sind, die auf mehrere Seiten verteilt werden müssen.

Voraussetzung

z.B. sowas wie

• Die Paginierungsfunktion ist abhängig von den Einstellungen der Komponente <ws-paging-size-selector>.

• Die Paginierung wird nur angezeigt, wenn der Standardwert oder der vom Nutzer gewählte Wert für die Anzahl der angezeigten Ergebnisse pro Seite kleiner ist als die Gesamtzahl der Suchergebnisse.

Eingabe und Ausgabe

Die Komponente kann wie folgt auf der Suchergebnisseite und Kategorie eingebunden werden:

<ws-pagination maxVisiblePages="5">
    <button slot="prev"><</button>
    <button slot="current" style="font-weight: bold;"></button>
    <button slot="standard"></button>
    <button slot="next">></button>
</ws-pagination>

• maxVisiblePages: Gibt an, wie viele Seitenzahlen gleichzeitig angezeigt werden sollen.

• Slots:

  • prev: Button für die vorherige Seite (<).

  • current: Zeigt die aktuelle Seite (hervorgehoben).

  • standard: Zeigt die Seitennummern der anderen sichtbaren Seiten.

  • next: Button für die nächste Seite (>).

Müssen das Buttons sein oder könnte ich hier auch Links verwendet werde oder sowas? oder muss ich hier schreiben: Zusätzlicher oder anderer HTML-Code kann nicht innerhalb der Komponente eingefügt werden.

Zusatzanweisungen per CSS können hinzugefügt werden?

Die Komponente erzeugt den folgenden Quellcode:

<nav class="pagination">
    <button class="pagination-prev"><</button>
    <span class="pagination-page current">1</span>
    <span class="pagination-page">2</span>
    <span class="pagination-page">3</span>
    <button class="pagination-next">></button>
</nav>

Die folgenden CSS-Klassen werden in der Ausgabe generiert und können für individuelles Styling verwendet werden:

• .pagination: Container für die Paginierung.

• .pagination-prev: Styling für den "Zurück"-Button.

• .pagination-next: Styling für den "Weiter"-Button.

• .pagination-page: Styling für die einzelnen Seitenzahlen.

• .pagination-page.current: Styling für die aktuell ausgewählte Seite.

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.