Zum Hauptinhalt springen
Die Komponente <ws-page-size-selector> ermöglicht die Auswahl der Anzahl der Treffer, die pro Seite angezeigt werden sollen. Sie kann sowohl für die Suchergebnisseite als auch für Kategorieseiten verwendet werden. Die Darstellung erfolgt standardmäßig über eine Dropdown-Liste.

​
Komponente

Die Komponente kann wie folgt auf der Kategorie- und Suchergebnisseite eingebunden werden: Select-Mode 
<ws-page-size-selector
  mode="select"
  options='[16, 32, 48]'
  class="bsp class xyz"
  select-class="form-select">
</ws-page-size-selector>
Button-Mode 
<ws-page-size-selector
  id="sizeBtn"
  mode="button"
  class="bsp class xyz"
  btn-class="button xyz"
  options='[16, 32, 48]'>
</ws-page-size-selector>
  • Attribute:
    • options: Liste der verfügbaren Optionen für die Trefferanzahl pro Seite. (z. B. [16, 32, 48, 64, 80])
    • 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
Die Komponente erzeugt den folgenden Quellcode: Select-Mode 
<ws-page-size-selector type="dropdown" default="16" options="[16, 32, 48, 64, 80]" style="display: block;">
    <select>
        <option value="16" selected="">16</option>
        <option value="32">32</option>
        <option value="48">48</option>
        <option value="64">64</option>
        <option value="80">80</option>
    </select>
</ws-page-size-selector>
Button-Mode 
<ws-page-size-selector mode="button" btn-class="btn-example-class" label="Weitere Artikel laden">
  <button type="button" class="btn-example-class">
    Weitere Artikel laden
  </button>
</ws-page-size-selector>

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