Webflow cms filter Finsweet checkbox | Search field | Clear filter button | Item count

hi everyone welcome to the channel and in today's video we will be discussing on how we can filter workflow CMS items using pins with attributes so here today I have a setup where I have a couple of CMS items these are nothing but from a video content which is having python then some reviews title some topics associated with the videos and there is description and there is create a name so we have couple of features here so one feature is by we want to filter the videos on basis of the topics or categories so if I am clicking on digital all the videos stacked with digital should be filters here and it is multi filter here so it's kind of digital and engagement kind of thing like leadership you can filter it in that way also there is a search which is currently same thing keyword search for the video typing uh there is Creator name like Creator name as well you can filter by typing those keywords as well as the topic let's say I'm typing digital so you can see all the digital topic related videos are coming up here there is a fear of printer Button as well I'm thinking of that all the filter selection will be released there is a number popping up here you can see so these are nothing but the real-time Fitness item count which is getting updated whenever we are filtering something or these setting is just showing the the number of famous items visible currently on the screen yeah so well this is the setup for today and we will see how we can achieve this I have already done everything I will just take you guys through each and every step of this how I have implemented it so I have my page open here a video library I will just explain on how the setup is currently so I have the CMS collection here which is video list so there is a CMS collection from which it is pulling all the data all these datas are coming from CMS this one yeah so these this is currently having a name uh title image or thumbnail associated with it with things that we don't have to clear right now there is description and there is a multi-references here which is we are pulling all the tags or you can say topics from this CMS so there can be multiple topics of video can be associated with so here I have tagged with digital engagement and related so like that we have a multi-reference yeah as well so we'll come back to the page here if you see here is our collection list and yeah we'll use for today's filtering feature we will use the finish with attribute so we will move to their website if you want I can now put this link in the description you can access it so first of all uh so I am currently in the CMS filter like feature right now so for step one we need to add this script in the head of our page so that I have already done so this is my page is coming down sure the script I have added this is for something else but yeah this is the script I have added so we are done with step one and then coming to stick two Implement in with applying activities to the elements so now we will apply the data attributes first one is the first one is in the list I want to filter the content of this collection list on collection list wrapper so this is nothing but saying that the the feature we want filtering on what uh the The Collection leaves we want to be filtered we need to set up this Vega attribute there so either it can be a collection list or it can be collection list wrapper so the one we want to get filter we have to add it there so we need to copy this data attribute name and this value so which I have already added I'll just quickly show you guys so this is a collection list element you can add it to wrapper as well you can scroll scrolling down here you can see I have already added the data attribute name and the value so that is done now I will just close this one then we have to set up our filters so for the filter we need a form block so I have added a formula if you can see all these filters these are nothing but coming from the collection the CMS which is a video topic so this is having all the video topics these are nothing but check boxes and the label is coming from checkbox label is coming from the tag name the topic name yeah this is the simple setup we made and I have kept all these inside a form block perform block and then form element then this printers so that's what we need for now and then for the filter to work we want this data attribute name and this value to add it to our form a form block element so I have already done that this is the name and this is the value I have already added okay that's done so we have set up our collection list and then we have added the attribute to our filter as well then we need to add the filled identifier what this does is this links are our filter to our to our item CMS item so we want here is we want to link this let's say this text because this is matching uh somehow with the topics right we want the videos to be get filter through the topics so we need to link these two fields so how we will do that we will do that by adding a field identifier so the name will be this we need to add it two places one is to the filter UI which is the checkbox label like this checkbox level where that name is there right then we have to add to our text block or whatever texture we want to get it filter like here it is a simple text uh block right so we need to add this attribute to both of the these places and this identifier can be custom like you can add it relevant to your requirement so that's what I have done so if you come down here and here down you can see I have added a custom attribute her name is fscms filter field then the value I have added is topic then the same you will find it here in the checkbook label as well if your CMS filter fail then the value is topic so now our checkbox is linked to our video tags okay that's done we'll close this one so till now what feature we will get till now this will be working like on selection of the check box the filter will filter all the same as item on basis of the topics okay that's done now we will move to the sports part like how we can set up this search the keyword search field here so for that we will scroll down here more attributes to use you can see here to have a search field we have to use a text input field as a UI filter element so that's what I have done I have added added a text input fill inside that form block itself and what we need to do is we need to add a custom data attribute here which is FS CMS filter fail and then in place of the identifier we have to add the values let's say here it is country states and cities the values by which we want the CMS item to be filtered let's say here I want it to be filtered by the title by the topic Name by the Creator name so I have to add these as data values as comma separated okay so that's what I have done here I have added comma separator to this input text field topic then type it then author now next thing we have to do is we have to give the same to our our CMS item films as well so here I have to add custom attributors fscms filter field then the value will be typing then for the Creator the same thing I need to do fscms filter fill and then the value is author and this one we had previously added so this will be topic so three things we have linked to our search field you can see it here so that what that will do is you know when we are let me clear the filter but now I am typing winning which is associated with the video title it is filtering back let's say type of Creator name Emily so it is filtering the videos made by her and then let's type out digital it is filtering all the videos which are tagged with digital like associated with digital right yeah that's done now we will see how we can set up a clear filter it's pretty easy to set up from here and then we will go to this here filter so for that we just need a button like a element and then we need to add this data attribute custom data attribute and this value so I have just added a button element I have changed your text to clear filter and added a data attribute is FS CMS filter element and the value will be clear and that's it that's that is it we have to do for the CEO filter to work so now you will be able to fill out the filters which is applied it can be applied to everything like if we are typing and sorting something then we will keep the clear filter it will clear data as well then we will check how we can get these values here for that I have used a text block and I have wrapped inside the Span in this one for the same as items found I will use this feature here so what we need to do is we need to add a test text block and there we have to add this custom data today name and this is the value so that's what I have done I have added specific to this pan if they're coming down here I have added this results found on this data attribute name now all the setup this is the complete setup we need to do now we will thoroughly see the functionality so if I'm clearing out all the filters if I'm clicking on first feature is by selecting by filtering through the check boxes so if I'm selecting through the video tag name so you can see it is filtering engagement leadership so it is filtering correctly the count is getting updated there are 10 cars and it is showing for angular 10 charts here if I am clicking the video filter it is clearing out again the sound is getting updated if I'm searching let's say the title winning there is one single video with that it is filtering that let's clear it out let's type in a Creator name Emily so it is showing two of our videos so two videos are there I will clear the click type or topic digital let's say if it is filtering that or not yeah so it is filtering all the videos which are associated with digital tag so yeah we can clear it out so yeah this is a pretty good setup like filtering feature setup and thanks to fin Suite without even writing a single line of code we are able to achieve this kind of features um yeah please do do let me know if you have any queries regarding this company setup or anything or if you have any queries just let me know in the comment section down below and if you want this membership setup how I have done it you can let me know I will make a video on that as well yeah thank you so much for watching till now I hope you have a great day thank you bye bye

Channel: Likhika Routray

Views: 1,637

Keywords:

Id: G4z0YrHhLh4

Length: 13min 45sec (825 seconds)

Published: Sat Jul 29 2023