Voraussetzungen

• Die <ws-communication>-Komponente muss eingebunden sein, um die Kommunikation mit der Such-API sicherzustellen.

• Das JavaScript-Bundle wsSearchComponent.js muss integriert sein.

Komponente

Die Komponente kann wie folgt auf der Kategorie und Suchergebnisseite eingebunden werden:

<div data-template="{{result.from}} - {{result.to}} von {{result.total}} Produkten">
    {{result.from}} - {{result.to}} von {{result.total}} Produkten
</div>

• {{result.from}}: Gibt die Zahl des ersten angezeigten Produkts auf der aktuellen Seite an. Diese Zahl hängt von der Anzahl der Produkte pro Seite und der aktuellen Seite ab (z. B. 1 auf Seite 1 oder 17 auf Seite 2, wenn 16 Treffer pro Seite eingestellt sind).

• {{result.to}}: Gibt die Zahl des letzten angezeigten Produkts auf der aktuellen Seite an. Diese Zahl ist abhängig von der eingestellten Anzahl der Treffer pro Seite (z. B. 16 oder 32).

• {{result.total}}: Zeigt die Gesamtanzahl der Produkte.

Hinweis: Beim Wechsel von einer Seite zur nächsten oder beim Anwenden von Filtern wird diese Anzeige automatisch aktualisiert.

Die Komponente erzeugt den folgenden Quellcode, z.B. für die erste Seite:

<div data-template="{{result.from}} - {{result.to}} von {{result.total}} Produkten">
  1 - 16 von 275 Produkten
</div>

Der Quellcode erzeugt kein CSS automatisch. Die Ausgabe kann durch zusätzlichen HTML-Code und eigene CSS-Anweisungen angepasst werden.