Complex Filter System | How To - CMS Library for Webflow

hi everybody its Joe Kruk from Vince wheat in this video we're going over the F and sweet CMS library for web flow we're in the live example going through the filter component before we get into this example you must understand how this works the filter component takes text that's inside of a collection item and it filters that item in the grid based on the text so we have our collection list item here this is web flow CMS generated each one of these pieces of text is a way for this item to be filtered in the grid we have 2020 blue fun CMS false branding this one is 2017 red not fun.you CMS true web design these are controlled inside web flow CMS we have the year we have a rich text of branding web design we have color in a drop-down we have the toggle and we have fun updating any of these will update that text inside the item and then change how that item is filtered so updating filters and types and all of that is very easy and very quick and can be managed by you or the client inside editor you do not need to visibly see this text on the page it needs to be on the publish site but it does not need to be visible in all of these examples we're going to keep the filters visible because we want to show that it's actually working but if you wanted to hide these on the publish site you can do that I can hide this right here just show project name and it's still going to filter by all of these filter options it's gonna filter by 2017 red not fun everything is going to work does not need to be visible just needs to be there let's jump into examples and see how this works let's look at the super complex filter system made entirely by F and sweet CMS library and web flow CMS what we are going to do is filter this grid with search with divs with radios checkboxes and selects all of these are going to be working together they're going to be configurable individually and they are going to update this grid in real time this is not difficult to setup if you watched example 1 2 3 or 4 it's the same thing we're just adding a few more items to our array let's watch this working this type of setup and mix it up or isotope would take a long time it would be very JavaScript intensive it would require customizations and you would need to know how to write JavaScript in order to set this up with our library it is just a simple array a simple set of options and it's super super straightforward alright enough talking let's get into this I type in blue it's going to filter by blue I'll add development and we're blue and development let's add motion we're also going to be adding motion to that let's remove blue and search by red and yellow and orange and remove development remove motion let's also search by CMS true reset the radio's 2020 2019 2018 let's go to red web design awesome check that out the whole grid is updating even mediately and I can set this up exactly how I want blue we got the Select we got red check that out we are filtering this grid we have all these options and now we're going to go into designer to see how this is set up we're in designer we're going to look at how to set up this super complex filter system all in web flow this is using the FN sweet CMS library it not using any other scripts and the other plugins any other tools just our library if you haven't seen examples 1 2 3 or 4 I recommend that you check out at least one of those before jumping into this example if you have seen 1 2 3 or 4 these are the same exact steps we're not doing anything special or custom here it's the same few steps let's jump in see how this works first we need to have a class on our collection list element not our collection list wrapper our collection list and here we have the class of collection - lists on there next we need to apply classes to our parent wrappers we are going to apply a unique class to every single group that we want to filter by the text input is a group the services buttons are a group the color buttons are a group the radio CMS shoe false is a group the year checkboxes is a group and this select input is a group now we need to have a class on some parent element any parent element of each of those groups so we can identify all of the filter elements the filter options inside that parent let's start off with the form block here we have a form block so we can get the text field in here and we have search parent as our identifiable parent wrapper we're going to be using search parent inside the JavaScript next we have each one of our filter groups and we did it like this to show you that they can have the same base class as long as there's something identifiable in this one we have filters services filters colors filters CMS filters years and select tests all of these identifiable unique classes are going to be used in the JavaScript so we can identify when we have a new filter group after we have our parent classes applied we need to go and apply our data attributes so the library knows what these buttons should filter by what does development filter by what does CMS true filter by let's go do that now first we go to our text field in settings we will filter by asterisks asterisks is all we are filtering by everything you can type blue fun 2017 anything you want to search by is going to be searchable with asterisks next we have our buttons filter by branding filter by Web Design filter by development as you can see not case-sensitive filter by motion and filter by strategy we'll do the same exact thing with the color buttons filter by asterisks for all this is essentially a reset button for the colors and asterisks is going to filter by everything we have red we have yellow we have filter by blue filter by green and filter by orange when we get to the radio's we are going to apply our filter by attribute to the radio button not the label not the wrapper for the radio the radio button and then the radio button we're going to filter by true in this example it's going to search for the text true inside these collection items same thing with false we are going to filter by false the reset radios button is an interesting one this looks like a div but it's actually not it is a radio button and I'll go into inspector to show you that so we have our true we have our false and then we have this filter button and when you open it up it is a radio we're calling it radio reset it's display:none we don't want it to look like a radio we want it to look like a button but when somebody is actually selecting sent radios they are just selecting a different radio button and this is filter by asterisks it is filter by all or essentially a reset nice alright let's go to the checkboxes same mentality as the radios we're applying the filter by on the checkbox we are not applying it to the label we are not applying it to the checkbox wrapper it is the checkbox the input filter by 2020 filter by 2019 filter by 2018 filter by 2017 nice easy then we have our select the select is a little bit different than the other ones we had to make it work in a little bit of a different way but it totally works we have our select selected there is no inner elements here so we have to apply everything here in the choices what we're going to do is on the Select data attribute we're going to have on the Select element we're going to have a data attribute of filter by with asterisks that means when something like so when select one when there's nothing selected it's going to be all it's going to be everything that's going to be reset so we have the filter by asterisks on this select element each one of the choices has text and value you guessed it the text is what visibly shows on the page the value is what we're actually filtering by so if I have 2019 with a value of 2019 it's filtering by 2019 and that's it it's really that simple to set up the Select we are all inside these choices and the choices will filter the grid that's it you're done there's nothing else you have to do in terms of structure on the page that's the full extent of setting up this complex filter system inside the now it's getting the custom code and let's see this all working with just a little bit of JavaScript we're in custom code and we're going to go through all of this line by line to show you how to set up this complex filter system if you saw examples one two three or four this is this same setup the only thing that's changing here is we have more filter groups so our array has a longer list of items let's go through this line by line and see how simple it is to set something like this up the very first thing we're gonna do before the closing body tag is add the F and sweets EMS library when we launch the library we'll have the real script file this right here is not the real script file next we have our project specific script where we will customize how this works let's first run a function that's going to happen immediately it's going to run this right away and what it's going to run is creating a new library a new instance of our FS library and it's going to target our collection list class this is the class that is applied to the collection list element we're going to store that new instance in a variable called projects grid we're going to be using projects grid later on down here when we run our filter before we run the filter let's look at the array this is the difficult part of all of this and all we're doing is just defining the classes of the parent wrappers of our filter groups so we have our filters colors class this is the add-on class we added to the parent wrapper of our color filter buttons we have our search parent our filters services our select tests our filters CMS our filters years we define each of those parent wrappers and then we decide is it exclusive or is it Multi filters colors were only selecting one color at a time it's exclusive search we are only searching by one thing at a time it's exclusive filter services we're allowing the user to select multiple services so it's multi select tests we are only allowing the user to select one select item at a time so it's exclusive filter CMS we are using radio buttons here so by default with radios we can only select one at a time so it's exclusive and then filters years are checkboxes and by default checkboxes you can select multiple at a time so this is multi great that was so difficult now we're going to take all of this list and we're going to store it in a variable called my filters my filters is holding all of the powerful information here that's going to tell the library what we are filtering by in our grid we're gonna take my filters and we are going to use it down here we take our project's grid we're going to run our filter component we're going to have filter array as my filters this is all of our filter groups this is what we're doing here we're filtering our grid by my filters we decide the active class of filter active this is going to make any of these items appear active by adding a class to them and then applying styles to the filter active class then we have an animation here where are we enable true duration of 200 milliseconds easing of ease-out effects fade translate at a 20 pixel y-axis you can go and customize this animation very easily with our script generator and you can have any type of animation on your grid as you filter the items that's it this entire video is how you set up that entire filter system if you understand how this library works if you understand how this filter component works you are going to be able to set up very very nice filter systems on your web flow site there's F in sweet

Channel: Finsweet

Views: 21,453

Keywords:

Id: o1S5YNOxgFY

Length: 15min 43sec (943 seconds)

Published: Mon May 04 2020