Zum Hauptinhalt springen
In dieser Übersicht finden Sie alle verfügbaren UI-Komponenten der WEBSALE WebComponents, die für die Suche, Filterung und Anzeige von Produkten in der Storefront verwendet werden können. Diese Komponenten bieten vorgefertigte Funktionen, die sich einfach in die bestehenden HTML-Templates integrieren lassen. Sie ermöglichen die Anpassung von Interaktionen und Darstellungen wie Suchfelder, Filteroptionen, Paginierung oder Sortierungen. Durch die Verwendung dieser Komponenten wird die Integration komplexer Funktionen erheblich vereinfacht, da sie automatisch HTML- und CSS-Elemente generieren und aktualisieren.

​
Voraussetzung für alle UI-Komponenten

​
Überblick der UI-Komponenten

  • ws-communication — Komponente wurde von ws-communication auf ws-search umbenannt.
  • ws-search — Die Komponente ws-search stellt die Verbindung zwischen dem Frontend (Sucheingabefeld, Filter) und dem Such-Backend her. Sie ist erforderlich, um die Suchanfragen auszuführen und die Daten für Filter und Suchergebnisse abzurufen.
  • ws-filter — Die WebComponent ws-filter ermöglicht die Filterung der Suchergebnisse oder Kategorien basierend auf verschiedenen Produkteigenschaften. Sie unterstützt verschiedene Filtertypen wie Checkboxen, Wertebereiche (Range) und Schieberegler (Slider).
  • ws-filters — ws-filters ist die zentrale Steuerkomponente für die Filterdarstellung in der Storefront. In dieser Komponente werden alle ws-filter-Instanzen integriert, die für Suchergebnis oder Kategorie zur Auswahl stehen.
  • ws-filter-chip — Die Komponente ws-filter-chip zeigt die aktuell angewendeten Filter im Frontend an. Sie wird automatisch aktualisiert, sobald Filter hinzugefügt oder entfernt werden. Ein Klick auf einen der angezeigten Filter entfernt diesen wieder.
  • ws-filter-reset — Die Komponente ws-filter-reset ermöglicht es Nutzern, alle aktivierten Filter mit einem Klick auf einen “Filter zurücksetzen”-Button zu entfernen. Dadurch werden alle angewendeten Filter sowohl aus der Anzeige als auch aus den Filterkriterien der Suche entfernt.
  • ws-page-size-selector — 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.
  • ws-paging — Die Komponente wurde von ws-paging auf ws-pagination umbenannt.
  • ws-pagination — Die Komponente ws-pagination stellt eine Blätterfunktion bereit, mit der Nutzer zwischen verschiedenen Seiten der Suchergebnisse oder Kategorie navigieren können.
  • ws-paging-size-selector — Die Komponente wurde von ws-paging-size-selector auf ws-page-size-selector umbenannt.
  • ws-search-box — Die Komponente ws-search-box stellt das Sucheingabefeld im Frontend bereit. Sie ermöglicht die Integration eines Suchfeldes mit optionaler Suggestfunktion. Die Komponente kann durch zusätzliche HTML-Elemente wie ein Eingabefeld und einen Suchbutton erweitert werden.
  • ws-search-button — Die Komponente ws-search-button stellt einen optionalen Button bereit, über den der Nutzer die Sucheingabe manuell absenden kann. Sie wird in Kombination mit der ws-search-box-Komponente verwendet.
  • ws-search-result — Die Komponente ws-search-result stellt die Ergebnisse einer Suche oder Filterung in der Storefront dar. Pro Quellindex (product, category, content) wird eine eigene Instanz verwendet.
  • ws-sortbox — Die Komponente wurde von ws-sortbox auf ws-sort-box umbenannt.
  • ws-sort-box — Die WebComponent ws-sort-box ermöglicht es Nutzern, die Sortierung der Suchergebnisse oder Kategorien interaktiv anzupassen. Die verfügbaren Sortieroptionen (z. B. Relevanz, Preis, Bewertung) basieren auf den im Such-Modul konfigurierten Feldern und Optionen.
  • ws-suggest — Die Komponente ws-suggest zeigt Suchvorschläge innerhalb der Suchbox an. Über ws-suggest-result-Kindelemente können mehrere Vorschlagstypen (Suchbegriffe, Produkte, Kategorien, Inhalte) gruppiert dargestellt werden.
  • ws-suggest-result — Die Komponente ws-suggest-result konfiguriert innerhalb von ws-suggest die Darstellung eines einzelnen Vorschlagstyps (Suchbegriffe, Produkte, Kategorien, Inhalte oder “Alle Ergebnisse anzeigen”).
  • ws-searchbox — Die Komponente wurde von ws-searchbox auf ws-search-box umbenannt.