Webflow CMS Complex Filter Walkthrough - No-Code Attributes

[Music] hello everybody and welcome to a walkthrough with attributes we're going to walk through a complex filter example we'll go step by step into using attributes in your webflow project this filter example is for one of our enterprise clients at finsuite we're using demo data we're going step by step into building the ui filtering the data and you will learn a lot by watching this walkthrough let's get into the project let's see how it works and let's experience the power of attributes together and we're going to build this exactly look at this we're going to filter by car makes we're going to use the range slider we're going to use year select fuel type location and we have all of this juicy car data for us to use so we're going to be building this this is the end result our team at fin suite built this example now i'm going to go in and rebuild this with you so check this out i have duplicated this project it is blank for the filters we have the data in here we're not going to rebuild the lists or rebuild the data we're going to rebuild everything that has to do with attributes all of the filter ui all of the needed attributes the load more the sort the range slider we're going to be reviewing cms filter cms load cms sort and the range slider which works with all of these so this is the end result this is what we're building today and i have no idea how long this video is going to be i've actually never implemented attributes until today this is actually my first time i helped design the whole system i know how all of this works but i've never actually implemented it so this is our first time together building something super complex here really excited about this first let's give a shout out to greencars.com they are one of our clients they very graciously let us use this awesome data here so you can see we have this car data but please know that this is a demo project this data is not accurate it is from kind of a long time ago okay maybe we have a 2021 uh do we let's see this is the no we don't even have 2021. this is all data the prices aren't right the these cars are not available right now we are just using this for demo purposes i want to make that super clear so first before we go into the actual filtering example let's look at this work let's see what we're going to build here this is a pretty complex and advanced system and we're actually going to build it with no code this is 100 attributes based all right let's first start using this make filter so you can see as i am running these filters we are filtering by tesla we have the active filters ready for us here we can go filter by price look at this let's get a tesla that's impossible to buy we're going to be able to go and filter by all of this stuff we can search for a toyota awesome we have the highlight effect we can what else can we do here let's go and filter it by year awesome we're in 2012. let's do fuel type gasoline we're going to do all of this and by the end of this video i think you're going to be a pro at attributes after viewing this you really have done one of the most complex and difficult implementations of attributes but you'll see by the end of it that it's really not that difficult for what we're achieving here this is a huge add-on to any client project if you can master this you're going to be able to upsell some really really awesome functionality for your clients and it all starts with attributes so let's jump in uh we're going to start in a webflow project it's a duplicate of what we just looked at this is going to be available for clone the full version not not this blank version but we're going to build a blank version together now this is not completely blank in a sense that we are starting with a cms we're not going to import data here we're not going to build a simple cms list here we have our data we have a multi-reference field we have a reference field we have year price mileage thumbnail pretty standard cms collection and we have our collection list this is not a webflow basics tutorial so we're not going to build our collection list from xero it is intended that you know how to build a collection list in web flow you know how to bind the field and that's exactly what is happening here we're linking to our cars collection and we have our basic bindings here we're binding to the name connecting the price we have the year mileage fuel type we have the location and we have the name okay so let's jump into this let's do this uh and i'm excited to have this finished product um i will say this is going to be a really nice build for us and for me too i think by the end of this i'll be a pro at implementing i'm a pro at thinking about attributes but not yet implementing so let's go do this together all right we're definitely going to be referencing the official version here we're going to go slow this is not a speed walkthrough this is really meant to put this on follow the steps and at the end of this hour or hour and a half or 45 minutes i don't know you're gonna know exactly what attributes is all about so let's go and start with the makes this i think is very straightforward in the sense of what we are filtering filtering by volkswagen filtering by toyota you can see we're rocking check boxes here which is a very big part of attributes and let's go and get started so the very first thing that i want to go and do is go to the documentation i'll want to go and copy this script to the page so i'm copying this script and here in the example i am going to go and paste it into the head of the site and you can see that i've already pasted these examples i'm not going to be live pasting each one of the attributes solutions right now at the time of this video filming we're still doing some some testing we're doing some revisions for you we're finding some cool things to add so this is not the official copy version of this but you're going to go and copy this script you're going to add it to the head of the page and you can see we have cms filter cms sort cms load and range slider so you need to go and add the script for each solution into the head there isn't one script for everything the reason we're doing this is for performance reasons that maybe you don't need everything maybe you just need filter or maybe you just need the range slider so instead of giving you 20 solutions of everything you can go and choose i want this one this one and this one so that's exactly what we're doing here okay let's go into the docs here let's go and start with this first item i want to filter the content of this collection list or collection list wrapper that's exactly what we're looking to do here so i'm going to open this up and you'll see this is the cms collection list that will be filtered so our cms filter fs cms filter element list and you can see from this screenshot it's telling us exactly what to do we have our collection list we have our attribute and that's what we're going to go and add there we go i copied this we can copy the clipboard right here the name i will manually add that list value and i'm going to go right to this collection list and i'm going to go and add this as an attribute and we have our list nice okay there we go first step done now let's go over here back to the docs we'll close this we do not need this anymore i want this form or form block to have the filter ui elements that's this form notice how i say form here we are not using link blocks or buttons to create these filter ui elements we are using form elements this is the proper way to filter this is how you're going to see most enterprise level filter systems set up this can be accessible there's a lot of default accessibility benefits from using forms we don't have to specify if it's exclusive or multi if you came from cms library we we had to say this is an exclusive filter or a multi-filter we don't have to do that anymore now we can just go and say i want a checkbox which is multi or i want a radio which is exclusive we don't even have to style them like check boxes or radios and you can see we have an example at the bottom of this page just to show you these actually look yeah there we go these are check boxes they don't have to look like checkboxes just because we're using a checkbox and our example shows a checkbox we don't have to do this we can style these however we want but the base the default we do have to use these form elements so the first thing i'm going to do is add a form to the page and go ahead and add this attribute to the form webflow form that holds all of the filter ui elements so every single thing that we are building inside of here is going to go inside a form so let's go do that i'm going to go copy this and i'll go add filters to it so let's go in to our elements let's go and add a form block oh i must have not okay the person who built the base of this great job we already have a forum covering the entire thing great this is excellent so we have a form already in here this is a web flow form and we are going to yep there we go i didn't delete one of them sorry so we have our fs cms filter element we have our filters and this is our form now we can go place form elements inside this form so we have our filter don't need this don't need this our container with our filter grid we have our column and we have our content so i'll just start going i'll start adding the structure here let's make it a bit organized and do a let's say filter ui let's call this a section and we're going to put each section inside of this so this will be a section this will be a section all of these will be sections let's go and put a border on the bottom to separate these great also it's probably not going to look as good as the example we had a designer on this i'm not going to spend time with design things i just want to make it clear how to use attributes that's really the point of this so i'm going to go and add my text in here and let's start off with the make so i have my make i'm going to add my check boxes and we have our check box very first checkbox awesome this is actually dynamic data so we need to go and add this inside of a dynamic collection list let's go and put this on our brands this is our make there we go and let's go put this check box inside the item there we go there we go nice all right now let's make this look half decent all right looking okay here let's give this a 1.5 rem doesn't matter you can use pixels this is not an important part of attributes classes don't matter styles don't really matter for most of the solutions and there we go we have all of our check boxes ready to be connected to cms and that's exactly what i'm going to do i'm going to get the text of this from the name awesome let's let's do it just like the example i want to say okay cool great all right now our first connection we're going to be connecting this checkbox to the make over here so let's go into the docs again to see how this works we have our filters attribute on the form and now when i interact with this filter ui check box label radio label select or text input field element i want to filter cms items with this textblock heading paragraph or link text content let's break this down we have our fscms filter field identifier there is a text right up here this is not something we're going to read on this video instead we're going to watch this video and here let me actually restart this so we can watch it together we're going to click on the label text of our checkbox we're going to add our field identifier just like this that says countries we're going to add make and then we're going to add that same attribute to the content in the cms list there we go fs cms filter field and that is countries we'll be doing make this is how we make the connection so let's look at this we have our conditions not our conditions we have our custom attributes and this one was fs cms filter this was certainly field and identifier is a way to identify this content with the content in the list so i could actually do this this works this can be my identifier this is a terrible identifier but it can be whatever you want as long as the identifier matches the content that it's supposed to filter in the list so we're not going to do that although it would work we're going to call this make and i'm going to capitalize the m not required but i'm going to tell you why i do it later when we get to the active tabs just a good habit and attributes to do this all right we have the make and now i will do the same thing on the make in here so i'm going to copy this let's go over to tesla here not condition again we're going to go here and we're going to call this the make as well awesome so believe it or not this is all we need to make this start to filter the make that's it watch this so i'm going to go publish this and we're going to see this filter ui filter this grid by make that's all we need we have the script we have the list attribute we have the form attribute up here or filters attribute on the form and now we have made the connection between the filter ui and the list so when this goes and publishes we're going to open it up awesome and now when i click volkswagen we should be sorting by volkswagen there we go cool we got tesla in the mix let's get mitsubishi and we don't have any of those in the list yet we're going to go to pagination we're going to do cms load and this will be available but for now we only have 100 items here on the page so this is working look at this we are filtering the grid successfully with this check box and the list awesome that was fairly easy for what we just set up so let's continue going let's continue going through these again i'm not going to spend the time making this look pretty that is not the point of this it is really just to show you how all of this works okay let's go and do this search here this one is also something that we can make happen and you know what let's actually change this into a heading four yeah just give a little bit of hierarchy here awesome i'm going to i guess duplicate this and let's keep a couple of sections available to us so we don't have to continuously delete this awesome so i'm just going to duplicate duplicate duplicate now we have some sections ready for us when we go to these other sections all right we have a new fresh one up here let's do search and i'm going to go ahead and add a search text input awesome so let's go to the docs let's see what we have to do for this i'm going to go to this i will close this up and you can see that we need to do this we need to do this identifier step for the for the search field but we actually have something specific that you have to do here something extra that you can add to search for everything so we can go and add on the text field cms filter field we can do it by name we can do it by categories we can do it by make we can do it by year we can do it by anything and we can comma separate these values so let's go and do this we need again our fs cms filter field let's jump in here and add that nice and let's just start by make we're not going to we're not going to do everything just yet let's just start by make and see how it returns make and it doesn't return non-make or fields that are not linked to make so it should only be filtering by this because we have the matching field in the list data and then after we search for the make we we're going to confirm that this works we'll add some other ones so we'll add i don't know we can add uh the name maybe and let's add the year also and just for now let's do a search come on come on designer you can do it come on designer designer a bit frozen up on me oh got a page unresponsive i'm going to exit this page let's give a reload here this is a super raw walkthrough as you can see this was not prepped uh i don't even know what i'm doing next but that's what this is all about let's do a search for car cool did this end up publishing it looks like it did so it looks like we can we can start searching here for the car let's give a big fat zoom in here let's give a nice reload cool and now we can search for the make so let's first search by tesla that was already first on the list let's do volkswagen cool volkswagen volkswagen volkswagen so it's only returning the volkswagen great so let's try toyota nice now let's search for something that's not a make let's search for electric nope let's search for the year nope let's search for the location not a chance it only searches for make because we have added that as the connecting field as the the identifier for what we want it to search for so now let's go and comma separate this list so we can search for multiple things and actually just for now let's do year so i'm going to add year and i have to now add year as an identifier to the list right now attributes has no idea what year is we have to actually tell it what year is and that's what this is so let's go and add fs cms cms filter let's do the field and this is the year great so we'll publish this let's just double confirm that this is not working beforehand right 2019 2018 nothing tesla uh nissan cool but no year as you can see so once we add this we will now enable searching for the year cool we are published let's just confirm that we are still working on the make toyota let's do mazda's not in the list yet kia is here there we go so we are working for the make now let's do the big test for the year there we go 2017 we are returning correctly all of these are 2017. so we have just super customized this search field it didn't work then it searched for make now it searches for make and year we're going to get to this later well we won't get to it later we're going to do it right now this means search for everything i've added a an asterisk here and if we go to the docs we'll see in the special i want to use a text input field in the docs it says to search for all cms fields use the asterisks as a value for example this and that's exactly what we're doing here so i've just added it we are all good we only have year and make right so even if we publish this and start searching for location or fuel type or mileage it's not going to return anything because we haven't specified what anything else is attributes doesn't recognize anything in this list except for the make and for the year so we'll just leave this and as we continue adding more of these filters we're going to see it actually working we're going to see how it does search for every field and even later we're going to add an option that highlights everything which is super cool let's look at that actually i love it so if we do tesla we can optionally highlight the the value that's being returned so it's going to tell us hey your search is returning this item because of this match we're going to do that after though when we get to options all right let's get back on track here let's go and add uh what are we adding we haven't decided yet let's go field type let's do a field type here so fuel type is a reference collection so we're going to do the same thing with the collection list let's go in there and do that so i'm going to go in here i'm going to do fuel type and let's go and add my cms list bam let's connect this to fuel types awesome all right we are returning all four of our fuel types and let's do the same thing we're going to go ahead and add a checkbox in here cool checkbox we have to connect the label i didn't really super explain this last time but we are adding our attributes in the filter ui to the label this is a label thing not on the check box itself not on the checkbox field on the label because we need to know the text that it needs to filter by so it's not going to be checkbox2 it's going to be the name right here so now when we add when we go and add fs cms filter field fuel now we know this one is gasoline this one is plug-in hybrid this one's hybrid this one's electric because of the text in the label that's why it's on the label so there we go i'll just copy this for next time and let's go ahead and add it to the matching text in the list there we go fuel cool all right there we go that's all we have to do i'm going to publish it we'll watch it work each step each time we add a new a new item here we're just going to check make sure we're working make sure we understand everything and then move on all right nice all right i will go and reload this page cool we have the gasoline nice there we go gasoline gas gas gas love it okay it's working hybrid notice how every time i change the filter it scrolls up to the top this is an option uh an option which i must have forgot to take off yeah we're actually not going to start to do this yet come on designer don't you dare freeze on me again there we go i definitely forgot to take this off we're going to get to this after this is the scroll anchor but this is going to allow us to optionally scroll up to the top when the filter changes this is good ux when the list is long and then becomes short but we're going to get to that so back to actually testing this this is totally working we have electric good so we are working as expected here new checkbox new field it is sorting it is filter everything filtering everything correctly awesome all right back into the example let's go location next we have radios here this one's cool because it is not a checkbox if you came from cms library this is the exclusive filtering i can only select one location at a time now the reason we're doing the the radio here is just for example purposes but probably if we were building this for real it would be a check box but we are going to do radio there we go new jersey all right let's do it this is actually not cms so we're going to be adding these radios by hand and we did this specifically to show you that it doesn't have to be a reference collection we don't need reference or multi-reference to set up these filters sometimes we have static data and that's okay so we're going to build this as a static list let's go and do location i'm going to add a radio button and before we start duplicating this let's go and add the attribute to this so we don't have to do it every single time so i'm going to do cms filter field and we're going to do location nice all right we got the location awesome and i think that's all i want to do until we start to customize yeah that's it i'm just going to start with x here all right how many do we have we have 1 2 3 4 5 6 7 8 9 10 11 12 13 14. cool 1 2 3 4 5 6 7 8 9 10 11 12 13 14. nice and of course we can do scrolling here we're not going to do that because i don't care we're just doing attributes so let's do this we have a k c a f l this is a true every step walk through if you want to go and uh if you want to scrub through this go ahead but i am doing this step by step a lot of you asked for this so this is truly truly step by step a k c a f l h i c a f l and we got the h i i could definitely do a week in h hi right now i-d-i-a-m-t come on designer uh id come on i probably should have been prepared with the list here but as i said this is completely unprepared mtnd mt md nd and okay i'm just going to say the names new jersey new york oregon new jersey new york oregon pennsylvania texas washington nice okay we have our radios here now this is an interesting use case we actually did it for you specifically like this we have the text in here but this is the full location we don't want the full location in our cms we actually have a field that is more specific than this and that is in this right here we have a hidden text so i want to show you that we can have hidden text here the text does not need to be visible in order to get the attribute and to be filtered but we want to show the full we're just going to add it to this element so i can go my fs cms filter that's going to be the field and this is location notice how this does not have to match the cms field this one is actually called location this one's called state and we have the identifiers location it doesn't matter like we said before identifier can be anything you want just name it so you're organized for yourself cool so we are good here uh that's all we need to get this filtering i'm going to go and hide this again and we're going to go and publish and watch this work so it was actually the same workflow as checkbox the only difference was this one is not dynamic so we had to add each one that's why it took so long but probably in real data if we actually had real data from the client this probably should be cms linked okay let's go and reload this we'll just quickly confirm we're still working on these we're still working on these and let's go and filter by california here and there we go we have california california california let's do a little new jersey little new york there we go so it is filtering exactly as i would want and notice how i can only select one here right as i am selecting these it's only one at a time so if you want to only select one filter at a time you use radio if you want to be able to select multiple at a time you use checkbox awesome all right so we are running through these filters here what are we going to do next we got clear buttons we're not going to do those right now we'll do that after let's go into select all right so we're going to select a year here and the year is in a select element which has some different rules in webflow we don't have the same capabilities to apply attributes to select fields so watch what we do here i'm going to duplicate this so we have more sections available to us let's go into year and let's add a select bam select it we have the select field here and we are now going to add a field identifier everything needs a field identifier we need to know what we are filtering by so let's go and add that to the entire select field we only have to add it once not to each choice so i'm going to go in here to my fs cms filter and this is the field of year noise and we actually added this when we were testing the search before so we don't have to do this and we have this year so we are making that connection field year and field year awesome when we go and add our choices the value is the equivalent to what we have here in the radio label or the checkbox label the value is what we want it to filter by so let's go in here and do 2014 and we want 2014 to filter by 2014. i could do 2014 is awesome i could just do is awesome and if if the value is 2014 it's going to filter by 2014 so in this example type and value will be the same but type can be whatever you want value is what we really care about here so let's do 2014 nice okay we'll do a 2015 with a 2015 and again if you want to scrub through this go ahead i'm just going to be adding each one of these it's a true step-by-step walkthrough but scrubbing is encouraged if you do not want to watch me do this i don't even want to watch me do this okay 17 let's do 18 and i want to say that it's come on 2018 that's not correct bam all right 2019 and i don't know if we even had 2020. i know we don't have 20 21 but let's just add 20 just in case doesn't matter if it doesn't return anything cool all right that's it we have our field with the identifier we have all of our value set and now when we go and publish and we use this select it is going to filter by the year okay give me that filter come on nice let's do it all right where are we year let's do 18 nice 2018 we are filtering nice so we are just really pushing through these filters and let's make sure and check that these work together so we have 18 we have some tesla's up here let's see something okay we have a toyota so let's filter out these teslas toyota nice so we can use these together we can use the make and the fuel type not a gasoline tesla electric nice there we go so we can use all of these together let's see nothing great all right so we are using everything here this is great love it okay nice what are we going to do next let's do the reset let's do reset i'm going to reset kind of mode right now okay so i'm going to add a text link here and let's call this reset all i'm going to reset all this let's go to the docs let's see what we have to do in order to reset also we're not going to look through all of these side note but read through all of these there's a lot of things you can do here like look how cool this one is i want to let i want the list to be filtered when the submit button is clicked so instead of just filtering right away you can have a filter system that actually filters when the user presses filter this is cool for pop-up modal filters or big giant drop down filters totally totally cool we're not going to do this but please read through this there's a lot of cool things you can do here number of results we'll get to that i want to reset all filters there we go okay fs cms filter element this is an element on the page we are identifying what this is it's the reset button we have the reset all link and we're going to apply this attribute to it so let's go and do that here we are we're going to add it and we're going to call it reset reset so when i go and publish this as i go and click through the filters and then i click reset all it's going to reset all and then we're going to add an option we're going to add our very first option on top of this to make resets specific to a category cool all right we should be working reset all button is there i have my toyotas you know what i don't want a toyota i'm going to reset all done awesome love it let's do tesla toyota let's get something from a different category let's look at california and now i want to reset all i can go ahead and do that and now everything is reset even the select is going to reset we don't have any results but i can still reset it and it is reset awesome super easy now let's go and add a reset all button just for each category the first thing we're going to do for this is to go and add this to each category where each category will have its own reset all button and let's actually yeah it doesn't matter i really don't want to care about design here that's not what this is for i don't like it doesn't matter reset all reset all reset all you guessed it we're going to reset all nice but this one we gotta change nice okay now we're going to jump into our first option we're about to start getting deep into options this is our first one we add options on top of elements to customize what that element does so we have the reset all filters on the reset button all of them have it now we want to reset results for a specific category of filters nice so we're going to add an additional attribute on top of our element attribute to clear a specific identifier so i'll copy this we're going to use our identifiers that we have already set up and let's go and do that this one's year so i'm going to go and put here and now we have location i will go and location it we're going to do fuel type i think it was just fuel yeah sounds right let's do make me and that's it yeah do they have a no there's no reset specific to search that's okay all right we're good here we are now making custom reset all buttons by category great okay so let's reload here we'll check that the primary is working here we go we're resetting but now the real test is if we go and reset other options no results i want some results here yeah we're not going to reset fuel type we're only going to reset make nice so if i search here i can reset fuel type and this remains i can still reset all and everything resets and actually this is a really poor title here uh reset this i just don't want them all to say reset all okay we're going to reset this let's reset this and you guessed it reset this okay nice we have category specific reset buttons super powerful as you can see when there's a lot of things to filter by maybe you just want to reset one and that's exactly what this is for very very good ux add-on to any filter system okay let's do these active tags i'm totally feeling active tags this is one of the juiciest new features of our cms filtering this very quick and easy active tag feature look at as i go and click these i have active tags and i can say i don't want to search by this anymore this is really really useful if there are a lot so let's just go and select a lot of things here [Music] just for doing it right no results i want to get rid of them instead of scrolling through these lists instead of uh figuring out how to clear each one of these i could just say i don't want this one i don't want this one and i don't want this one or this one or this one or this one or this one that's active tag these active tags can be anywhere on the page they don't have to be in line with its category so let's go and start adding this let's go to the docs let's see what we have to do here okay this is an element so we're going to go up to elements and there we go i want this div block to be the active tag template to show selected filters let's open this up see what's up okay this creates an active tag system on your filter ui as filters are applied and removed from the list active tags will be added and removed from the page cool so you can see here we have a div block we have some text in it and we have this image of an x and we're using fs cms filter element tag template so let's go and create our first one here well we only need our first one actually we this is used as a template so we don't need to add one for every single one of these categories we just need one so i'll go and add this and this is going to be tag template i want to say yeah okay let's go and add some text to create some structure here tag template and there was a little x in there so let's make an image i'm guessing there's an x for me nice cool all right let's go name this let's play pull out some client first stuff here let's do uh let's call this the filter ui tag cool tag template this really it's a tag template we don't need a class here whoops filter ui tag x all right let's one rem this let's 0.5 rem this that's that's one remnant so we can see what's going on okay let's go and create some structure here great again we are not designing we are just going to do it enough to see what's going on cool all right bam create a little bit of action cool do we have a different color no okay that's fine doesn't matter okay we have our tag template this is exactly what we needed from the docs right we got up to the tag template we have built what it's showing here this is what what we're showing now let's go on and see what else we have to do this is in the same drop-down right we have the active tag and now i want this text block to be the label and i want this div block link block text block or image to be the remove the x so let's go in here first this is the tag text this is fs cms element tag text and let's go do that right here we got the tag text cool and we had one more here this is the tag remove cool cool bam tag remove that's it right we're done we're done we have just built our active tag template and now with just those few little steps we have a super ultra powerful setup here for a great ux for our end user i'm going to now publish this and we're going to see this functionality here nice the publishers gives me a nice chance to take a drink which is great it's coffee no alcohol i promise come on designer come on we're filming a walk through here did we get the publish we got the publish which i am happy with cool all right so first we see a flashing tag template don't worry we're going to fix that let's see if it works volkswagen got it got it awesome love it our tag template is working let's see if the x works first let's click on volkswagen this is not closing but now if i click the x it will exit awesome we don't care about design but we do care about cursor pointer gotta care about that okay now uh first issue that we have we do want to be clear in the walkthrough so we are going to add some margin right and we also saw this flash right we saw the flash we don't want that flash and we also want the category so by default we are not going to show the category for you this this attribute system doesn't show category because maybe you don't want it but if you have a lot of filters like this it's probably a good idea to give the user as much context into what volkswagen is that is volkswagen a year it's silly but you should have category volkswagen's not a year it's a make we should give the user that context so we're going to do both of these things we're going to make sure it doesn't flash and we're going to add the category okay in the docs this is an option now so we're not tagging a new element we've already tagged everything we need for the active tag now we're going to on my active tag elements i want to show the category of each tag value fs cms filter tag format category cool and now you understand why i have capitalized these names here the identifier this is going to take the identifier name so if you did make it's going to show this category display with lowercase m but if you had the uppercase m for make then it's going to show uppercase this is not what we want we want category we're not putting the identifier here that was just an example showing you capital m this is not identifier i did not mean to potentially confuse you there this is straight from the docs tag format category okay and the flashing right so no one likes flashing content however we do have to have this sort of template uh setup on the build so what we can do is just opacity zero and we have already taken this into account that you can opacity zero it and when you opacity zero we're going to turn that opacity back on for you after the page is loaded so it's going to prevent that flash for you we're not going to display none it because we're not going to undisplay none it for you we're going to give a one opacity for you so there we go come on oh yeah i get my rare opportunity for the drink great come on come on no flash step one complete right i don't see any flash i'm doing a cache reload here this should be flashing that and it's not flashing it so now let's go and see it work just like we want there we go super super cool and this did not work my category let's see why okay ah where okay we're going to add this element with fscms filter element list so this was actually put on the wrong element i messed this up i put it on the text element and it's not supposed to be on the text element it's supposed to be on the list element very important for each option we say where you're supposed to put it any element with fs cms filter field identifier this one says element list so i've put this in the wrong place tag format category let's go and make sure that we remove this from its original place tag format category not correct let's go and add it to the list okay and let's just pick out what we're going to do next we have this we have the category we can do the sort but let's let's focus on these first let's go and show some results right yeah let's do results next okay what do we have here have you given me a publish i will assume yes nice there we go so i just put it in the wrong place because i didn't look at the where it's important where you put it so there we go now we're filtering by this let's filter by this i'm just going to click around just so we have it and we have make fuel location this is pulled direct from the identifier so it's good practice just to do the capitalized letter in case you want to turn this on later it's nice and neat and organized we're going to pull that direct from the identifier okay awesome so this is working we have our active tag system this is super super powerful awesome now we are going to do the results count correct correct all right let's just copy this text i'm going to go and yeah let's add it right here i've copied the text i'm going to put it here i'll default these at 0 and 0 and i'm going to span and span the reason i'm spanning is so that i can apply a separate attribute individually to each one of these numbers so let's go into the docs let's see which one we have to apply to to go and show this this is an element this is not an option we are saying this is an element on the page that we need to target to do something to show something so uh okay here this looks right i want the total number of items in the collection list that's our second number and show results this is our first number so we have fs cms filter element results count there we go showing zero results and right here we are applying okay cool that's easy let's go and choose our results number i'm going to go in here results count excellent and then back to the other one we have our items count awesome so this is now the second number items count let's go back in here and we're going to apply this items count nice and when i publish we will see the number of items just like we see here showing 30 results of 511. however we're not going to see 511 we'll probably be seeing 100 because we have not implemented our load yet i haven't done load yet and when we do we'll be able to see all 500 let's see if this published for us okay nice showing 100 results of 100 items exactly toyota 22 plus tesla 45 nissan bam bam hello awesome totally working okay that's it that's all we have to do now the next thing we are going to do is show more than 100 items in this list as we know we have the 100 item limit in our collection list we are going to break that limit with cms load so now this is not cms filter we did a lot of cms filter work here this is one attribute solution now we're going to go to cms load solution and cms load is going to give us this 511 items it's going to give us full access to everything in the collection and as you can see that is everything in our collection 511 items so we want access to all those we're going to put cms load on this list we're also going to put a super awesome pagination so let's go back to the the live example here we're going to now create this custom pagination based on webflow's native pagination so we're going to do this is now the next step in the walkthrough okay let's go to this load page we have a unique script remember for each attribute solution you need to copy the script and you need to add it to the page so the head of the site we already have it here we have our cms load script awesome now we can go and add attributes for cms load we added a whole bunch of cms filter ones we can combine cms load ones on the same elements we can they these are interconnected you can use them together it is truly a modular system that's what it's for so let's start with this these attributes i want this collection list to have the load more functionality that's what we want this is the list that we've been working with same thing as filter we're going to identify this list with an attribute and you can see the key is different here look at this cms load element list if you remember this is cms filter element so this functionality key is it's the key to identifying which element which list you want to target for a certain functionality so that's what we're going to do fscms load element list right on our existing list right here and we have our list cool you can see we have two list values but this one is saying hey this is the list for cms filter hey this is the list for cms load nice okay let's go back here and important it is required that the native webflow pagination is enabled for your collection list you know this should have three important tags here this is important you have to have this or it's not going to work we need to have access to these items and we have access through the paginated list so it's going to create this and as we know this by default without any cms load is going to load a new page it's going to load a new page with a query at the end with the next 25 items in the list so you see 25 items per page load we're going to turn that all into the same page pagination but same page no reload so let's go and choose that option this is an option now i'm going to go back into the docs and we're going to look at our four options that we can add to the list we have load under pagination render all and infinite load under is going to load items under look as this is clicking through load more it's going to load more items underneath the existing items so this is option one that we can add on top of this list element look where to add fscms load element list load mode load under we have render all render all is usually not recommended let me explain this especially if you're coming over from cms library if you're coming over from cms library you may be thinking oh this is load all and i always need load all to filter with load with load more load all is a thing of the past this load all in cms library it is the equivalent of render all but we don't need to do that this is not performant this can make your site slow this can make load time slower it's going to make filtering slower so you only want to render everything for very special use cases for cases that you absolutely cannot have pagination we're going to see how powerful this new pagination is this pagination is recommended when using filter so we give you the render all but there's an extra important tag here be mindful of what you're loading this is not the best experience and it wasn't the best experience in cms library either so this is literally rendering every single item render is displaying so not only are we loading it we are displaying it it's not super performant so we're not going to do that and we're not going to do infinite either infinite is as you scroll through the list it's just going to automatically load more and more as you scroll we're not going to do that either it is recommended when using filter to use this new pagination option it's super smart it works sort of like more front end frameworks like react we're going to load the items but keep the items in memory we're not going to render all the items we're going to load them keep them in memory and when we run the filters we're going to very intelligently display them in the dom or remove them from the dom if you don't understand that no problem at all you don't have to that's the point of attributes here doesn't matter about any of that stuff we've already done it for you so we're using pagination that's what this is we have the previous button we have the next button we have the pages this is the most performant option when filtering so we're going to go and add this fs cms load mode pagination bam all right and let's click back on our list we're going to add load mode pagination great let's go publish this and that's all we need i know that we spent a lot of time just talking about this and explaining about this load this load feature but all we did here was add the script add the list element and then add the load mode of pagination that's it those three things and now we have this this very powerful pagination on the page so when this loads we're not going to see this beautiful pagination here we have to add some extra things to make this custom but we are going to see a previous and a next button and let's go see that okay cool cool cool nice there we go we have our next button and watch how it doesn't load a new page next next this is not a new page in the project we are not loading anything look how fast this is so we have loaded everything but we're only rendering it when we need to so these 25 items are being rendered on the page when we get to that page the ones after and the ones before no so if you use pagination with cms library this is a whole other thing this is way way way way better so pagination use it it's awesome and watch what happens when we go and style these webflow buttons we're now going to get into the styling we're going to get into the custom pages we're going to get into the dots let's just make sure that we are clear let's show both buttons here we have our previous in our next filter let's call this ui and this is pagination pagination let's just call it next hmm yeah oh man is that ugly i really this is this is already too much styling for me what am i doing all right i'm just going to do a little tiny styling here this is not the point of this don't care let's just give this the same class next great okay so we have these custom designed buttons we're going to see these working let's now go add the pagination page template and the pagination dots template let's see what this is all about first let's see this working i just want to show you that this pulls direct from the native webflow pagination here so we're going to reload we go next and there we go so we are styling these buttons right from webflow we're trying to integrate as much with webflow as we possibly can and that includes the pagination so let's go to the docs and see how we can get a little bit more custom here okay um advanced pagination features that's probably it advanced pagination features optional these are attributes specifically for setting up custom pagination okay when the user filters content and the pagination is enabled i want the page to immediately anchor scroll up to this div block yeah we're going to want that not right now though i want this button link block or link text text link to serve as the template for page buttons in pagination mode that's what we want so let's look at this here we have this link block we have this page button this is what we're going to do we're going to create our own page button template and that's going to be used to create all the pages much like we did with the active tag where we created a template and then attributes takes that template and does whatever it needs to do with it so we're going to do the same thing here i'm going to go and add a let's do a link block in here can i put it in between here yeah nice all right let's call this the let's call this the button all right let's add a text in here i'm just going to add a one it doesn't matter what the the number is we're going to be dynamically changing this content based on what the actual pagination button is let's do a three rem here this is quite large bam good enough and let's add a little bit of a different color here we'll do this boring gray love it and that's it we don't need to create a whole bunch of them it's just the template now let's go add this attribute that we need fscms load element page button so i'll go and add that right here nice and i will just continue working here we don't have to check every step you'll see that we use the current active state with webflow's current active state so we're going to do the same thing that we did with page button and do a unique styling with the native current let's see how this works so we have our regular button i'm going to just create another one here and now i'm realizing we actually need a 0.5 rim over here nice and we'll keep it even and we're going to say hey this is actually this page just to enable the current state in webflow and now we'll go this is active cool so just like you would do with a nav link you have a current state and a not current state that's what we are building here cool so we have our button that's all we needed here now let's do these dots in pagination mode so look at this we have this dots option this is used for longer lists we can't show all 26 of these pages so we need the dot dot dot right we can navigate all the way to the end to this 26 but we need a dot dot dot so that's what this template is for this dot dot dot i'll go and add the text block not inside of this that was not intended i'll do a dot dot a few more dots just for fun and let's go and do this fscms this is not right this uh this needs to be updated in the docs um but for now i'm just going to copy and change it we have the page dot so this is not fscms filter this is fs cms load element no problem hey fscms load element page dots cool all right do we have to do anything else i want to oh let's customize this i want to customize how many page buttons to show based on the active page in the pagination ui page siblings so that's this if there's an active selected how many show up on each side is there one on each side or is there two on each side by default it's one let's just change it for two for fun here where add it to the fscms load element list this is a global setting here so we're going to go and add this to the list we'll do two so now when page six is selected we're going to see four and five and we're going to see seven and eight great let's also do the end this is just to show you how these options can work page boundaries how many we show at the end again we have this value one by default and we can go and change it to two so this is what one looks like i'm going to change it to two just for fun strictly for fun let's go we got two here and also look at this super awesome feature that we built in for you responsive option maybe you want a whole bunch to show on desktop but you don't want it to show on tablet or mobile you can comma separate the value here to change this so maybe you want four boundaries on desktop then one on tablet two on mobile and one same thing with this you may want one here and then three and then two whatever you want you can comma separate these four responsive we're not going to do that now this is not a mobile walkthrough so we don't care about that page boundary two okay so we haven't checked anything here four minutes ago we published this we now have this super custom pagination let's see if everything works and is set up as we expect we should have two siblings two boundaries we have an active state we have the super dots uh let's see if we have enough space here i don't know if we have enough actual page space for this with we're a bit zoomed here for the video all right let's reload here so there we go we are bringing in items to the page we are loading 511 awesome so now when i reload this there we go 511 items cool so we are 511 in so now we're viewing everything let's see this pagination excellent okay i do need to hide this i put one too many templates so this is working we have our ugly gray but i've i need to now remove this you can see we have the dots and the dots playing around a little too much here only one template so i don't need this we can see that we have the two on each side and the two on each side right remember we did the siblings two siblings two boundary two boundary two okay so now let's clean this up a bit we don't need all of these ridiculous options i'm going to for space reasons remove the siblings remove the boundary uh i remove that active state it it exists in the project it's going to be there and now this pagination let's do um let's make this look a little bit nicer so that we can see what's going on here okay this is now going to be a much and let's let's do this so we can actually see what's going on here this is now going to look better after this this change we remove that the the second template that second one that we did the current state on it was still standing there when we publish the page so we only need one and now we change the siblings we have three dots and now this should look just like this this official example that we're following and there we go you can see the pagination is growing items are being brought onto the page this is required no matter what solution you're using to bring these into the project so these are coming in we can still use the filter in cms library we had problems with items loading on the page and not being able to use the filter that's not the case you'll see that when i reload this page and i start to filter we can filter immediately there is no delay in filter so there we go look at this we got the active page we're going and we got the dots just like we expect so we have our dots we can go and paginate through this list check it out we have one on the boundary we have one on the sibling we can use our next button our previous button we are all styled up super super cool these also don't have to be dots by the way this could be an emoji it could be a picture it could be a more pages you can write the word more pages it doesn't matter but this is exactly what we wanted this is totally working it certainly doesn't look as pretty as this version but this is it there we go we nailed it love it okay so we just built an awesome pagination we have load more on the page we have this 511 items let's actually go and see this working here so now we have every item in our collection showing here 57 of 511 we have electric here we have the plug-in hybrid let's go florida there we go no results let's remove florida and look at how the pagination updates here this is juicy two pages only two pages great and when i remove one now there's one page there's less let's remove this and remove this and remove this three pages so the pagination is very smart it's going to update based on what is available in the list we can reset the pagination stops you can have the pagination sticky on the bottom you can have the pagination on top it doesn't matter where the pagination goes here it could be anywhere okay that's it we are actually done with this video i know that we did not get to the sort we did not get to the range slider and that's because we needed to get this video out before no code conference so that's what we did we cut it right here a part two will be coming but for now this is the official walkthrough for filter implementations this is going to give you enough knowledge to go and build a complex filter system also if you understand this you understand all attributes all of the attributes follow the same process the same system the same mindset so if you can go implement this you can go and do range slider it's live it's available you can go do the sort it's live it's available go ahead and try it if you have problems write to us let us know tell us where you do need the walkthroughs part two coming soon thanks so much and enjoy using attributes [Music]

Channel: Finsweet

Views: 4,105

Keywords: webflow

Id: FFvIb1gQYa8

Length: 84min 42sec (5082 seconds)

Published: Wed Nov 17 2021