Skip to main content
Mit der Komponente ws-page-size-selector lässt sich steuern, wie viele Treffer auf der Suchergebnisseite oder der Kategorieseite geladen werden. Je nach Modus kann der Kunde die Trefferanzahl pro Seite selbst wählen, per Button weitere Treffer nachladen oder beim Scrollen automatisch die nächsten Treffer angezeigt bekommen. Drei Modi stehen zur Verfügung:
  • select: Auswahl der Trefferanzahl pro Seite über eine Dropdown-Liste. Das ist die Standarddarstellung.
  • button: Ein Button lädt die nächsten Treffer und hängt sie an die Ergebnisliste an.
  • infinite: Neue Treffer werden automatisch geladen, sobald der Kunde das Ende der Ergebnisliste erreicht (Infinite Scrolling).
Mit button und infinite ersetzt die Komponente die klassische Blätternavigation. Eine ws-pagination ist dann nicht nötig.

​
Komponente

Die Komponente kann wie folgt auf der Kategorie- und Suchergebnisseite eingebunden werden: Select-Mode
Button-Mode
Infinite-Mode
  • Attribute:
    • options: Liste der verfügbaren Optionen für die Trefferanzahl pro Seite, beispielsweise [16, 32, 48, 64, 80]. Der Wert 0 erzeugt die Option „Alle anzeigen“, siehe Alle Treffer anzeigen.
    • class: Ermöglicht es, dem Element selbst eine Klasse zuzuweisen.
    • mode: Gibt an, wie die Darstellung erfolgen soll
      • select: Darstellung als Dropdown-Liste
        • select-class: Klasse für das erzeugte select-Element
      • button: Ein „Mehr anzeigen“-Button ohne Blättern
        • label: Gibt den im Button vorhandenen Text an
        • btn-class: Klasse für den Button
      • infinite: Automatisches Nachladen beim Scrollen, siehe Infinite Scrolling
        • scroll-offset: Abstand in Pixeln vor dem Ende von <ws-search-result>, ab dem das Nachladen startet. Default: 300
    • page-size-all: Optional. Maximale Anzahl der Treffer, die über die Option „Alle anzeigen“ geladen werden. Default: 10000
    • page-size-all-label: Optional. Beschriftung der Option „Alle anzeigen“. Default: All

​
Alle Treffer anzeigen

Neben festen Trefferanzahlen kann die Auswahl eine Option enthalten, mit der sich alle Treffer auf einer Seite anzeigen lassen. Dafür wird im Attribut options der Wert 0 ergänzt. Die Komponente stellt diesen Wert jedoch nicht als Zahl, sondern als Option „Alle anzeigen“ dar.
In diesem Beispiel enthält die Dropdown-Liste die Optionen 12, 24 und 48 sowie die Option “Alle”. Wählt der Kunde die Option “Alle”, werden bis zu 500 Treffer pro Seite geladen. Die Option wird durch zwei Attribute gesteuert:
  • page-size-all legt fest, wie viele Treffer bei „Alle anzeigen“ höchstens geladen werden. Ohne Angabe gilt der Wert 10000.
  • page-size-all-label legt die Beschriftung der Option fest. Ohne Angabe lautet sie All. Für deutschsprachige Shops sollte dieses Attribut daher gesetzt werden.
Die Anzahl der Treffer ist technisch auf 10.000 begrenzt. Dieses Limit wird von Elasticsearch vorgegeben. Auch ein höherer Wert in page-size-all lädt deshalb höchstens 10.000 Treffer.
Bei einem großen Sortiment kann das Laden einer großen Anzahl von Treffern die Ladezeit der Seite spürbar erhöhen. Ein niedrigerer Wert in page-size-all , wie beispielsweise 500 , sorgt dafür, dass die Seite reaktionsschnell bleibt.

​
Infinite Scrolling

Mit dem Modus infinite lädt die Komponente neue Treffer, ohne dass der Kunde klicken muss. Dafür arbeitet der <ws-page-size-selector> als sogenannter Sentinel. Das ist ein unsichtbares Element mit einer Höhe von einem Pixel. Sobald es beim Scrollen in den sichtbaren Bereich gelangt, lädt die Komponente die nächsten Treffer und hängt sie an die Ergebnisliste an. Damit das funktioniert, muss die Komponente direkt unter <ws-search-result> stehen. Nur dann liegt der Sentinel am Ende der Ergebnisliste und löst das Nachladen im richtigen Moment aus.
Wie viele Treffer bei jedem Nachladen hinzukommen, legt die page-size von <ws-search> fest, genau wie im Modus button. Das Nachladen startet, sobald der Kunde 300 Pixel vor dem Ende der Ergebnisliste angelangt ist. So stehen die nächsten Treffer in der Regel bereits bereit, bevor der Kunde das Ende erreicht hat. Mit einem größeren scroll-offset startet das Nachladen früher.
Wenn sich zwischen den Tags <ws-search-result> und <ws-page-size-selector> weiterer Inhalt, beispielsweise ein Banner oder ein Footer-Block, befindet, wird der Sentinel erst dann sichtbar, wenn der Kunde diesen Inhalt erreicht hat. Das Nachladen startet dann zu spät oder gar nicht.

​
Generierter Quellcode

Die Komponente erzeugt den folgenden Quellcode: Select-Mode
Button-Mode

​
CSS & Styling

Diese Komponente generiert keine spezifischen CSS-Klassen. Das Styling kann jedoch durch zusätzliche CSS-Anweisungen im Shop-Template angepasst werden. Innerhalb der Komponente können keine weiteren HTML-Elemente eingefügt werden.