Skip to main content
This overview lists all available UI components of the WEBSALE WebComponents that can be used for searching, filtering, and displaying products in the storefront. These components provide prebuilt features that can be easily integrated into existing HTML templates. They allow you to customize interactions and presentations such as search fields, filter options, pagination, or sorting. Using these components significantly simplifies the integration of complex features, because they automatically generate and update HTML and CSS elements.

​
Requirement for all UI components

​
Overview of the UI components

  • ws-communication — The component was renamed from ws-communication to ws-search.
  • ws-search — The ws-search component establishes the connection between the frontend (search input field, filter) and the search backend. It is required to run search queries and retrieve the data for filters and search results.
  • ws-filter — The ws-filter WebComponent enables filtering of the search results or categories based on various product properties. It supports different filter types such as checkboxes, value ranges (range), and sliders.
  • ws-filters — ws-filters is the central control component for the filter presentation in the storefront. All ws-filter instances that are available for the search result or category are integrated in this component.
  • ws-filter-chip — The ws-filter-chip component displays the currently applied filters in the frontend. It is updated automatically as soon as filters are added or removed. Clicking one of the displayed filters removes it again.
  • ws-filter-reset — The ws-filter-reset component lets users remove all active filters with a single click on a “Reset filter” button. All applied filters are then removed both from the display and from the filter criteria of the search.
  • ws-page-size-selector — The ws-page-size-selector component lets you choose the number of hits displayed per page. It can be used on the search result page as well as on category pages. By default the presentation is a dropdown list.
  • ws-paging — The component was renamed from ws-paging to ws-pagination.
  • ws-pagination — The ws-pagination component provides a paging feature that lets users navigate between different pages of the search results or category.
  • ws-paging-size-selector — The component was renamed from ws-paging-size-selector to ws-page-size-selector.
  • ws-search-box — The ws-search-box component provides the search input field in the frontend. It allows you to integrate a search field with an optional suggest feature. The component can be extended with additional HTML elements such as an input field and a search button.
  • ws-search-button — The ws-search-button component provides an optional button through which the user can manually submit the search entry. It is used together with the ws-search-box component.
  • ws-search-info — The ws-search-info component displays information about the search result (number of hits, search term, displayed range) via freely definable templates and updates automatically.
  • ws-search-result — The ws-search-result component displays the results of a search or filtering in the storefront. A separate instance is used per source index (product, category, content).
  • ws-search-result-tabs — The ws-search-result-tabs component creates a tab navigation for search results from various sources. The tabs are generated automatically from the embedded ws-search-result instances.
  • ws-sortbox — The component was renamed from ws-sortbox to ws-sort-box.
  • ws-sort-box — The ws-sort-box WebComponent lets users interactively adjust the sorting of the search results or categories. The available sort options (e.g. relevance, price, rating) are based on the fields and options configured in the search module.
  • ws-suggest — The ws-suggest component shows search suggestions inside the search box. Via ws-suggest-result child elements, several suggestion types (search terms, products, categories, content) can be displayed as groups.
  • ws-suggest-result — The ws-suggest-result component configures within ws-suggest the presentation of a single suggestion type (search terms, products, categories, content, or “Show all results”).
  • ws-searchbox — The component was renamed from ws-searchbox to ws-search-box.