0
201
ViewsAdding a quick filters on the category page for a 'colors' property
I have tried to create quick filters using the same methods as Shopware uses for their filter panel, but I've run into some problems. I want to have the 'colors' property filter both in the sidebar and in a slider above the product listing block. This is the design I've got in mind for the slider:
I am able to get this working by adding another filter panel and filtering unused properties out, but everything breaks when trying to select one of the colors. You can try this out yourself by adding two filter blocks to a category page. I don't think having multiple filter panels is supported the way filters are setup at the moment. I have tried adding support for this but there is a lot of code to edit to make that work. Check these files together with it's parent classes to see how most of the filtering proces works:
vendor/shopware/storefront/Resources/app/storefront/src/plugin/listing/filter-property-select.plugin.jsvendor/shopware/storefront/Resources/app/storefront/src/plugin/listing/listing.plugin.js
Can this be achieved in another way?
1 answers
Answer question0
I have implemented the similar but not color, I added new filter on top of listing that link to existing in sidebar filter https://bike-resale.de/E-Bikes
I created js plugin to listen on input changed, then find the sidebar filter by ID and dispatch change event on it that will trigger filter on listing. You can try this way.
...
_updateFilterValue(value) {
this._filterInput.value = value;
this._filterInput.dispatchEvent(new Event('change'));
}
...
