...

...

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.

...

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

...