Hi @sabanna, thanks a tonne for the amazing tutorial. Is there a way to add more filtering options like checkboxes and search bar to narrow down a field? This demo is pretty much what I need but creating this entirely in webflow hasn’t really worked out for me so far.
The article to this demo says they used MixitUp plugin, so it may be pretty much doable. I will have to dig deeper and try to implement that in Webflow. It just may take some time.
I tried to follow the steps from that article and implement the same filtering features that they have.
Have to be honest, I didn’t succeed on 100% because they did not tell much details in the article.
Here is result that I got: http://js-filtering-plugins.webflow.io/mixitup-advanced
I still can’t figure out how they did that un-checking the checkbox will “clean” the filters and can’t make “Select option” work.
Will try to come back to that later, when will have more time.
If the radio buttons and search field will be enough for your project, I will go to make more detailed tutorial.
You are a legend Anna, thank you very much. Would it be possible for me to make a clone of http://js-filtering-plugins.webflow.io/mixitup-advanced so I can have a look at how you did it? My site is for a film festival so i’m thinking about a combination of buttons, checkboxes and radio buttons to help viewers narrow down their choices via type, genre and date. I really appreciate you taking time to help me out.
One of the important details for make this plugin work is: filtering items should be display: none initially, then plugin makes them all display: inline-block.
Previously, I set interaction on load, which make all that elements display: none. But, for some reason, it doesn’t work anymore, so you will have to disconnect elements from interaction and simply set class “mix” to display: none (in style panel). Then everything will work again.
Thank you again for these tutorials @sabanna
I tried to redesign my webtools library using mixitup (without the CMS) and the result is here : http://toolscamp.webflow.io/
Best,
This tutorial is awesome and it helps a lot in general, but I have a bit more specific problem…I have a client who needs filtering implemented by a search field for dynamic content. I have found a similar example using isotope (https://codepen.io/desandro/pen/wfaGu) - but it would be just great to have a similar tutorial or, to be honest, to have any help in this.