<ws-pagination> stellt eine Blätterfunktion bereit, mit der Nutzer zwischen verschiedenen Seiten der Suchergebnisse oder Kategorie navigieren können.
Voraussetzungen
- Die Paginierungsfunktion ist abhängig von den Einstellungen der Komponente
<ws-page-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.
Komponente
Klassische Blätternavigation
Die Komponente kann wie folgt auf der Kategorie- und Suchergebnisseite eingebunden werden:max-pages: Gibt an, wie viele Seitenzahlen gleichzeitig angezeigt werden sollen.source: Gibt den Quellindex an. Mögliche Werte sindproduct,categoryundcontent. Verknüpft die Pagination mit dem zugehörigen<ws-search-result>.slot: Separator. Zeigt einen neuen Slot als optischen Trenner fürfirst/prevundnext/last.show-page-number: Zeigt die Seitennummer im Button an statt den Text (fürslot="first"&slot="last")show-with: Separator-Sichtbarkeit - wird nur dann angezeigt, wenn der hier angegebene Slot sichtbar ist undfirstund/oderlastbeinhaltet.
prev: Button für die vorherige Seite (<).current: Zeigt die aktuelle Seite (hervorgehoben / 4).first: Zeigt die erste Seite (1).last: Zeigt die letzte Seite (108).next: Button für die nächste Seite (>).
Mehrere Suchergebnisquellen mit eigener Pagination
Wenn auf einer Seite mehrere<ws-search-result>-Instanzen mit unterschiedlichen Quellen (beispielsweise Produkte und Kategorien) eingebunden sind, erhält jede Instanz eine eigene <ws-pagination> und einen eigenen <ws-page-size-selector>. Die Zuordnung erfolgt über das source-Attribut.
Beispiel:
Die
source-Angabe muss in <ws-search-result>, <ws-pagination> und <ws-page-size-selector> übereinstimmen, damit die Komponenten korrekt miteinander kommunizieren.Weiterladen-Button oder Infinite Scrolling
Wenn statt der klassischen Seitennavigation ein “Weiterladen”-Button oder Infinite Scrolling verwendet wird, ist keine Integration vonws-pagination im Template erforderlich. Beide Optionen stellen die Komponente <ws-page-size-selector> bereit, mit mode="button" für den Button und mode="infinite" für das Infinite Scrolling.
In diesem Szenario muss jedoch in der UI-Komponente ws-search die page-size gesetzt werden. Die page-size definiert die Startmenge der geladenen Treffer (ohne Blättern). Anschließend lädt der “Weiterladen”-Button bzw. das Infinite Scrolling paketweise weitere Treffer in derselben Größe nach.
Beispiel (Start mit 16 Treffern, danach Nachladen in 16er-Schritten):
ws-search finden Sie hier: ws-search.
Wie Sie den Button und das Infinite Scrolling einbinden, beschreibt ws-page-size-selector. Beim Infinite Scrolling muss die Komponente direkt unter <ws-search-result> stehen.
Keine Blätterfunktion verwenden
Wenn keine Paginierung gewünscht ist und alle Treffer auf einer Seite angezeigt werden sollen, ist keinews-pagination-Integration im Template erforderlich. In diesem Fall ist lediglich sicherzustellen, dass in der UI-Komponente ws-search die page-size ausreichend hoch gesetzt wird, damit alle Ergebnisse in einem Durchlauf geladen und vollständig dargestellt werden können:
ws-search finden Sie hier: ws-search.
HTML & CSS
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.