Webflow CMS Filtering with No Code

hey Rory mcnicholas here web designer and co-founder uh propeller digital and in this video I'm going to show you how to create a filter system for the CMS inside of webflow so the end goal being you have a collection list with a series of CMS items or posts as I do here and we want to be able to do various sort of filtering options on this list so things like check boxes to filter down by the attributes of the content inside of these items search field to pull information pull certain posts based on what you type into the search field this isn't something you can do natively out of the box with webflow and your Solutions are one to code this system up yourself using something like JavaScript or two to use one of the no code or low code solutions that some people have set up for webflow and in this case what we're going to do is head over to finsuite.com forward slash attributes Finn suite are an excellent webflow agency and they have created a very comprehensive list of functions or added functionality for webflow things that allow you to add new functions overcome the limitations of webflow and one of these is CMS filter and this does exactly what it says in the tin create Advanced and complex no code filter systems for webflow CMS collection list content which is exactly what this is so over in webflow I've set up a very simple website here it's just one page with a collection list so we can see the collection list in here there's an image a category a title and some description text and this is all just being pulled from a blog post CMS collection there's a couple of posts in here dummy posts with some content in it and what we're going to do is create a filter for this so start by going over to my page here and the documentation is is pretty good here so we're just going to step through this um step one with all of these attributes is to copy in a JavaScript script that is going to give you all of the code that's needed to make this work so this is why this is a no code solution they're providing you with all of the JavaScript code and functionality needed to provide this you just then need to set up the collection list set up the filter link the two together and where we go so we're going to copy the script and it'll tell us where on the page to paste this into the head of your page so back over to webflow into the settings for this page whatever page you want to add this to and I will shrink myself down here and down to custom code and just simply paste this into the head tag done and dusted click save so there's the minimum setup that you need to do to get this working and then our there are additional options and Fields and features and functionality that you can link in so we'll start with the required for minimum setup so the first is our list so we want to filter the content of this particular list or collection wrapper so the reason this is called attributes is in any given element inside of webflow we want the collection list or the collection list wrapper I'm going to go for the wrapper over in our element settings here we have a section called custom attributes and this just allows you to set two things a name and a value and this is how you link in all of these attribute systems into webflow so we're just going to copy what it says here uh fscm s filter element and list and this identifies to that script that we copied in that this is the list that we want to filter so that's step one done nice and easy close that next is the filter so I want this form or form block to have the filter UI elements so this is going to be set up similar to a form like a contact form in webflow so what I'm going to do is I'm going to create a new div and I'm going to pop it in here and I'm going to call this filter form wrapper I'm going to put a little bit of spacing on the bottom there then command and E on my Mac Ctrl e on Windows brings up this handy little uh search inside a webflow and we will type in form and we're going to drag that form Block in there like so so next is putting the attributes on this so again this part is the same the value is filter we'll copy that we're in our form block we go into element settings add in a new custom attribute of the name and the value which I'll just double check was form nope filters and add that in like so and then the final step is setting up our field identifiers so what this means is we're going to set up the filter UI this is where you actually select your various options that's what I have set up here these can be checkbox labels radio labels select fields or text input fields and we then need to link those to specific content inside of the CMS list so for example when we use the search we have to set which of these fields are relevant to the search do we want the search to only work by searching the content in the title Pardon Me Do we want to work for the text as well that's what we're going to set up next so we'll have a quick think about what we want to set up here um I think I'm going to keep this nice and simple I'm going to one set up a search form that searches through all that information and two I'm going to set up a select field or check box I'm going to go with check boxes for this one for the category so we have three categories for these blog posts web development web design and sales so for this text field I'm just going to rename this to search I'm going to remove this other one for now and I'm also going to delete the submit button the way the submit button works is if you keep that there you need to click it to get the filter to work if you delete it it'll work automatically in real time I can type into this text field without needing to click the submit button so we'll go through the instructions here for the filter UI we have to again copy the same name that we've been using FS CMS filter field and then the value is just an identifier that links the filter UI with the dynamic text in the CMS item so let's see exactly what that means and how that works so we'll copy that again and we will go into custom attributes and paste that in and we will call this search um you know actually the search is done a little differently so we're gonna leave that we're gonna do the check boxes first so I'm going to put another div in here it needs to go inside the form so I'm going to use the navigator to get that right so my form is here and I want to pop that there and I'm going to call this filter check box wrapper and then control and E select checkbox uh no it doesn't want to let me place that inside there Ah that's because I have put this in the wrong place my filter checkbox field needs to go inside that form element and then we can put the checkbox field inside of it so we're going to make three of these one two three we have this wrapper so that we can get some more control over the display of these we're going to change it to flex horizontal to get them in a horizontal line and we are going to Pat out the space a little bit and then these label values need to match exactly the text in here so we're going to call this web development web design and sales and for the sake of good UI we're going to duplicate this label and we're going to pop it in both there I'm just going to Pat that out a little bit add some margin to space it out and we'll call this we'll just say filter by category now I'll go back over to the instructions for this so what we need to do is we need to add this to each checks box label in the filter UI that should filter by whatever we're looking to filter for so the way that works is we need to add these to the labels so we go into each of these labels and we pop that in and we're going to call this category so what we're doing here is we're adding the same attributes to each of these making sure that we're typing the value the exact same each time category and then we go back to the instructions we need to add the exact same thing to the dynamic text inside the CMS so we go into the text blocks that we want and we are adding another custom attribute the exact same as we did for those so what that basically says is that we want to match the text inside each of these because they all have the same attribute to the matching attribute inside the list so these are the same but it's distinguishing between them because remember we put an attribute on our form block here so that we know that this is the filters the system knows that this is the filters and we also put an attribute on our collections list wrapper to say that this is the list and what is going to happen is the text inside these is going to be matched to the text inside here and it's only going to show the matching text so let's test this out by publishing this this won't work if you preview it you have to publish this to a custom domain or your webflow.io domain to see this in practice to get it to work so we will wait for that to publish and now that that's done we'll go over to our webflow.io and we see our filter here and that's it we click web development it filters it down to web development we click web design photos are down to web design we click sales same with sales and that's pretty much it you can see the flexibility this gives you any content that you have inside here you can filter by you can also hide these if you want so as an example for this particular website it doesn't show the event type in here that they just didn't want it for some reason but it's in here and it's hidden so that we still have the ability to filter by that so it doesn't necessarily need to be visible content but you can set this up with select Fields select drop downs you can set this up with radio Fields um you can do ranges you can enter date ranges you can enter price ranges all of that is available in the more attributes to you section down here we're just going to try two more we're going to one set up the search fields and we are two going to set up an empty state for if you type something into the search field and nothing comes up so the way the search Field Works is we give it a list of values that we have in the CMS list that we want to filter by so again we're going to copy this and this is a comma separated list so we'll go in here so as an example let's say we wanted to search by just the title as an example or just to show two we'll say that the title and the category so let's go in here and see what we were saying we were saying category and we also need to set one of these up on the title until we add an attribute to the content it's not going to be picked up by the search filter so we're going to call this title and then we'll go over to the search and let's see do we have this set up correctly CMS filter field and then we add in a list so we will say uh category and title and we will publish that and wait for that to finish publishing I'm a DOT finish publishing we'll go over to the live site and give this a whirl so let's go for history and there you haven't we have a search bar that will filter through the content automatically in real time um very handy so if you wanted to you know search from this text as well that's a simple matter of going in adding the attribute calling this summary and then back in here and adding in summary alternatively if you just want to get all the fields that you've set this up on you can just enter in a star and do the exact same thing so the final thing we're going to do here is we're going to have something come up if there are no results not great to just have a blank box so we'll go down here to empty stage I want this div block to be the empty state of the list so again FS CMS filter element and empty so we'll copy that and we will just stick a div down at the bottom here the beauty of this being once we add our attribute to here was that empty yes we can put whatever we like inside this div we can do text we can do images I'm going to keep it nice and simple I'm just going to throw a paragraph in here I'm not even going to bother giving it a class rush job I'll put that up and we'll say easy peasy and once again just double check we have that right not the div paragraph empty okay so once again we'll publish that and wait for that to publish and now that it's published over to the live site give it a refresh get the latest changes and type in something that we don't have sorry there were no results for your search try again so that's pretty much it as you can see it's called No code because we're not doing any coding here we're adding in one line of code and then just setting up these attributes and that's how all of these systems on fin Suite attributes work makes it very easy to set up we can do lots of other things here like we can have an option to reset all filters we can show the number of results we can do a whole bunch of stuff in here we can do a date range we can filter by a generic range a whole bunch of stuff in here and you can just read through these and give you the instructions on how to do it and off you go so that's all for how to set up a CMS filter inside a webflow

Channel: Ruairi McNicholas

Views: 16,875

Keywords:

Id: qq4uM0-R5BA

Length: 15min 31sec (931 seconds)

Published: Sat Oct 15 2022