I am just finalising a site for a client, where they have a large database of products to filter
They want to filter the products by ‘Brand’ - pretty standard and straight forward
Secondly they wanted the option to filter by the ‘Type’ of product.
This was easy enough as I used a CMS Select to populate the dropdown from the CMS list of ‘Types’
But they also want the option to filter by ‘Model’ - where the CMS Select list that appears, has been filtered - depending on the ‘Brand’ that is chosen in the previous dropdown
I can successfully have two CMS Select lists working, that is not an issue - but I cannot seem to be able to get the list of 'Model’s in the Dropdown, to be filtered, by the ‘Brand’ selected previously…
I have played with this for an afternoon and I could not get it to work successfully… Is this possible to do?
I can happily provide a link to my Read-Only link to whoever may be able to help
Kind Regards
Monty
EDIT
I followed your project @memetican which works great for the checkbox option…
However I have not been successful with making this work for CMS Select filters - which the customer insists on for the layout they want.
With Checkboxes, replicating the example all worked fine - but when trying to apply the setup, where the choice of the Brand (from a Radio Button) it just is not filtering the CMS Collection List for Models.
I have reverted back to what it was before, to avoid confusing myself with the two Form filters.
Is there no way to achieve progressive filtering within one form?
Thanks for the heads up! I
I have done a bit of researching through this and had a little bit of a play myself testing - I will do a bit more tomorrow.
So to confirm… to achieve this, you need to have two Form fields.
You CANNOT do this all in one? (Just checking to see how much of my current setup I would need to redesign to accomodate)
The first Form (labelled as filters-2) , is your Progressive filter
Then the second Form - has the lists filtered accordingly, depending on what is picked .
Now any other filters selected here - will affect the main collection items you want to show.
So my example will have Filter 1, as the Car ‘Brand’ in a Select Dropdown
Filter 2, will have Car ‘Model’ in a second Select Dropdown
Selecting the respective ‘Brand’ will filter to ONLY show results relevant models of that brand, when the ‘Model’ Dropdown is opened
BUT my small issue is… my client would like it so when I select the ‘Brand’, it ALSO filters the product items below - without needing to Filter BOTH the ‘Brand’ and ‘Model’ (as it does on the example you sent)
Is there a way, so that the main collection items - can be filtered by BOTH lists?
I assume it is just labelling the respective Attributes correctly, albeit in the bit of time I had chance to spend on it before the end of today - I might be overthinking it…
I also didn’t realise you can separate the CMS results outside of the Form Block for this to work (The more you know!)
When I have multiple cascading filters like country, region, city, I’ll usually build it roughly like this;
Finsweet Filter setup, using all 3 dropdowns as filters.
The data items being filtered have all three for filtering, these can be hidden if you like.
Separate JS code is written to handle the pre-filters
Change to dropdown 1 populates dropdown 2 and selects the first item
Change to dropdown 2 populates dropdown 3, selects the first item and triggers filter
Setup properly, this will cascade, so that any change updates the detail lists, and re-triggers the filter.
One of the primary reasons I use this design is that it allows me to setup both general and specific filtering, e.g. you could click only “Germany” and see all results, where as if you also select “Berlin” it would be further filtered.
It can be a pain to build these right so if you get stuck and need some pro help, drop me a message and I can send you my details.
