> ## Documentation Index > Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt > Use this file to discover all available pages before exploring further. # UI-Komponenten > Übersicht der UI-Komponenten von WEBSALE | search: Suchfeld, Filter, Sortierung und Paginierung als wiederverwendbare WebComponents in der Storefront. 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 * Es muss das JavaScript-Bundle `ws-search-component-.js` integriert sein, z.B. über die [WEBSALE JavaScript-Bibliothek](https://doku.websale.net/index.html?mats_wsjsbibliothek.html). * Die aktuell zu verwendende Versionsnummer ist der Dokumentation [JavaScript-Bundles](/ws-search/integration-in-die-templates-storefront/javascript-bundles) zu entnehmen. ## Überblick der UI-Komponenten * [ws-communication](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-communication) — Komponente wurde von `ws-communication` auf `ws-search` umbenannt. * [ws-search](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-paging) — Die Komponente wurde von `ws-paging` auf `ws-pagination` umbenannt. * [ws-pagination](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-paging-size-selector) — Die Komponente wurde von `ws-paging-size-selector` auf `ws-page-size-selector` umbenannt. * [ws-search-box](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-sortbox) — Die Komponente wurde von `ws-sortbox` auf `ws-sort-box` umbenannt. * [ws-sort-box](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/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](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-searchbox) — Die Komponente wurde von `ws-searchbox` auf `ws-search-box` umbenannt.