Adding a quick filters on the category page for a 'colors' property

user_14184263 0
Viewed 71

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: enter image description here

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.js
  • vendor/shopware/storefront/Resources/app/storefront/src/plugin/listing/listing.plugin.js

Can this be achieved in another way?

shopware6 shopware filter plugins javascript
1 Answers

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

enter image description here

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'));
  }
...

enter image description here

user_49887790
Related