Skip to main content
<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.

​
Requirement

  • The component must be present when <ws-filter> is used.
  • ws-filters contains all filters (ws-filter).
  • ws-filters may only appear once per page/view.

​
Component

<ws-filters> is the central container component in which all ws-filter instances are embedded.

​
Hide filter options (hide-universal-options)

The hide-universal-options feature hides filter options that apply to all products in the current result set. Such options effectively have no filter effect, since they don’t restrict the result. Hiding them improves clarity in the filter list. How it works A filter option is hidden when its hit count equals the total number of products in the result set. Example: In the “Pet food” category there are 100 products. All 100 products are suitable for dogs. When the “Animal type” filter is selected, the “Dog” option is hidden because it has no filter effect – all products already apply. The feature is disabled by default and must first be activated as follows:

​
Visibility of filters (hiding)

From ws-search-component-1.9.1.js, the visibility attribute provides a native replacement for this workaround. The approach described here is still usable.
Whether a filter is visible is not controlled via <ws-filters> itself but through HTML elements inside <ws-filters> that carry the filter-container attribute. HTML elements inside ws-filters that carry the filter-container attribute control whether filters are hidden when they
  • return no values and/or
  • do not apply to the current search result or category.

​
Note on the correct HTML structure

For hiding to work per filter, each ws-filter must be inside its own wrapper with filter-container. If filter-container is placed only once around all filters, the entire filter group can disappear as soon as a single filter returns no values or does not apply. ❌ Wrong (one wrapper for all filters):
✅ Correct (wrapper per filter):

​
HTML & CSS

<ws-filters> does not provide its own styles for the layout. The structure (wrapper/container) and styling are implemented in the template. Additional HTML code (e.g. headings, dropdown structure) can be added inside <ws-filters>.

​
Filter component ws-filter

For the integration and configuration of the individual filters (e.g. filter types, attributes, and template integration), please read the documentation on the ws-filter WebComponent.