CMS Filter, Nest, Load - Learn it Live: Build 2 | No-Code Attributes

we are going to be filtering by categories and butler products this setup is going to require cms nest so not only are we going to filter i think we may also do some load we're also going to nest and nest has been something that people are asking about all the time so we are going to cover this [Music] penny is this something that has over 100 items here 71 71 yeah okay so do you think that that will ever go over 100 or is it always going to be around this 71. uh it it could go over a hundred um okay so we'll set you up for growth then it'll just the setting will be there for when there is over 100 and it will just work so first before we get started let's copy this script to the head of the page this one's easy to forget we are getting some support requests in and people just are not doing that i always do it as a first first thing we're going to look at a native webflow nested collection and then we're going to use this one as nest so let's start first with the native nested we are going to nest project categories inside our projects so let's go and do this collection list link to the project category and the project category is going to have um text link here okay connected to the name great now we've chosen this one is the nested instead of this one because there are no items that have more than five here so this does fit into the nested the native nested webflow setup this does not this can have more than five so it just doesn't qualify so let's now go and get just this working we're not going to jump into the nested part yet the the attributes nested part let's go and do the same thing that we did fs you know what i'm not going to type it i'm going to go in the docs this is the best way to do it because you're going to mistype something and it's going to be frustrating so just go to the docs copy it and then you have a very easy list waiting for you great and let's do the same thing for this surrounding filter wrapper so let's make sure we understand this we have all of our filter ui elements we have our search our clear our check boxes everything they're all inside a filter that filter needs an attribute of filters cms filter element filters so we have it on our list we have it on our filters now we're going to start to make the relationship between this filter ui and the content within that item i'm going to go and back to the docs i will go and grab this fs cms filter field identifier let's go add that as a name and the value is an identifier this means something that is clear as to what it's for it's like a it's like an id that you use that represents what this is so this is going to be our services and now we're going to to make that relationship in here with services so i'll add the same exact thing now let's just run a quick test i think this is going to work as is just this sidebar of filtering categories and you can see penny has the submit button in here and what this means is we're going to have to press this submit button in order for the filter to filter in order the list to filter and penny while we're waiting do you want that do you want to submit buttons that has to be pressed no i actually kind of left it for you so that you could have this conversation about whether submitter needs to be there or not perfect i'm glad you did that we'll we'll watch the submit button work and then we'll look at how to turn that off cool okay let's load up this page and if i go and choose re-roofing and renovations and i submit this it's going to now filter so that worked renovations re-roofing renovations renovations they all have either renovations or re-roofing let's go and just do re-roofing and there we go so this is working uh this is yeah i we nailed it great warehouse and logistics perfect okay now that was the easy part now let's go into also an easy part but not as easy it's going to be the cms nest cms nest is going to feel a little weird on your first implementation maybe a little less weird on your second implementation but after the second one you're going to be a pro it's really not that difficult once you understand the steps so before we do any filter stuff let's first get this information inside the item i'm going to open up the nest documentation and see what we have to do here first copy the script i'll go in here and paste it in the head much like the identifier in the filter where we are creating relationships we need to do the same thing with nests we need to create a relationship between the the cms item and what it's going to be nested into okay we have fs cms nest element this is on the list so we're going to apply it to this same list that receives our nest so we go and put that right here on the same list that's being filtered great now back to here nest collection here this is now nested inside list look how we're trying to represent this inside the docks we have our list nested inside of it we need this div block which is going to be the target to add the nested collection items so i'll copy this and we'll look at what this is this is a blank div with an identifier value so we will go inside this project item and i'm going to add a div block with this exactly we'll go and add the collection and this identifier should be i don't know what are we filtering by um that was yeah great butler products let's make sure we have this spelled correctly butler products okay great that step is complete now let's go to the collection to nest this is going to be the collection list that will be the source of the content and it will be placed inside this list it's going to be put in the place of this div block so this is just a placeholder of where we want the real content to go so i'm going to go and add a collection list above below anywhere on the same page as my list and we're going to add the same attribute that we did again making this relationship cms nest collection categories so i will go here on the page let's reduce everything this will go on the very bottom of the page this is going to be removed from the page you can display none it it's just there to be put somewhere else okay this is for our butler products nice okay and now before we forget let's add this attribute to it cms nest collection and we have our butler products great okay important step we have to place a text link inside this item it doesn't have to be the primary visible element but it needs to be inside this item we need to be able to read which page it goes to okay so we're going to go to the current butler page we need to know where this is in our cms this is the name and great so this is actually going to cut and paste into these boxes every single one of these items will get its own list just like you would expect in a native nested collection so that's it for this step we have this complete this is all we need now the last step and this is where we're seeing the most people fail in their implementations of nest this is by far the official step that everybody does not do collection on template i want this collection list to be the hidden source on the template page this needs to make the same relationship that we are making we're going to go to the template page of our primary list we have our projects so i'll go to the template page of projects here inside projects we can go in the body and we can go and add this collection list this collection list needs to have a reference collection here so we have our project fields it is a multi-reference and we're going to select that and we do the same exact thing that we did in the last step same thing we'll go to the list we'll go to the attributes and we will call this the butler products and same as the last step we need to go and add this text link not url we need to go to the current butler product and we'll just get some visibility on the name here this doesn't matter in terms of styling this is completely hidden it's not going to be cut or copied or pasted anywhere so what i'm going to do is go ahead and hide this goodbye that's it now let's go back to this page and i want to say that we are ready to check this work here we haven't implemented anything with filter yet we've just implemented the nest so what we would expect here is for the nest this nested list this list of orange links to show up in each of the items and let's go see if that happened okay there we go look at that so we have nested items here we can have as many as we want this one has five i want to see a six it works with six i don't see six here but i'm not sure if there is any that have six okay it works with regardless how many items you have the point is this is working we have a nested collection here and i'm going to open up inspector just so you understand what is actually in here we have our nest collection just like we have in webflow this is the webflow dynamic list that we have no class on this is where we added the attribute cms nest collection butler products and then we have our cms items it's literally copy and pasting this to this list here so before we move on let's just confirm that and we'll get a little bit of a different layout to make sure that we are looking at this the way we want to i'm going to just give a prefix here so it's clear what we have fs and that's list i'm just going to call it here and we'll give a horizontal let's wrap this list and we're not going to go official design here i just want to show you that now this flex setting on this list down here is going to be reflected up here so now we're going to see all of these links go from a vertical list to a horizontal list so you do your stylings down here and whatever you put here is going to be copy and pasted to every single one of these there's a question here from wkd saying let's say i have a big collection hidden like that for reference purposes does the browser still load it yes yeah absolutely the browser is going to load that list of tags and that's how it's getting it right it's got to load that in order to inject it as those list elements so whether you're doing it one way or as like actually nested lists there like the browser's got to load that data to display it so yeah does it slow it down at all in the load no this is not this is not something that's going to have a significant impact on your load absolutely not yeah if you have a giant list it's possible if you have multi thousand item list yeah i mean anytime you're putting thousands of elements on the page there is something with page speed but penny at the size of your list the 70 items no this is not something that i would be concerned about for for speed so let's check this you know what i think this actually isn't this isn't this is a i'm glad this happened i don't think that this is wrapping because these titles are too long these names are actually too long and it's not going to wrap to the next line right here yeah right so okay let's um let's just keep working we'll prove it with this on the next load we'll see that but this is this is good our nest is now working now let's connect filter to it let's confirm it works and then we'll hide everything okay now we need to go back to filter so we finished our nest implementation but we still need the filter we already have this applied we already did this in the first step we now need this field identifier step and we're going to copy this and we're going to apply it to these check boxes here penny has three different lists they are separate lists but they are all from the same collection butler products so we're going to go to each list and go apply this butler products excellent and then one here we'll go butler products so they all get the same identifier you need the same identifier yes they're going to be searching through the same list and again butler products okay great so now that's applied to all three of these columns and now what we want to do is do that same thing to our newly nested list here we go we have this right here we're going to apply that same attribute here because remember this is actually going to be inside that list so now we can search for that information butler products excellent okay so we have this background we're going to check we're going to check that the filter is working and let's also hide this submit button so we were pressing submit to check we have the option to completely remove it from the build or hide it if you hide it it will not attributes will see it is not there it gives you the option to not have it for desktop and have it for mobile or have it for desktop and not have it for mobile so that's why we went with the display option but if you never ever want this feature you can just remove that element completely from the page okay so let's go and publish and the rest of the steps are fairly quick penny when we search through this what would you like to search for would you like to search for categories and butler products i'm thinking more i'm thinking the name of the the uh project actually sure just the name oh can we search for more than one thing of course you can search for whatever you want we can do name and category we could do name and butler products all three it's like burger king you can have it your way you know yeah really um well you know technically all three would be probably the most useful to the cust to my client cool let's see if the publish went through don't know if the publish went through so we'll check and i just want to say who what other agency what other group what are there anybody's out there literally saying hey other people who are building webflow sites come on over we're going to build your filter systems for you and also it's for free and we'll update it as we go kind of thing you know as you'll get more features as the product evolves so you know just smash that like button out there if you're watching and you're getting any value out of this for sure yeah this is wonderful this would have taken me an awful lot longer to figure out the first time this is working exactly as intended mr24 roof system [Music] let's switch to this we have the low price low profile re-roof system this is working all three columns are returning exactly as we want them to so perfect we're in and shout out to alex iglesias for putting all this together shout out to the whole finn sweet technical team and everybody for this because it's fun to just watch it happen so quickly you know it's a yeah it's yeah it's very cool yeah joe's helping me in this flag with this exact same solution so yeah very relevant there we go yeah matisse i i am thinking of you i just responded that where i sent him here to watch this because he has the same use case come now we're talking about it right now so let's uh let's look at this in the docs more attributes to use we have a search field one it gets the same exact attribute that we've been applying everywhere but we have a little bit of a superpower with this search field where we can comma separate what we wanted to search for and we can comma separate it with our identifiers so i can say i want this to be the uh the butler products identifier i want this to be the category identifier and our new to be named name category so let's go and do that i'm going to go and say is this a search is this a search bar or is this just it may not be i don't yeah i think i didn't do that part right no problem at all so we're going to add a form input here there we go and this form input i'm going to add this attribute that we've been adding everywhere cms filter field and this field is now going to search for our categories i think it is but we'll check that our butler products and we'll go create a name one here and this is services not even close okay services services there we go spelling mistakes i'm telling you you have to be this looks like butler products but it's bullper products butler products that would have not worked okay good and now we have to add our name right we have this new name filter field and that's just okay it's all about that's a good troubleshooting mechanism if you're having trouble with your attributes if there's something that doesn't work first step should be go check your spelling go check the spelling go check your dashes go check the this is and this is what the technicalities of coding is right it's like this is one of the hard parts is the semantic structure it has to be perfect so um yeah first step first if you're troubleshooting any of this is go through and check all the spelling and the naming okay so we are going to search and clear i'm just going to add this right now because i know it fs cms filter element reset easy great so this is going to reset everything it's a master reset we can also set up resets by each filter group here we can also look at that but first let's test okay great let's test our search and our search on a reload let's do adl nice adl influx um let's do re roofing re-roofing re-roofing great so this search is in fact working and try just mr dash tried mr-24 so not the whole thing just mr24 or mr yep nice beautiful hey joe melissa was asking no spacing between the commas there right when you were doing the comma values as a space matter and the attributes when you're doing multiple uh selectors there we have made this to just account for any any of these types of of yeah of inputs alex answers there can be spaces so we try not to be really specific about exactly how it has to happen uh there's flexibility in it just like the identifier you can be flexible with what it is as long as it's the same exact thing so that's going to work we'll see that on the next publish we have our clear button in with our reset uh and let's go in and let's let's go create these active tags let's see this working filter the attributes aren't case sensitive right are the attributes case sensitive or no joe uh well it i believe it depends for identifiers alex is the best one to answer that he's saying regular attributes like fs dash cms filter are case sensitive so the value on your end is not necessarily but the actual attribute name is all right we're going to set up these tag templates they're super simple they're going to add a such a custom feel to your filter system it's amazing what you can do in a very short period of time here so this is going to be our active tag i forgot to look what this value is tag template tag template even close mustafa's over here saying he's ordering pizza that's too funny because he's up next he's on one of the next ones so if you see him come up and it's his turn he's eating pizza you know he's he's on it 8 p.m in south africa i can go all night all right let's go uh ukulele her is saying let's add the search highlighting as well please sure on this one it would be good because some of those searches like you were i saw earlier you were like looking to see like oh did it actually pull for this one so that search highlight might uh might be good for that we are gonna lose alex uh teaching class i'm assuming that's a dance class alex if y'all don't know go check out alex instagram um let's see edgar's saying finn sweet tv finally hey listen we're working on these things you know and the tsp breaks for everyone wkd do i hear 24 hour marathon listen i don't know we y'all have to keep showing up so in that time that we were talking about that the active tag system is set up that's how quick it is that was under a minute and what we've done here is we've applied the attribute fscms element to all three elements here and the value here is tag template the text inside is tag text come on webflow okay it's not opening but it's tagged text and this close button is tag remove so all i've done is file this structure tag template nested inside a tag text tag remove apply the attribute to each one of them and now it's going to turn on our active tag system so let's see i want to think that this did publish okay you can see we're starting with nothing now this is a good sign that means it's recognizing something and when i go and click these you'll see the active tags can join the party there we go look at it it's so amazing and we can style these we have some you know these are not wrapping but we can wrap it absolutely uh they there are no style requirements these can be anywhere these can be like floating on the page you can put some javascript on the page and it's floating in in midair and you can tap the active closes there are no limitations here we can close them and there we go the key is this is your template so this whole thing that we apply tag template is literally your template for this so just like cms you can style that however you want you can bring that functionality into that style so great we're awesome if you see some some flickering you're able to hide this so you can set this initially to an opacity of zero if this is at the top of your page and you have this and it flashes quickly opacity is zero we already have it set up to identify opacity zero and put it to opacity 1. okay great so we are looking pretty good we have a request for text highlight we have we're definitely going to cover active class let's do activeclass here we have activeclass and we're going to apply fscmsfilteractiveclassname now this is going to put a class on the element when that element is filtering the list we're going to put it on the same element that has fscms filter field identifier so let's go do that exactly we're going to go to settings here and we're going to apply this and the active class is going to be is active do you think you have a class in your build called is active uh no i'm fairly certain i wouldn't okay we have is active coming as our active class so i will go in here and we'll have is active and i'm going to add it to each one of these because we have the three different lists here is active and let's go is active nice now we actually need to create some style for is active this is just how css works there needs to be something on this class style wise to make any type of visual change so i'm going to give this is active i'm going to style it from a global level first and then i'm going to show you how this can also be used as a combo class so let's go and make this black with let's say white color cool so now this is what it's going to look like i've applied it to the label for check boxes and radios this class is applied to the check box field we've made a special rule for check boxes and radios to make sure that this is really where you want this active class to be so i'll preview how this is going to look for me there we go so when we go and filter this grid it will look like this okay question penny nope okay there is one from nicholas here does the nested collection content need to be shown inside the main list in order for the filter to pull it uh if you rewind the video here you'll see how we did that nested stuff you load a list at the bottom of the page there you you assign a div and that's where that content comes in to so um yeah you can if you if you want nicholas there rewind back i don't know maybe 20 minutes 15-20 minutes and we were going through that set up in real time there uh what i i think nicholas is specifically asking about does this have to be visible in the final list and actually in penny's case penny does not want to show this content come on so we're we're going to hide this content we're going to continue working and watch how this this works let me reload webflow here this is a question that a lot of people ask the content just needs to live inside of the list it doesn't matter if it's display block display flex display none just needs to be in the item okay this is hidden let's go and drag our empty div block which will receive the nested items the nested list and then this collection list we just don't want these here done still gonna work okay i want to think that we did not get a publish through maybe we did let's see and i forgot what what were we testing yeah oh yeah of course there we go there we go nice so we still see the checkbox here you can hide this checkbox uh you can opacity zero the checkbox you can display none the checkbox we're going to be releasing some additional content to talk about your options for this in the lens of accessibility there are some ways to manage your checkbox instance that is not acceptable not accessible and we're going to tell you exactly if you do it like this it will be accessible if you do it like this it will not be accessible this will be brand new content we may have a video dedicated to this but this is working we have our active class it's working everywhere now notice how this let's clear this and also test that nice let's type this and let's see that this search does not have an active class right this is just not there's nothing active about this i can apply an active class also to my search so let's go and do that i'm going to create another one of these i can also use is active if i wanted to but i'm going to create something else here and i'm going to say is active search and this is going to have order of blue and now we go add this active class here and we'll see how quick and easy it is to go do that is active search so now when we go and use our search input we're actually going to see when that search input is actively being searched through great and while we're on the search input while we're playing with this let's go over the active tags that harshit asked about or the the search highlight that he asked about okay no dates no range we have our reset in there we can set reset by by um identifier if anybody wants to see a reset by identifier let me know that very easy uh what do we have highlight there we go so we have our cms filter highlight true where do we add this we add it on the field identifier we can actually add this to any field identifier even something like a radio or a checkbox and if you click that checkbox it's going to highlight whatever that checkbox is returning but we're going to do it specifically for this search input so i'll go and add a new attribute okay so i've added two attributes here to this search input we have our highlight true turning that feature on and then optionally defining the class which is now is active text so what we're going to do is again define this class i'm adding these classes like this there's a few ways to manage your classes this is how i prefer to do it and what i would do is i would put all three of these active classes in a hidden div on this page so that they can be saved in the event that the classes are removed so let's go is active text and what kind of text highlight are we going to do here let's do something a bit dramatic so we do see it working and we're only going to see this action on the name right because the other ones are hidden that's okay that will work all right so let's publish that we'll see that working active text good just so we have this i can go and put this in hidden great uh whoa where did i go here great so we can put these in here great and i want to think that this is published yes it is all right we have a lot to check here best this blue line should stay there we go so i we didn't have it very thick here but you can see there is a blue line that was our is active text search class and you can see that if we remove this this blue line will go away so this active class is actually working and we have two different active classes managing different elements in our project great okay now the text highlight so now we're going to search by name and we want to see this name highlighting on the the returned keyword so let's do custom here and this is oh maybe this didn't go through yeah maybe this one's not live yet no okay quick check here did not catch on to my custom class here so it is defaulting to the the default client the default attributes class i don't know why i am not sure but for now is active text for now we're just going to change it to this if this is a bug we will fix it very fast so we're going to change our is active text i'm going to put my default class that we're given in client in attributes and this is now going to work and each one of these has an active cl has a default class we set is active we set is active search but we have a default that you can use if you do not want to set these okay so let's search this again let's do the custom there we go so now we have our active class so our custom active class was not working we'll look into that maybe that's a bug maybe i missed a step or did something wrong but there we go great and we'll see that as we search for things and don't search for things it can get really specific as to what is being returned as i'm removing things it's saying exactly what's being returned here yeah this huge i mean this is this big stuff this is stuff people pay lots of money for filter systems like this um yep and i'm going to show one more thing as you can see when i'm typing i'll go down here as i'm typing we have a flash on every single every single keystroke and the reason is attributes is so fast that it is actively filtering the entire thing immediately after every keystroke that's what that is so what we're going to do is apply something called the bounce and the bounce is going to set a little bit of a delay on certain fields to make sure that we're giving a good experience to the end user so let's go and look at how to do that in the docs we'll go to cms filter and we are going to go to debounce i want to wait a certain amount of time until the filter results update so we're going to take debounce we're going to do 200 milliseconds and we're going to set it in this case on the field identifier so i will go and do it to this this will not affect the other filters if i were to apply this to the list it would be a global setting and even clicking on this would have a 200 millisecond delay but we don't want that and actually we're going to change this to 2000 just so we can really see it working so this is going to wait two seconds until it actually runs the search to make sure that the user has stopped typing so a good number for this 200 300 400 maybe 500 and i think that's a natural way to to let the person finish typing until the the results filter 2000 is a bit too long though i do not recommend that cool let's load this up and let's now do this new test so i'm going to focus on this and let's type custom now it updates so two seconds right i can type i can type i just removed everything i'm going to press c nothing now it goes you nothing now it goes and then if i type the rest of custom filters so set that appropriately and that's going to improve the experience for your site big time and that's it for the bellcon site penny thank you for giving us this perfect example it was really really nice to implement this one thank you great well thank you very much i really appreciate it you

Channel: Finsweet

Views: 5,110

Keywords: webflow

Id: UXpAWYC4pps

Length: 42min 50sec (2570 seconds)

Published: Tue Feb 15 2022