Jul 2
Simple Gutenberg product filters block sidebar layout improvements
I would like to suggest a few simple improvements to your Gutenberg Product Filters block (desktop view) when placed in a sidebar, potentially bypassing the need for legacy filter widgets. If any of these options exist and I have missed them, please ignore!
At the moment it is possible to add the product filters/attributes block to the sidebar via Gutenberg but this only appears to output the same dropdown styles used in the horizontal filter. Also, if these filters are placed in a stacked sidebar formation, each dropdown covers the filter heading/s below when clicked or hovered, which is not ideal.
It would be good to add the following options to your current Product Filters block...
In the Filter Attribute > Layout option, add:
- 'List - With Tick Boxes'
- 'List - Without Tick Boxes'
These options should be contained in a simple, toggleable dropdown box.
The 'Without Tick Boxes' option could highlight the chosen filter and show the color, image or text swatches while residing in the toggleable box.
In the Any Attribute > Layout option, add:
Toggle options for the INDIVIDUAL filter including:
- Show as open
- Show as closed
- None
This would improve upon the current 'Shop Sidebar Widget Collapse' options.
Further ideas include:
- Prevent dropdowns closing upon filtering (if opened from a closed state)
- Edit toggle icon
- Tooltip on title label
- Max height of block (similar to current Woodmart Height for Filters Widget option)
The price slider filter should also have the option to filter automatically.
Some of these options could be incorporated into the horizontal header filter settings too.
Pending