(2020) CMS List Filter Buttons | How To - CMS Library for Webflow

hi everybody its Joe Kruk from Finn sweet 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 in this example we go over using a dynamic list to create your filter buttons this is the first official add-on script of the F and sweet CMS library when we launched we had a lot of requests of people wanting to create a dynamic list of filter buttons and we are doing it through the add-on script if you have not seen examples 1 & 2 of filter please go check those out first this is considered a more advanced step to next step type of walkthrough alright before we look at the live example let me show you what we are doing here we have our collection list of multi reference categories totally CMS driven we are using a native web flow nested collection and this nested collection has this same source our multi reference categories we are going to be filtering by these values and they're going to filter our nested collection great let's go and see this live working here we have our items we have our nested collection all looks good if I go and filter by life-changing and interesting and funny and redonkulous and everything this will filter the grid and if I have interesting selected will see only interesting if I have happy selected will see only happy and this is reliably working with our dynamic buttons and our nested list also know that we can tie other filters into this same filter group look how I'm filtering by orange and green and all these other items here with our dynamic buttons cool and just as a heads-up no items found we only did the multi reference items for the first 20 items so anything past 20 will not have an item anything up to 20 will have a multi reference item okay that's it working let's get back into the designer and let's see how this is set up we're in designer and I'm going to quickly go over the base structure of the filter component we need to be using the filter component to make this work we need to make sure we have our classes and our setup correct we have our collection list class on our collection list we have our values that we are sorting by here inside the item remember you can hide any values including your list even this can go and be display:none and it's still going to work this will still reliably sort by any of these values up here but we're gonna have them visible here awesome okay now up to these buttons as you know when we are creating static buttons we can go and add this filter by data attribute filter by blue filter by red filter by yellow orange and so on if you've seen the other examples you know that this is required to make these buttons actually filter by the correct information when we're working in a dynamic list we can't add dynamic data attributes watch as I go and try to add not a condition but a data attribute that says filter by and I want to filter that by interesting if I save that it's going to be added to every single item in this list and every single one is going to filter by interesting we obviously don't want that so this add-on script is going to dynamically create the correct values for our filter by attribute and we're doing that by a defining a few classes and the taking the values of those classes and putting them where they need to go first class that we need to make this add-on script work is the filter dynamic list this is a class that we're adding to the collection list not the collection wrapper not the collection item this is the collection list filter dynamic list the next class that we need is filter by text this is going to be the class that we apply to the value of the filter by data attribute so if you want this to filter by life-changing that's where this class goes this will filter by cool this will filter by funny this will filter by interesting and so on also know that you do not need to have this visible on the page you can go and duplicate this let's remove this let's set it as the URL and let's go and hide this it's the same kind of concept and we need to take the class off of this it's the same concept as a lot of other components in this library as long as the text is within the element we're gonna find it and we're gonna put it in the right spot so we're will filter by this text but we don't want to see it on the page and this is going to work this has no class we have our filter by text this will work let's check it out if I reload this you're going to see that we have our URLs life changing would not apply we have a space in our life changing this is not going to find it through the URL it's going to find it through that class that's hidden and there we go life changing life changing life changing redonk s' redonk s-- readings great okay so I'm gonna go delete that and just go back to where we were with the normal filter by text great and with those classes applied we can now go into custom code and we can make this work with the component we're in custom code let's break this code down line by line before the closing body tag we are going to put our Anton script this Adam script is making all the magic work with that dynamic list turning it in to filter buttons down here this is our standard library script if you don't know how this works please check out example 1 and 2 I go in-depth about all of this this example is mostly focused on this add-on script so we're gonna do that please make sure your add-on script is before the library code it cannot be down here this is a no this is how we have to do it and the reason is this script is going to be adding our data attributes to our buttons we need those data attributes there before we interact with the library script nice alright it's before the library let's go and add these data attributes the first thing we're going to do is get values for each element with a filter by text class filter by text class that's the class that we applied to the text inside the button we're gonna get the elements by that class name and we're going to filter we're going to store it in a variable called filter by text elements this eventually the value of this will eventually become the value of our filter by data attribute and now for each filter and text element for is an iteration for every single one of them if you have 20 items in your collection list that are showing his buttons this will run 20 times for each of them we're going to do this for each button we are going to get each element get its inner text and store it as a variable called element text so element we're gonna get that text value and store it as element text the value of this now we're going to set that data attribute to the parent element dynamically we're going to take that element we're gonna get the parent element and we're gonna set a data attribute to that parent element the name and the data attribute is going to be filter by and the value is the element text that's the value of this filter by text class and that's why we can hide that text we can do anything we want for it as long as it is the direct child of that button it's good to go and we're going to apply that data attribute filter by value and these buttons are going to have the correct structure to be used with the F and sweets EMS library filter component nice so now we have a dynamic list you can use this in so many ways all of your filter buttons can be dynamic lists you can go into example five and you can set up every single one of those blocks every filter group up with a dynamic filter button list you can have CMS lists just for filter bar buttons and you can go and create these buttons and have your clients in yourself manage the filter bar buttons entirely in the CMS if you have questions about this if you have a further customization you need to implement this let us know we like this we want to support this kind of functionality and this kind of thinking a lot more go to suite JSI o sign up on our slack for free and start talking to experts we will help you out and we want to there's F in sweet

Channel: Finsweet

Views: 32,575

Keywords: webflow, filter, cms, dynamic, webflow filters, custom, js, javascript

Id: q13LkaSvEM0

Length: 10min 52sec (652 seconds)

Published: Tue May 26 2020