Change CMS filters using buttons, dropdowns, etc

Design help CMS
1

Hi everyone, I have a problem that has been discussed before but no clear answer was ever given, so I’m asking for help and also (depending on how this goes) hope it helps future webflowers.

What I am trying to do is set up a page that has a series of buttons across the top. Each button has a different filtering option (all, day, time, name, etc.). When each is clicked, the collection list only shows items that are relevant to that filter type. READ THE REST BEFORE YOU SAY JUST USE ISOTOPE.

First, I know about Isotope and mix-it up and all that stuff. I searched for hours and read many articles and tried many things before posting this. What I want to understand is how to do this NATIVELY inside webflow. I am not against custom code or plugins, but this really seems like it would be an obvious option in the link settings. (to change to a specific collection list filter or sort).

Second, I know this can be done with tabs, but you can only have 20 collection lists on a page (no matter what) and that is ridiculous and prevents me from offering detailed sort options (and a search bar is too vague). I want to give people very specific search options (there is a reason for this that I won’t go into, but its important that I figure this out, and no its not a client project). I’ve had success linking a dropdown to multiple pages but once you hit 100 pages you’re screwed. AND it can’t be done by using the collection pages themselves because they cannot be uniquely designed. You also can’t link the collection items in a dropdown for the same reason (one linkblock to rule them all).

Keeping a bunch of links on a single page with one collection list (for filtering purposes) would save a crapton of time and resources as the methods we can employ now can breach the hard limits of CMS fairly quickly (and I hope this is not by design).

So if this is possible using a combination of links, filters, and switches, or some method I don’t know about or haven’t learned, then I’m all ears, but I’m pretty sure I’ve explained my case fairly clearly. If it is not possible, that’s insane. I did not come to webflow to be stonewaled by yet another insufficient page builder. Webflow is incredible and I’m loving it, so forgive my perhaps harsh tone. I’m just sick of looking for an answer and coming up empty. Having control over how collection items are displayed using link elements NATIVELY without resorting to workarounds that cause headaches and reworks later just makes sense on a platform like this.

Thanks for taking the time to read, comprehend, and respond to this plea. And no, there is no project example here because I have no example working yet, and if I did, I wouldn’t need to post this!

2

Hey Timothy - I’ve gone through the same process as you. I’ve done the Mixitup solution, the Isotope JS and the Finsweet version. I’m most interested in the Finsweet solution right now but all of these require some sort of code injection. The reason for this is because we are asking these CMS Collections ( placed on a simple HTML page ) to perform boolean functions with filter buttons. Multiple buttons combined to create a single filter is a mathematical array and require some sort of javascript to perform.

That being said - I have been able to simulate a filtering tool with only webflow native Tabs. (Interviews - Ruth Ann Overbeck Capitol Hill History Project) The problem with this solution is that it requires the user to navigate to a different page. Not very smooth or clean.

Complex filtering is not trivial programming, requires a good understanding of boolean functions and create database challenges. I would not blame Webflow for not making this native yet.

And I bet that some of the solutions above will be even easier to implement in the future. I’ve been using this tool since 2014 and it’s still the best in the market place!

3

Thanks for the reply Mark. I also ended up making each filter open a page,. which does work, but as you said, it isn’t very smooth and it also doesn’t scale well since the page limit is 100. However, I did some digging around and discovered the Finsweet solution you mentioned. If you need a hand with that let me know.

As it turns out, I reduced their injection to only 15 lines of page code (for a basic filter system) and copied their supporting .js file (its 2,991 lines of code…) to my own storage so it won’t break if they changed something (originally you had to call it from their server, well we aren’t having any unnecessary dependencies today!)

The sort not only works, but it works well and the site can handle any CMS now with no extra pages. I haven’t experimented with pagination (im afraid to) but it seems like it would work. There’s just a known issue with items you already have filtered do not update if you add try to concatenate multiple CMSs, but that seems too obscurely specific to worry about. Also, and this one almost floored me: you cannot test it natively, you HAVE to publish it to test it. I KNEW I did everything right and the tutorials never mention it, but in the video I noticed that the guy never tested it in the designer, but he demonstrated it on the test url. Once I realized this, it worked as expected. Imagine that?

At any rate, I’ll be using this solution for now because it works and I understand it, but I do remember watching a video in the webflow university recently where mcguire is explaining the form select element (formerly Option) and just mentions how to filter with it in passing like its no big deal. OK HOW?! I let it go because I found the video (Option field - Webflow CMS tutorial - YouTube) after getting my filters to work, but i’m still convinced there’s a method using native features of the CMS and elements in there somewhere, but until then what we have is what we have, and what we have is truly incredible.