CMS filtering on a collection list in Webflow with an 'All' button

welcome back to another video today we're going to look at CMS filtering and more specifically how to style the filter so you have a filter like this that when you load the page it has the all selected and you can change the filters like a radio button and these themes in this case are generated from the CMS but you still have the all button that will go back and have this styled active State I'll share a clonable of course in the description and in this video I'm just going to do the technical setup if you want to see another video where I talk about the styling let me know in the comments and um maybe I'll make a video about that but in webflow I've set up my project and I have a collection list here that shows these game levels and they they are from one collection and they each have a theme that is a reference to another collection the FES collection so if you go just in here we can see we have game levels and we have a themes collection and they each have a color so they look super nice so that's the setup we have right now and nothing is made interactive with any filtering yet this one we are using CMS filter from our friend over at fin Suite the first step we have to do is to copy the snippet and paste it on the page okay that was step one and then we can get into the the guidelines here for the required setup the first attribute we have to add is the list so we have to add it to the collection list we select the list we go to settings and we add the attribute and call it list okay that was that one next one filers so now we need a form block and that should contain all of the filter buttons that we have on our website and we also want to give it this attribute we copy this one we go back into the project so now I want to add a form block we search for f block and add it here and we can delete all of the things inside because we don't need it we just need our filers since I want the filers to be CMS driven the first thing I want to add is a collection list this one I want to take the information from the FES collection so we have these and I want to use a radio button filter so I'm also going to add a radio button inside of this so now we have a bunch of radio buttons and we can select the label here and um give it the name of each uh category or each theme but we were adding the attribute on the form block so let's select the form block and go over here and add the attribute this one is supposed to be called filters yeah so now we have the filters added the last required attribute for the setup is the field identifier and this one we add to the radio label and uh we also add it to a text block inside of the CMS item and these are the ones that will kind of compare and match to do the actual filtering so the attribute is CMS filter field and then the value is the identifier so for this in case I'm going to call it themes so we add it to the radio button label in here we call it themes so that was on the filer uh element and then we want to match it up with the place where we have the name of the theme on the Ms item it's here we put the same one so now we actually have the basic setup and we have some filter functionality going let's just do a quick preview to see how it is okay we can click on these and they work like radio buttons and they filter our list but we still can't go back to the all or reset the filter because these are radio buttons and we don't have the all button yet so that's what we're going to add now we have these that generated from the collection but the all button I don't want to be generated from The Collection so I put it outside here and add a radio button for that just going to move it to the top and we call it all this one the radio button label I want to give the same attribute as the other ones so the CMS filter field and themes so it's part of the same uh filter group it's just a neat little trick of how I do do this so I duplicate the um the name here of the of the theme I unlink it the text inside I put all so it has the the themes attribute and it has the text all inside and this one we can hide so this is a little trick to um make sure that all of the cards uh in the collection list match the text all so we can use that for filtering let's do a quick test preview where we can see how it works now okay so we have the all button added and if we click water the fire they still work if we click all we see all of the items but we also see something that's not supposed to do like this two radio buttons are selected if I change this so what is happening now is that the all radio button is not in the same radio group so it's kind of just its own button alone and that that's quite important thing we want to change so we click the all radio button and go to settings and we can see this one is in the group name called Radio 2 whereas the other radio buttons are in a group called radio one I'm just going to rename this so they get the same name of the groups I'm going to call it themes just to be consistent okay let's publish and check if that works better okay so we can still filter on fire water Earth and we can go back to all and we see all of the items and only all is selected so now it's working exactly how we want it to but when we load the page I think it would be nice if the all was pre-selected and we're also just going to change the styling a bit so they don't look just like regular radio buttons look more like the filters that we showed in the beginning to uh make the all checked we're going to click the radio dot here and we're going to go and add a custom attribute to that it's just going to be checked yes so that will Define this radio button as being checked by default we can still hide the radio buttons I'm just going to put the class called hide and I also defined a styling for these which I'm just going to add now now I applied the class so my radio buttons look more like filters how I wanted them to when we're using fin sues filtering the active state is defined by a combo class on this radio group The Standard name for this is fs- CMS filter active and now here I just added some styling to make it look uh nicer so this is how it will look now when it's active and I'm just going to add a bit of extra secret styling that I did here for this project yes so now we get the dynamic colors as well and again you can check this out in the clonable or let me know in the comments if you want to know bit more about how we we did that now let's publish and see how it looks when we look at the page now we can see that the all button is uh selected when you load the page and we have the nice styling with the custom colors as well on the filters and it is Works beautifully so that's it for today as I said if you want to know more about anything I mentioned in this video let me know in the comments and um otherwise just thanks for watching and have a nice day

Channel: thelazygod

Views: 1,842

Keywords: Webflow, cms, cms filter, finsweet, filtering

Id: cMIIqZJjuOk

Length: 7min 58sec (478 seconds)

Published: Sat Mar 23 2024