Zum Hauptinhalt springen
Die Komponente <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: 
<ws-pagination max-pages="5" source="product">
  <button slot="first" show-page-number="true">«</button>
  <button slot="prev">‹</button>
  ...
  <button slot="standard"></button>
  <button slot="current"></button>
  ...
  <button slot="next">›</button>
  <button slot="last" show-page-number="true">»</button>
</ws-pagination>
  • max-pages: Gibt an, wie viele Seitenzahlen gleichzeitig angezeigt werden sollen.
  • source: Gibt den Quellindex an. Mögliche Werte sind product, category und content. Verknüpft die Pagination mit dem zugehörigen <ws-search-result>.
  • slot: Separator. Zeigt einen neuen Slot als optischen Trenner für first/prev und next/last.
  • show-page-number: Zeigt die Seitennummer im Button an statt den Text (für slot="first" & slot="last")
  • show-with: Separator-Sichtbarkeit - wird nur dann angezeigt, wenn der hier angegebene Slot sichtbar ist und first und/oder last beinhaltet.
Slots:
  • 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 (z.B. 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: 
<ws-search-result class="bsp 123 xyz" use-ajax="yes" source="product"></ws-search-result>
<ws-pagination source="product"></ws-pagination>
<ws-page-size-selector source="product"></ws-page-size-selector>

<ws-search-result class="bsp 456 xyz" use-ajax="yes" source="category"></ws-search-result>
<ws-pagination source="category"></ws-pagination>
<ws-page-size-selector source="category"></ws-page-size-selector>
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 anstelle der klassischen Seitennavigation ein „Weiterladen”-Button oder Infinite Scrolling verwendet wird, ist keine Integration von ws-pagination im Template erforderlich. 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). Der „Weiterladen”-Button bzw. das Infinite Scrolling lädt anschließend paketweise in derselben Größe weitere Treffer nach. Beispiel (Start mit 16 Treffern, danach Nachladen in 16er-Schritten): 
<ws-search
  ...
  page-size="16"
  ...>
</ws-search>
Mehr Informationen zur UI-Komponente ws-search finden Sie hier: ws-search. Für die Umsetzung eines „Weiterladen”-Buttons oder Infinite Scrolling wird ws-page-size-selector benötigt (siehe ws-page-size-selector).

​
Keine Blätterfunktion verwenden

Wenn keine Paginierung gewünscht ist und alle Treffer auf einer Seite angezeigt werden sollen, ist keine ws-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
  ...
  page-size="1000"
  ...>
</ws-search>
Mehr Informationen zur UI-Komponente 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.
Zusätzlicher HTML-Code kann nicht innerhalb der Komponente eingefügt werden. Anpassungen sind nur über Slots oder CSS möglich.