By default the sections within the facets menu are expanded when the page loads. Depending on the amount of filters/options, as well as the intention of the UI, it may be desired to have the menu load in an alternative state.
This guide presents two options:
- Default as collapsed (default and/or mobile view)
- Toggle visibility on button click (mobile optimized)
By default the facets within the menu are expanded when the page loads. Depending on the amount of facets as well as the intention of the UI, it may be desired to have each load in a collapsed state.
The following example reverses the default state so that the filters appear as collapsed.
A built in conditional check for isMobileDevice() identifies mobile user-agents.
The responsive nature of the Klevu Template re-positions the facet menu at the top of the product grid as the screen viewport is reduced to a mobile aspect ratio.
Depending on the amount of displayable facets and/or other components of the UI, it is possible the the facet menu would extend beyond the initial page view on a mobile device, even if collapsed. In this scenario, hiding the facets from initial view and then revealing them on a button trigger can be a useful modification.
The following example suppresses the facet menu on a mobile aspect ratio. A button is placed at the top of the product grid with a small icon and text. Triggering the button will toggle the facet menu visibility.