Build advanced Webflow filters faster!

hey guys i'm going to be going over a video um really on something exciting that reloom has released today uh june 3rd that's the time of me recording this video uh something that's going to be able to tie in really well with the client first system and really their attributes so if you're not familiar with realum it's a awesome product that helps you get started and start developing your sites even faster and using the client first system that finnsuite has created so for better organization i use it myself i love it and i've been around this channel i've made a lot of reading videos but i'm actually going to be testing out their filtering solution here that they've that they've done to make it a little faster for developing these these dynamic filters and so i'm going to be going through that showing you how that's going to work and look i'm going to test it on a live project as well because i was just about to start developing the filters for this project so we'll go ahead and jump right into that so we're on room site here and i'm going to use these are the new components they've released some other awesome stuff here and maybe we can get to those a little bit later after the at the end of the video but as of right now i'm going to focus on uh these new components right here so i'm looking at filter five now from but i understand these already have the attributes part connected to them and all we got to do is put in our script and so i'm gonna come here and i'm actually going to just uh paste this in the page okay and we so we see we have our collection here the container large what i really want in this is mainly to get my filter section here okay so i pasted this in here and so these do have all of our filters here that we could we can use this one will work well for the project i'm working on and so to give you a little bit of um overview what we're doing is we're making a site for a uh for an independent owner she rents out condos and um she wants to move out of airbnb and start doing it herself and she has um about nine properties so we're gonna have some filters if you want to get through here okay so these are just the categories now these themselves aren't the filters now you can see there are no attributes on these over here on the right but when we get into here this already has our attributes and this these drop downs also have our attributes so we click on these and you see um this is the identifier here so what we're going to do is we're going to go to our uh our filters here and we're going to go cms filter okay so we do need this script we're gonna grab this script and we are going to go ahead and go to our page settings here throw in the script in the head save that okay and so now we have a a lot of stuff here so we do need to get have our list all right now this is going to be the list i'd imagine replace this filter is empty okay okay so grab my filters component let's move that up here and let's get rid of this here put that inside of the feed here place that div okay all right so now we have we have what we need here so as of right now i'm going to leave this one blank because this is going to be used for something else what i want to do here but here i'm actually going to filter by rooms or so i should do guests and so here i do want to change the option amounts so we'll do one two do three i'll just guess so here we're going to also do you know a pet friendly i will do beach access and i'll leave these these ones in here for now and i might not need option four or filter four but um leave that here for now okay so i have these sections in the middle i don't believe i will need these categories though so here can you manual move over to this side here there we go okay so we have our filters set up here now this needs to be called at our list so our list go back to our attributes so we have the field here and we need to have our list so some element and then list okay so we do have the form block and this should already have filters if we go inspect it the block here does have filters inside of it that is correct so now we have our identifiers okay so this is going to be our identifier so remember we want to see how many people this sleeps so this one sleeps up to five for example and here we are going to do our attribute now and so this it needs to be we'll copy that the identifier cms field let's say sleep save that now we're going to show this and we're going to change these identifiers to sleep okay so might be a weird pulse in the video there was a very weird bug that happened with um webflows publishing so i couldn't test and i thought i did something wrong so it turns out there was a weird bug with the publishing okay so we to recap um we are just working on the drop down for the how many people we sleep so for now we have sleeping five right on this this particular property so i want to have it here right now the cms and so that attribute is set it's set to sleep and then we have our options here you know how many are staying with you two three four five so now obviously in the previous and none of these scripts are going to work but now that we have those set we can see that you know this is not going to work here and so so far this form is working as it should and you'll notice that there is a tag right here too that you can actually clear the filter so right now you can see that you are filtering five and you can clear those out as needed so now we will see we have pets allowed so we'll go ahead and do show pet friendly and so we'll do manatees and then do save and then we're going to do remember correctly here we're going to do the field this is going to be the identifier and then amenities right here so save okay and we can see if oh i can't preview here i got to publish if i did this correctly and we can also test so this is something new that's in fin suites what they did with their attributes recently is you can actually have an actuary support we can check that here because this might not work out because the naming is not the same here so hopefully the publishing is working now so let's double check that friendly okay so there might be a thing that says pets allowed and so we'll check that's allowed here so let's rename that i think it needs to be so i should rename it oh okay loud let's do that so let's republish this and let's see if that is going to work this time around now publishing is not working so let's try this again yeah we can see that never changed so my publish is not working i can unpublish this and then publish correctly again and see if that works this is correctly set up ah here we go all right so back to our test here webflow's having some major issues while i'm filming this video this is really unfortunate just a small outage for the posting the like publishing the websites um so now this does say pets allowed and this is pets allowed so now we can filter you'll see his pet's allowed and this is beach access and that doesn't work and so now we have our filters working for what we're doing and if you also add this query the question mark attribute support true we can also get some support to see fresh boots are working and so i ran a test and looks like everything is working well inside of our site here so so far looks like this is also another great time saver when it comes to developing your sites and trying to get some more advanced interactions and just creating a better user experience for what you're building either for a client or for a product yourself whatever your whatever you're trying to do but okay there's a quick little overview of what they added this is that was probably my favorite feature here there's definitely more maybe i can do a video going over them um here in a little bit but this was the one that had an immediate use to me and i can already throw inside of a project and i imagine have some great use for y'all too to speed up some of the things that you're doing if you're already using client first and their attributes so have have fun building and hopefully enjoy this video

Channel: Gamma Design Co

Views: 9,998

Keywords: webflow, relume, portfolio design, how to design a website, website design process, website process, webflow development, how to develop in webflow, how to use webflow, webflow tutorial, relume figma, client first, what is relume, develop website fast, custom website, web design, web design process, josiah duenes, finsweet attributes, webflow cms, attributes, dynamic webflow cms, advanced webflow features, relume components, building sites on webflow faster

Id: wk_S2D2EaEE

Length: 11min 13sec (673 seconds)

Published: Mon Jun 06 2022