(2020) Filter: Part 2 | BeginneRR Series for Finsweet CMS Library

[Music] hey this is rr from finn suite and in this video we are going over the fn suite cms library for webflow and in particular this is a continuation of the first part of the filter tool make sure you check out the previous video so you can learn how to set up the filter tool on your website and on your cms this video covers different features of the filtering tool how you can combine different filter wrappers and also how you can start searching by filter [Music] we're in our designer and we're going to go ahead and look at the other filter options that we can do with our webflow cms so this was the one that we were working on in the last video right now as you can see we have the filters in place and it is set up as exclusive meaning that um we you can only select one at a time so if we were to look at the website let me publish it really quick just to make sure that it's updated and then if you as you can see we have it here now if we click this we have our purple a red or black but we're only able to pick one at a time and not everything so it's only what we call exclusive now what if we want to do two filters multi filters well that is actually simple what we're going to do right now i'm going to have two types of filtering one will be multi uh one will be exclusive and the other one will be multi so what we're going to do is we're going to go ahead and duplicate this wrapper now what we're going to do is we're going to change the other one to a different class name and the reason why we want that is because we're going to we're going to go back to the visual script writer and then we're going to add another filter wrapper and it has to be different class name so that we can designate what type of filtering system it's going to do this is the filter hyphen wrapper that is set to exclusive and now this one we're gonna go ahead and set this we're gonna change the class name so what you can do press the arrow button and click duplicate class so that we're duplicating it but we don't want just filter wrap or copy what we're going to do is filter wrapper and we'll do another hyphen 2 just to designate it's the second filter wrapper okay and we're going to go ahead and go back to the visual script writer now we're going to go ahead and change the code and of course as you learn this you're going to be able to learn that you can actually just add stuff into this instead of having to go back to visual script writer but if you have no knowledge about code and you're scared to mess it up then that visual script writer is there to help you kind of like that safety net you know what i mean that uh if you mess up then you can go to the visual script writer so let's go back to the visual script writer and what we're going to do is we're going to start over and make the and make the um the filtering system that we have here so remember we want to first of all put the cms list what's the name of it well remember it's collection hyphen list now we have some factors that we had before that we want to add in remember we added a combined feature in this cms because these are two separate cmss um cms collections but we i want to be able to filter through both of them so what we're going to do is we're combining these two once it is published so we want to combine tool we want to click filter and then we want to put first of all the first filter wrapper which is dot filter hyphen wrapper now remember you always put a period before the class name to indicate to the code to webflow that it is a class name and this one's going to be set as exclusive now what we're going to do is we're going to add a new filter wrapper and we're going to call this one which is what we named the other one filter wrapper hyphen two and this one will be multi so one will be exclusive and one will be multi multi multi nevermind and remember we also have an active class because we have this kind of feature that when we click on it it becomes a a certain color which is this one we had in button mods and that was the active class would be filter button so as we go back to this we'll go ahead and do this just to make sure we have it and it was filter hyphen active and of course you have the option you want to add animation you can do that maybe let's add some animation let's add some easing we'll do an ease in and out and um i think that should be fine i don't really need to add anything else so we have two animations we have our filter active we have our two filter wrappers let's go ahead and copy the code and we're just gonna replace the code that we currently have now as you can see if you go back you could actually just probably copy this part right here and then paste it and you should be pretty much good to go but just in case we go ahead and do that and then go ahead and do the whole thing so we'll go ahead and save and then we're going to go ahead and publish this document because we're not going to be able to see it on preview mode it's not going to work it has to be on an actual published website and i'm glad that you know one thing that's cool about webflow is it gives us a published website that we can kind of go to without actually connecting it to a domain we have our own domain that they make for us so this one is our exclusive filtering and this one is our multi filtering now let's see if it works so we have our exclusive one at a time exclusive filtering and then we go over here we have our multi filtering see that now we have everything if you want to just do purple and black there you go you want to just do black you want to just do red and black and all of that stuff so that is um uh having two types of filtering systems one's exclusive one's a multi so you can see these are actually the way if you want to just have all these different types of filtering systems let's say you want to have a search and then you want to have a filter and then you want to have radio buttons you're able to do all of that combining with that as long as you pretty much all you have to do is add a new filter wrapper and keep changing that filter wrapper name to another class name kind of just make up your own class name so we're going to go ahead and delete filter wrapper 2 and then i'm going to go ahead clear some classes just to make sure that no formal classes are popping up it's a good exercise by the way to always kind of clear the classes so you don't have these um random class names in the code um but just always make sure it's not messing anything up so now we went ahead and did our exclusive so that's how you do exclusive uh and multi filtering the next thing we're going to look at is how to add a search feature we're going to be able to filter through these items by having search and it's actually really simple it's really easy it's not as hard as you would think in regular code i'll tell you this it would be pretty hard but in webflow to make it really easy so what we're going to do right now we're going to go ahead and duplicate this filter wrapper and we have it right here and just i'm going to style it a little bit where i'm going to have it be not necessarily all the way aligned we'll just have it like that so it's one towards the left one towards the right and in this filter wrapper i'm going to go ahead and delete this delete this and delete that and we're going to add a different feature into this thing what we're going to do actually we'll go ahead and delete this filter but we actually don't need um no wait we do yes so so go back we have that filter wrapper and then we're going to add a form block into this filter wrapper so we have our form block there and then what we're going to do is we're going to delete a lot of things in this form block you see form blocks come you have all these things already in there we're actually just going to have a text field and that's it so we're going to delete this this this and just one text field now what i'm going to do is i'm going to add a border around it just so that we can see that it is a search box as you can see right here and then what we're going to do right now is we're going to modify this form block so that we're able to search with it so we're going to go ahead and go over here click the element settings and we're going to make the id the name will be search and the name will be search with a capital letter we're going to put a placeholder we're going to do filter by search so that people can see this is where you type in so that it can filter through search now we're going to add an attribute so that to make sure that's going to be filtering through these things it's actually pretty simple all we're going to do is we're going to add an attribute right here and we're going to do the name will be and remember the name will be filter hyphen by and the value remember on these buttons we did filter by purple filter by red filtered by black but in a search all we're going to do is filter by and then an asterisk that's it this signifies to the code that we are doing pretty much whatever is typed that's what we are filtering and how this works is whatever you type if it finds that word within the cms items it will show up that will be the one that will show up so let's go ahead and style it a little bit just to make it consistent with our design so far and then we're gonna make it centered to add some margins i'm gonna delete these margins just so that we are good to go okay now let's see if this works hopefully it does so we published it and we'll go ahead and look at the website so let's see let's type the word sweet and there you go notice it went ahead and filtered all of the ones have the word sweet on the cms item notice here sweet effin sweet effin sweet sweet and this one was kind of confusing but i was like why is it showing of course it has right there finn sweet if we were to search remember we have animals as well so let's say we put lion did we have a lion i forgot cheetah there you go i thought we had a lion i guess we did it gorilla i know we had a gorilla and all that stuff and what's cool is if you if you didn't know we actually ended up combining the filter with the combine tool so now you have different filtering options you can filter by um pressing a button or by searching if we search black the ones that will show up will be the ones that have the color black on it and so that is how you add a filter by search option on your cms and so now learning this you're able to figure out that you actually can just go you can go wow you can just go whatever wherever with your filtering system you can add these filters you can have so much filter options you can switch between exclusive and multi and it's very simple all you have to do is just always add a new filter wrapper on visual script writer and just make sure you designate a class name to each filter wrapper and also you indicate that on visual script writer so you have the class name on webflow and then you have the class name on you indicate that on visual scriptwriter so that the code they are pointing to each other and there is also a feature that fins suite has created so that you are able to learn to do other things and give you examples on this f and suite cms library for webflow so we'll go ahead and that is the cloneable so let's check this out if you notice here this is one where they added all these different type of um complex filtering systems they they have they added a reset all where you can kind of reset everything and as you can see how do you figure it out how do you know well all you have to do click at it and you'll notice on the attribute it says filter by strategy and there's so many things here we have radio buttons by year you're able to do many many things a lot of these have to do with changing the attribute and if you check out the page they have other examples as well we have over here example eight where you can filter by a number range now how did they do that well check this out click the button notice the attributes it says filter by 1.8 to 28.4 this one says filter by oops click the wrong one 31 through 60 and it will automatically find the number ranges between that they have other things as well which is one that i'm going to talk about a little bit but not in much detail this is how you can filter within a nested collection with a collection list that has a nested collection now we're not going to go over that in this video we're going to go over that on the video on the nest tutorial not next tutorial nest nest tutorial which is another tool that the fn suite web cms for webflow has and those are the different options that you have available for your cms when using the filter tool on the next video we are going over a tool that is similar to filter but it is sort that's effing sweet

Channel: Finsweet

Views: 3,928

Keywords:

Id: zJ7Xo-57Dvo

Length: 15min 24sec (924 seconds)

Published: Thu Feb 04 2021