(2020) One Multi Filter | 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 filtering items with one filter group with the filter type of multi filter type multi allows you to check multiple options at once so if I go and select blue the grid is going to update with blue we're only showing blue here if I were to click red it's going to add red to the filtered grid and now we're seeing blue and red and then yellow and orange and green and now we're seeing everything I can unselect I can select as many as I want one to any type of combination and you can see as I'm filtering through this grid the grid is updating quickly and reliably that is how we filter with one filter group and option multi we're in designer if you already watched example one this example 2 is the exact same setup inside designer literally nothing is changing the only thing that's changing is one option inside JavaScript but we'll go through it again in case you didn't see it or you want to really understand how the structure works we have our dynamic list we are applying a class of collection list to the collection list element not the collection list wrapper this is not the class we care about we care about collection - list applied to the collection list element next we need to have a class on our parent wrapper this is the wrapper that is holding the filter buttons inside of our filter group and here we have filters - wrapper this is a parent element we have the text in here doesn't matter as long as it's some type of parent of all of these filter buttons in our color group and the last thing we need to do is apply the data attribute of filter by - each of these buttons so here we have filter by blue filter by red filter by yellow filter by orange filter by green and what this is doing is it is searching for the text blue inside the collection item so if it finds blue it's gonna filter when blue is selected if it doesn't find blue blue is not going to be filtered and the last thing we'll look at here is the add-on class each one of these has an F ltr' active class which allows you to give an active state to a button when that filter is enabled as you can see each one of these looks different with this class applied because we have this nice add-on class of the color in between which allows us to use this add-on class in a really powerful way nice that's all we need in terms of structure now let's go into the custom code and see how this works let's go through this custom code if you just watched example one this is the exact same code with the exception of filter type multi if you didn't see it or you want to review again we're going over it again the very first thing we have to do before the closing body tag is to add the F and sweets EMS library script when we launch the library will have a Live hosted script file for you right now this is not the real script file then we have our project specific script and in this script we're first going to run a function that's going to happen immediately we need to create a new instance of our library new FS library we are targeting the collection list class this is the class that we applied to that dynamic list collection list element we're storing all of this new instance information in a variable called project's grid and we're going to use projects grid later on here when we filter after we have that projects grade variable we're going to create our array our array is a list and it is going to define the filter groups that we want to filter by and how we filter by them we have filter wrapper which is the parent wrapper the parent class of all the buttons inside that filter group in this case it's filters - wrapper this is what's containing all of our filter buttons filter type is multi this means that we can fill filter by multiple options at the same time we can click blue red orange all at the same time multi we're storing this information this list of our filter groups in a variable called my filters then we need to go and run this filter component on our projects grid so we have our project's grid the variable that we created up here and we're going to filter by our filter array of my filters which is what we just defined here so we're filtering a multi on all of these filter buttons that have the colors on them we have our active class defined as FLT our active and we have some animation on here enable true duration of 200 milliseconds easing of ease out and effects with a fade translate with 20 pixels on the y axis if you don't know how to do the animation if this is not clear on how you can write these effects use our script generator it's going to allow you to do anything and you don't even have to write any type of code to make your animation happen that's it that's all we need to do in order to set up our filters on the page suite

Channel: Finsweet

Views: 11,008

Keywords:

Id: _4xkehZx1ho

Length: 8min 21sec (501 seconds)

Published: Mon May 04 2020