Learn it Live - #3

puppy [Music] okay what's up everybody welcome back to uh episode number three of learn it live these episodes have been fun we've been getting deep into the weeds on uh learning about attributes we dove into like client first naming the other day today we're going to learn about this new uh filter select form select element that joe dropped on twitter last week that was super exciting and we've also got a um another filter system to build so joe what is up today what's going on everybody what's up what's up i am ready for this we have a little bit of a different setup with a community build we have that select the new form select that we're talking about and yeah this is uh the learn it live is really exciting i'm i'm also having a really great time doing this yeah and it's kind of fun to see the thing taking shape i think a lot of uh like we've been doing this live stream for january 15th will be a year um i think we got like 46 episodes of the growth stream but we've done like 76 total live streams over the last year here uh and i like this learn it live stuff as much as i've liked anything else because we're going in deep you know and it's like a lot of the stuff we talk about is very theoretical we introduce the products we you know like but that hands-on building is so helpful for people and i think um you know we're gonna see that so so if you're out there watching and you'd like to see us build something if there's something that we've done or built or released in the last year or two if if like there's a product that you're like i'd really would like to see it this or a deep dive on that like this is it where you can let us know actually if you go over to finnsuite.com you can share those ideas with what you'd like to see us focus on but we'd like to do these episodes these learn at live episodes based on stuff you want to learn so feel free to share that and also share a thought in the comments say what's up in the comments because we're going to go ahead and start ripping through uh some of these let's see who's in the comments here real quick let me see if i can go to the oop you know what i need to go to this view actually all right let's do this real quick uh let's see who's amped oh snap who's amped this guy eric daly there we go so what's up eric peter dimitrov in the house the time has come hello everyone for sure kane is hanging with us joe is saying uh kind of overviewing what we're giving there michael rose is in the house eve kaiser what's up eve uh daniel's here daniel uh shout out to daniel we're gonna highlight this on the growth show next week but daniel just landed like a 50 000 plus dollar website um and he gave us a shout out for some of the growth stuff he's been hanging us with us on the growth episode and um we love seeing those stories from the community and so yeah we'll uh we'll share a little bit more on that when we can let's see uh michael collins in the house gabe perez what's up uh babis is here corey richard what's going on let's uh joe what do we have for today talk about that filter select right like you had this tweet last week and um you know things got a little wild and so we released a little product talk about something yes things did get a little wild i i had my most popular and i'd say most successful tweet of all time or a series of tweets of all time i first hinted that we were going to do something with form selects as you know form selects are really hard to style and i hinted at being able to style them got a lot of love so i said all right let's uh let's see if we can get over 100 likes and if we get over 100 likes then we can go and release this and it got over 100 likes i think in about an hour hour and a half so right away we were prepping to go and launch this and we went ahead and launched custom form selects and this is the ability to use a webflow drop-down component as a native form select so this gives you a lot of styling freedom it gives you a lot of design freedom and people are loving it it works really well it works with cms it works with static it's super powerful so we'll be going over that today we're going over a full build of this yeah um and i th yeah here's the the the url here um you can go over to attributes and uh it's in there in the directory uh you can find that so yeah it's cool um love to see the twitter engagement from the community i think we'll start doing stuff like that moving forward for different kinds of uh releases and stuff i think we have a little sneak peek potentially drop in as a christmas present so we'll talk to y'all about some of that too um so where do we want to start joe do you want to just dump right into this form select thing or yes let's go right into the form select absolutely nice okay so i am here on my screen and let's let's open up the docs first before we actually get into this let's open up the documentation let's make sure that we understand what we're about to do this is going to be custom form select now custom form select is going to just require one attribute drop down we're going to build this webflow drop down we're going to nest a select element in it and we're also going to look at these extra attributes so we're going to go through all of this including the states so let's get right into it this is a great walkthrough first i'm going to add a webflow drop down and components this is the drop down component now note this is not part of the form components it's a drop down it's outside of the form and i'm not going to give too many styles here let's just see what we have inside of this i'll keep just one drop down link and i'm going to call this drop-down link uh template can be called whatever you want it has no difference what the name is and inside this drop down inside somewhere inside the drop down it can be inside the list it could be inside the toggle doesn't matter we need to have a select element so now i'm going to go and add a form here and you know what i'm going to add a form actually to this outer layer so let's go add the form block the reason we're adding the form block is because in webflow it's required for any form elements to be wrapped inside a form block but i'm just going to go and remove all of this content in here so let's go and drag this drop down right in oh [Music] okay i haven't uh i haven't seen that in a while actually oh and it didn't save the progress huh it did not save the progress so let's try that again maybe a little bit of a different flow i find that that sometimes will fix it so i'm going to go drag this drop down inside this form now delete the elements and now let's get to action so now since this is wrapped in a form i can now go and add form elements in it we need the select element in there and that's why we did this so in this drop-down list i'm going to now go to the form components and i will add a select this select let's call it urimar let's do colleen let's do marcel who is behind the scenes waiting for a build and i'll go and add myself here we have people's names great and we have select one so if we just open this up we're not published we don't have any attributes we have this select element in here and this is very difficult to style with some css with some javascript we can make this look a little bit better but really selects are very very inflexible when we are going to style them so now i'm going to connect the select element with this drop down and it's just going to be with one attribute and that attribute in here is drop down so i will go and copy this element let me go to step one first i i frequently forget this in the live build step one copy this into the project so let's do that first into the head here we're in the head now we will be able to recognize these so we'll add this to the drop-down element and we can see from the visual here it's on this outer drop-down element so i will do that exact same thing here i'll go up one layer to the drop down let's just see this inside navigator here and i'll go add a custom attribute and that's going to be the drop down and as we see in the docs we've already done this step but we have a nested select there are no attributes needed in this we just need to select somewhere nested inside of here and now with this we are now going to see a drop down that has the same options as our select let's go publish this and we will go see it live and you should know that when we are playing with the drop down when we are selecting things from the drop down it's actually going to be selecting things from the select so you can actually use this in a form and the select will submit but the drop down will be the front end user interface so let's go open this up and see it work i see the select one which is already a different piece of text we're on the right track and there we go we have rymar we have colleen we have marcel and we have joe so if i were to select reimar we have reimar selected and look at this select we can hide this and we will hide this but i want to show it to you so you can see it's actually being selected so as a user i can use this drop down and then us as web developers we can actually submit this through the form or use it for cms filter or use it for cms select or use it with cms sort it integrates with everything so there we go we have just created a dynamic populated drop down excellent now let's make this a really nice user experience i'm going to go and hide this we do not need it visible and i'll go and add some of these really cool features we have label here so maybe we have two pieces of text in the the toggle here right we have this country example let me go do the same thing with this let's go and add names let's add a little bit of color to this i feel like i have to give a name to these classes or i'll be shunned by the community that's right you should just call it drop down 58 just for fun [Laughter] nice okay let's uh let's do this do okay we have a little bit of a background color yes and so what do you walk me through what's happening here you just drop the text block inside of here into the drop down yep i am showing you how you can have multiple pieces of text inside this drop down toggle and the correct text is going to update so maybe we want the point of this is to create a very visual component so maybe we want a very visual component just like we have here right we don't want to say select a country we want country with select because maybe we have six of these or ten of these and we don't want every single one to say select a country select a name select an age so we can have the title here and the correct information will update here so this preview is showing the label text option so i'll go copy this this is this is saying hey this is going to be the dynamic text that's updating here that's exactly what we're telling attributes and we'll give this a label here and now this drop-down text is going to be the one that updates so let's give a quick check to this we put the select as hidden we shouldn't be seeing this the the select element in here right it's it's hidden and now we have this new text here that's going to serve as uh our title for this drop down and now we go and check this we will see it working we have our names and we have the correct text updating so the label is saying this is dynamic this is what we want the label of this toggle to be excellent now let's keep going through this the the list of options here so we have a full full understanding option reset this one is great this one's going to optionally create a new piece of a new option that says reset or whatever you want instead of select an option i always thought it was really weird that when i go here i have the ability to say select one from a ux perspective somebody who doesn't know the web this feels weird to me let's zoom in here so we can see what's going on right this is not select one this is essentially resetting the option it's setting it to value zero so let's go and create a different message for the user here let's now go in the docs here we're going to apply this attribute to another link block in here reset selection and it's going to be option reset and if you missed what's happening if you're joining us here and you're you're not familiar with like applying custom attributes i would uh suggest you go back to the docs on the attribute stuff and re-watch the deep dive we did on the attributes and how all this stuff works if you're watching this in the future and maybe you're just interested in this element but you're not sure what's happening with some of these attributes or what custom attributes are go back to the live stream we did the other day on the attributes deep dive where we just explain everything about how attributes work and what's happening behind the scenes here option reset there we go and i believe that's what it was option reset yes okay so now when something is selected instead of seeing the select one we're going to see our reset selection text let's go put a publish through and see that work and i will guess that it's published there we go reset selections so now i can open this up and pick one and reset selection but maybe i don't want to see this right away right when there's nothing selected i don't want to see reset selections so the reset option works really well with our final step here our final attribute or our yeah our option hide initial option if there is nothing selected we want to hide the initial this is also a really nice ux right if i have nothing selected i don't want to reset i don't want to select one as an option i just want to see the actual values that can be selected so i'll go add this as an option to the drop-down list notice how everything else was an element this is an option hide initial true so i'll go and apply this to the drop down element there we go and let's give this a true and save it so now i think this is the top ux where we have this reset button we have the height initial and now the user is only seeing what we want the user to select and let's go see that work here we go so we just see the names right if i click away i don't have to select anything but i don't row railroad ryamar colleen and i can reset my selections so this is in my opinion a very seamless process and i would say even a better experience than the select element itself because we have these really nice features of resetting the selections and not showing select an option here and before we close up on this there is one more piece i want to go over this is going to make everything accessible and this is going to let you apply states first works with webflow interactions if you want to apply webflow interactions totally works on the drop down element but we're going to apply the active state and the focused state so this is going to use webflow's current state and webflow's focused state so let's go do that i'm going to temporarily make this current anytime you want to style webflow's current state you have to set the drop-down link or whatever class you're targeting to the current page you see how it has gone to the natural current state and then we get this really nice selection here after we give it a class let's do drop down link and now we get current here we have the current state and i can go and style this current state so let's just give it a little bit of a different background so we can see what's going on here yeah let's do this and let's give a white right here great i'm also going to select the focused state so if we go and say focused i'm actually going to first remove current so now we don't see current anymore when we click away open this drop down no more current and now we can go and edit the focused state and the focus state i can go just for example purposes i'll go and put a border here great we try to imp we try to integrate with webflow's native functionality as much as possible and this is exactly why we do this we don't want to create unnecessary attributes or unnecessary classes to add to your build we just want you to work inside webflow and that's exactly what this current and focus state is so if we were to go and publish this we're going to see both of those in action and the focus state i believe we have to get with keyboard there we go and we can see it you can see as i'm selecting this and with keyboard you this is the reason you do this this focus state and you can see active working just fine and that's a full overview we just went through every option every attribute that has to do with this select so as you can see very powerful very flexible we didn't design this but let your mind go wild with designs here with layouts it's all possible if you can design it with the drop-down it can work for custom form select yeah yeah i was going to say that's a important point of the you know like people watching this are like oh yeah but it's ugly you know but that doesn't matter right like think about now from here you could do whatever you want with it because it's now native drop down and web flow which again you can style any way you want um so yeah supe super cool little hack there for anybody who's uh using selects in webflow and has always been frustrated uh with how those forms are designed or not being able to control the aesthetics of that element in your forms uh kind of sucks when you build this beautiful custom form and then you have this kind of clunky you know select element in there that you you can't make match the rest of it so this is definitely a value add there uh okay um i'm not seeing too many questions or anything on that if you all have questions in the comments go ahead and leave those i think at this point marcel are you ready in the background there we could probably get uh marcel ready um to bring on let's see who's saying this is sweet caleb saying this is sweet and that's effing sweet gotta get it right caleb [Laughter] uh and then let's go ahead and bring in marcel here what's up marcel hey guys what's going on hey marcel how's it going good to be here it's nice uh to be part of the heaven sweet team for a sweet few minutes yeah nice marcel's been a long time member of our community he is a clone comp veteran uh constantly coming to events and and all that so yeah marcel it's really nice to have you here it's an honor i have to say it's super cool to be able to meet you guys yeah thank you we always love connecting with folks the community and i think um yeah i i love the idea of bringing people in and doing this kind of interactive stuff so um in the in the in the comments in the crowd if you're watching this uh just like we said about recommendations before if you've got like a a project thing or if you want to come in and show something off or um we've even talked about experimenting with like live call-in shows where we just have a topic and then we just let people call in and jump in for a couple minutes share their thoughts and you know we riff on that topic for a minute or two and then we jump out or we answer a question so just let us know anything you might want to see as we go through this uh today we're going to jump into a filter system that marcel has on a site here he sent that over to joe and like we've done the last couple weeks joe's going to go in and kind of set up and look at these filters here so i'll leave that in your hands and now joe cool okay so let's look at what we're building first and then we'll get into building it we are filtering this list this is a cms dynamic list it has some very cool custom css to create this layout but it is a cms list and we need to filter by three multi-reference lists we're going to be filtering by floor space by weight and by financing options all three of these are multi-reference so as we know as web flow developers this poses a major problem for us we can only have one nested collection per list and we may run into this five item max it actually each of these we only have five macs but if let's say a client wants to add a sixth one we could have a serious problem so we're going to be cms nesting all three of these into this list and then go and create our filters so before we go and do that let's look at the docs let's see what we're building we're on the cms nest docs and in here we're going to do this we're going to apply an attribute to the list we're going to apply an attribute to the nested collection the nested collection at the bottom of the page and on the template page and we'll be doing this three times for each collection list and then once we have that in there once we are visible with those we're going to go and create our cms filter so let's start with nest and let's get into this building i'm a little bit of horizontal scroll but should not matter for this okay so as we know cms list before we jump in let's go and add the scripts let's just add the nest script and the filter script right away i'm going to do this with the fin suite extension so i'll go in components in attributes we have cms snitch and for anyone who's interested there that fensweed.com extensions just put that on the uh on the show there you're not familiar with that you know it's a super useful tool for any of this building and workflow stuff we are working in attributes to towards not making you go to the docks i think we'll always have the docks the docks will always be very valuable but we want to get to a point where you don't need to go to them and in this walkthrough i'm going to try to not go in the docks so we have both of our scripts there let's just confirm will show people who are new to the attribute system that we have in fact added these to the page great now let's start adding our nest attributes the first thing we're going to do is go and add an attribute here on the list so i'll call this the fs cms nest element cms nest element this will be the list great now inside the list first thing i have to confirm is that we have a link to the page of each item and there we go i see it right here layout call to the page current model so check this step is needed it's already there in the project now i'm going to add a blank div for each of our nested lists we're going to nest floor space we're going to nest weight and we're going to nest financing options so i need to have elements here that will accept that will be the place where we append this information so i'm going to add a div block here and we'll call this fs cms nest this is going to be collection i'm going to copy this because we'll be using it a lot and now i have to create an identifier name so we have floor space weight and financing options we need all three of those this will be floor space now going to duplicate this duplicate duplicate this one is going to be weight and this one is going to be financing so just to confirm look at this we have financing we have weight and we have floor space floor space great okay now we need to go and create dynamic lists on the bottom of this page it could be anywhere on the page i like to put it on the bottom and we're going to add a list of each one of these items floor space weight and financing options so let's go and do that exactly i will close everything up here and i'm going to go and add my first list and i'll just go ahead and duplicate this i have three of them now on the page list lists lists i want to nest all three of these collection lists inside of the item this one will be for our floor space which is our meters squared filter this one is going to be for our weight weight filter and this one is our financing options nice okay now each one of these needs a text link and i'm going to copy this text link into each one of these so now each one of these lists has a text link let's go and appen that's let's go and bind these to the right fields we have the name we have the current page and the name and then down here we have the current page and the name there we go so we have 100 meters squared all the way here we have our weight and we have this and notice how this matches exactly what's up here we just did the exact same thing here we have our floor space list we have our wait list and we have our financing options list any questions from the crowd should i make a stop and answer no there's no questions i did kind of want to clarify one thing again if you haven't watched how these attributes work or if you haven't used one of the cms uh like library features in the past where essentially you got to inject this content into the page and that's what joe just did is putting those lists there and then the next step is he's going to show you how that pulls in to do those nest things and so some people you know if you're watching and you haven't seen that process before you're like yeah but i don't want the list at the bottom of the page you know i want them in here and so like just part of the process you know next step we'll explain exactly how that plugs in and then just like we did with the filter select we'll show you how you can remove that from the page and so the final product is exactly what you need and then plays nice with the filters exactly okay so let's go and continue with this we need to apply an attribute to link these collection lists to these empty lists so we need to have the same exact attribute that we see here on each of these lists the floor space needs the same identifier the weight needs the same identifier and the financing needs the same identifier so let's go do that first we have the floor space let's go do that i'm on the list element and i can go collection and this is floor space joe can i ask a question here on this collection list i see you're not naming any of these lists does it matter if folks name these lists does it matter if they give them classes is should they just be empty lists like what what's what's the just on that i would say no classes there is absolutely no reason to class these we're going to not hide everything first everything is going to be visible but at the end we're going to hide it and you'll see that it really doesn't matter what this looks like or what this feels like um oh actually hold on i'm let me let me explain that this doesn't need a class this div block does not need a class this doesn't need a class but we're probably going to apply a class if we want it visible in marcel's example this content is not visible in the list so we don't care what it looks like it's going to be hidden we're going to hide it but if you're showing this content if this is going to be part of the visible page then we do need classes because we need to style this got it so i'm glad you brought that up we'll actually look at an example of this before we go and hide this content great so theoretically what i was trying to get to is if i did style something here when that gets injected in the nested list will it then maintain that styling or you know like i guess i'm just wondering if somebody's seeing this you know like yeah getting to to some of those questions there around how that looks sure of course okay we'll look at that let's go and copy this we have our floor space in there let's now go and add our weight so remember this is the same attribute that we applied to that blank div inside the item and this is going to be our weight and now one more we have our financing options let's go in here for by dancing for now no styles we will look at that at the next step okay so we're done with this page we have one more important step and we're seeing that people sometimes forget this step so i want to make it extra clear what we're about to do we're going to go on the cms template page of the primary content list so we're going to our these are the models right we're going to the models template page and we're going to do the same thing that we just did here let's go and do that i'll go to the models models template and same thing let's go and add these lists i'm also going to create three of them we'll do the same thing the only difference is we need to make sure we select the multi-reference version so we see our models fields with multi-reference we do not want to pick them from this list we want to pick them from our multi-reference list so first we'll do our floor space then we're going to do our weight and then we're going to do our financing options and we'll do the same thing here with the link block now we talked about styles before this is where styles absolutely don't matter you can apply any type of styles to this and they will be completely ignored it has absolutely no impact on anything so we're going to do the same thing here with the copying of the page and the text you may be thinking why didn't we just copy it from the last page we can't copy it from the last page because it needs that very important linked reference whoa did i just zoom out there why is everything tiny now oh did it bump you up to a higher uh break point ah yes it did i'm gonna give a higher breakpoint [Music] [Laughter] [Music] okay back on track we have the page and we have the text so i was saying we can't just copy it from the previous implementation because we need that very special linking we need to make sure that we are linked through the model field so this has to be done just like i'm doing right now and we'll go back to this let's choose a page and the text here i'll give one zoom out maybe another zoom out okay okay and now let's apply these same attributes so i'm going to do the same thing with fs cms nest this is going to be the collection and let's go and do the floor space we're down on the weight and here i'm going to do weight on this list and then here on this list we're going to do financing great okay so we are ready on this page this all looks good let's now go back to our official page and let's just see this working we don't want to start to get into styling or filtering just yet we just want to confirm that everything here is going to nest properly so what we should see is each one of these populated with the correct multi-reference fields from our list and they're actually going to be pulled right from here so they're going to look exactly like this so let's go and confirm this we'll go to the page i will load oh nice little page open there and there we go that was nice page open and look at this we have our nested items or nested lists i should say the entire list each one of the three lists is going to paste itself or append itself inside the item and it's going to show the correct weight the correct floor space and the correct financing options excellent now let's go and see what this styling means i'm not going anywhere let's go here and this is just going to be for display purposes let's do link a we're going to call this one link b and we're going to call this one link c i'm going to apply this terribly ugly red color i'm going to apply this blue and this green you can also apply to the list let's actually do that just so we see it list a and i'm going to make them like this with the ability to wrap and i'm going to apply this great so we're actually going to see these first items these floor spaces in a flex horizontal and we're going to see all of these append right into their respective div blocks so i'll publish and we'll see it work any questions from the cloud from the crowd jeremy was asking something but i think we might want to wait until we get through the break to address that um okay i think this would be good to just see how those styles translate into the to the nesting there so there we go we have our colors we have our flexing let's see a one with a longer list there we go so it wraps so it's going to take those items from the bottom the list from the bottom and actually put them into their places here yeah this makes sense right now joe's just got these three divs kind of like stacked on top of each other but you know with the one he wrapped maybe that goes on top and that lists the categories and then you got a little flag at the bottom that you design real nice to be like an icon of something you know and now like you've got this highlighted icon for your blog post that you know and all those elements now you know like none of this is possible natively in webflow without these nesting attributes and then to be able to filter on top of that so like step one is like let's get these things set up and now the next step will be kind of filtering through that and so just the ability to add that functionality i know so much on these big you know multi-reference sites with lots of categories and lots of options like that that's that stuff becomes important to be able to do exactly and that's exactly what we'll do next we'll set this up with filter we are done with the nest implementation no further steps needed so you can see we have all these floor space options the weight options and the financing options now we need to create a link a connection between these filters and these nested items before so let's can we answer let's let's answer um jeremy's question here for the collection list at the bottom can you just use text instead of a link on the page with the filter if you don't want the link available to click jeremy you can uh but you need to have the link somewhere so let's let's do a test of this jeremy just so we can make sure that this is exactly what you're talking about i'm going to create this text here and this text is going to be the name i'm going to hide the link the link must be here if i remove the link like this it's broken it doesn't work we need the link but just like every other item here it does not need to be visible so i can display noneness and we'll leave it like that just to confirm that it is working so i'll push a publish through let's continue with the filter and we will just see this working as expected yeah yeah i think that kind of clarifies it clarifies it and alex even said there as long as the items have a link inside of it hidden or not it'll work so to answer the question that jeremy was asking originally it does need to be a link but you can add other elements in there the link is what connects that and kind of what's telling the attributes to connect it to that thing that's down there you know so it's like hey this is an object you need to inject up here or append up here so yeah you do need the link to talk to it but it doesn't have to be visible exactly and you can see on the published page we now lost the red the link was hidden the link c we have the plain text here you cannot click on this perfect okay now let's get into filtering so we already copied our script from the extension beforehand now let's go start to apply our attributes the first thing i like to do is hit the list item so this will be an fs cms filter element and i'll copy that for later use this is the list this is being applied to the models list so let's go save that let's apply our filters attribute the filters attribute will be something that contains all of our filters and this happens on the form element so you can see we have our form settings this is a native webflow form and we're going to go and apply this as our filters element nice so just a quick check here we have the list we have the filters now we get into the field identifiers so let's go do that we're going to create this field identifier from here and then we're going to apply the same identifier to the elements down here so we'll start up here we will call this our fs cms filter field copy that for future use this will be our floor amps floor space and notice how this is applied to the label this is a check box so marcel has hidden this check box it's not visible on the page but it is a check box we need it to be a checkbox element okay and it's applied to the label element and because it's cms it gets applied everywhere so every single one of these has the floor space that's exactly what we wanted and we could do the same thing here with the weight so i'll paste that the fs cms filter field let's do the weight here and we'll do the same thing here with financing nice we're now going to do this same thing with the nested collections below let's go and do it i'll do it right here to the link i'm going to call this the field and this is going to be the focus let's do it here to the weight and let's do this we can do it on the text block it doesn't need to be on the link block the link block is only required for the nesting so we'll do it right here on the text block and this one will be fi dancing great so now let's go push a publish through and if everything went correctly that should work four minutes i think we just set up filter in four minutes nice all right okay reloading the page here we see all of our our nested nested items as needed and now we click on this and we're going to see this work i'll zoom out a little bit so we can see the filters with the results in the same view so we can see our 0 to 20 our 0 to 20. we can unselect this and do a 35 to 50 we see our 35s to 50s we can add this to the mix there we go we can do our weight 5 to 10 working we can do our financing options lease buy add multiple filters here and it all works you can see that this is working exactly as intended pretty cool guys nice nice yeah any any questions marcel there no it's it's just really cool to see how it works and like you say it's four minutes time and that's it you know yeah it is a bit of work to put in all these fields and also to link it and to make sure you don't lose track of what you're doing but uh yeah i mean it's uh it's uh sweet i guess yeah and one of the um things joe was saying when we uh when he was looking at the back end of this project was like i just set it up in like seven minutes he said you know and now joe's like a pro at setting these up because he's been doing a bunch of them but um here i think the full work was you know kind of explaining what was actually happening once you get good at this once you figure this out you know once you've done it a couple times you really can kind of fly through these installs so yeah that is the and also of course if you already want these fields these fields visible then you already have them there so that also makes it a lot less work because this was like kind of stripped down in a way yeah exactly and you know what let's actually go and hide these right marcel's original design didn't have these so let's make sure we respect that and i'm going to put all these div blocks inside of a display none wrapper so now we're going to get marcel's original design no visible tags we're not going to see it on the bottom of the page and the filtering will work as expected and joe one more quick question about styling there on those three divs you may want to name those just to know what they are will that affect anything like those three divs you just hid where those elements are if i just wanted to write a class name in there to have that i mean obviously you're adding extra classes but maybe for just posterity a year from now when i come back into this site and i'm like what's this empty div here somebody might want to just delete an empty div right like would you recommend naming that like how how was the best way to address that you could sure if you want to to make it extra clear to the next person coming in that that's a good idea to name it with a class uh i never have done that just because i know that i don't need it it's not needed but yeah i think it's it's absolutely not a problem to give that a class just to be extra clear right so now we see hidden and you can see everything is still working nice great nice yeah so the styling on those nested lists only matters if you're trying to display that stuff um you just need to tell attributes what what is what and give it the elements so that it can you know obviously use those as references to filter against so nice yeah super nice all right uh we do have this question here from melissa she's saying i tried nesting recently and i realized that some of my cms items were duplicated on the template page and this problem goes away once i remove the nest codes is it a cms issue hmm follows duplicate it on the main page not the template page sorry so let's read that in context with that correction i tried nesting it recently i realized that some of my cms items were duplicated on the main page and this problem goes away once i remove the nest code is it a cms issue i'd have to see a read-only and a published page to really look at that i i actually cannot visualize that issue yeah so melissa go if you come into the sweet js slack channel uh go ahead and post a read only post a publish link and we will take a look at it okay uh marcel any questions no it's crystal clear i think it's uh it's been amazing what you guys are doing for the community and uh to push out these products and make it available for everyone and then even go through the lengths of putting it out on youtube and how to implement everything it's just it's brilliant so thank you for all the hard work you're doing and making it available nice yeah thank you marcel really appreciate that nice great okay so yeah we're going to keep doing it you know yeah to drop off there um unless there's anything else so we'll go ahead and thanks again marcel we appreciate you hanging with us uh joe mentioned suitejs.io so i just put that um up on the the board there um if you have any questions melissa um yeah that's that's that's where you should check it out i just put the link up there so sweet js.io uh bring you into the slack channel you can ask questions there i don't see that link in the chat so i just went in and edited it yeah it's not on the chat i got it up on the screen ah yeah okay got it up on the screen for years um okay any other questions from the audience crowd here we're right at about an hour here which is okay with me if we uh if we don't uh but if there's any other questions thoughts you know what we got um joe here or anything else all right joe any other thoughts you'd like to share let's see well i think this tuesday yeah this upcoming tuesday we have a really good stream we have a a year review of everything that we did at finsweep in 2021 and if we get over a certain amount of people we're going to announce the amount of people if it's over a certain amount we're going to have a really big release for client first we have a super juicy update that is going to really give you a lot more power in client first so make it on tuesday and we're going to release something yeah yeah i think uh for sure people should come by the year in review episode is going to be amazing we went through this rundown of like everything we published over the last year and it's kind of wild honestly to think that all that came out over the course of the year and it gets us really excited about what might be coming for next year um so yeah join us tuesday it's gonna be a cool recap stream of kind of everything we've released and done over the last uh 12 months and we'll even probably tease a little bit about what's going into the future um and like joe said we're gonna have if we break you know let's say 100 concurrent viewers i don't know if that's a threshold 100 seems a little maybe a little low but we'll see we'll come up with that we have 90. we had 90 last week i know we're gonna have to we have to push it maybe we got to get to like 150 or something yeah um so we'll come up with that and uh yeah if we break some some numbers there we'll we'll release uh that did you say what it was the release i i almost mentioned it but i didn't want to i don't know should we mention it [Laughter] should we keep them waiting we should yeah maybe we could tell them for hanging out with us it's yeah maybe tell them let's start getting people buzzing about it okay uh well we have a really nice responsive update to client first a lot of people have expressed interest in fluid responsiveness in the client first naming convention in our client first system so if you are a client first user we're going to release something that will turn your website into fluid responsive in minutes actually in seconds that's how fast this thing is so we have it all ready to go and we just need 150 people 120 people i don't know we need a lot of people at our stream on tuesday and we will release it that's right yeah so come hang out with us tuesday i'm sure a lot of people that are hanging with us at this point um are regular tuesday folks but let's spread the word yeah if uh let's let's get that out there so that we can um yeah hype hype that up and maybe get that uh release so okay uh other than that i think let me see if anything's coming in on the comments here [Music] joe has discovered the power of the tease and he's saying i have i have you know the the twitter post it really got me excited so now maybe this is how we do thin sweet releases yeah yeah for sure um melissa chen making my birthday gift there we go yeah if we can get the turnout uh for sure you guys are the best sounds amazing penny hit that like button folks for sure we appreciate everyone hanging with us again it's been a great episode of learn it live uh we'll do this again probably not for a week or two because obviously next week we're getting right into the holidays um the week after people you know doing new year's things and whatnot we've talked about maybe squeezing in a um like a goal setting session but i think that may be you know the first of the year kind of thing that maybe like that first or second week of january um so next week will be our our last i think official live stream for the the year probably um so uh anyway i know you all miss us i know we'll miss you it's been a lot of fun hanging out uh i can't believe we've done 70 this is 77 total streams this year and i can see that number going up considerably next year so uh anyway that is all uh is there a client for a showcase yet no not yet not yet it's in the works um go ahead joe yeah well we we have it ready we're waiting to push publish we we have the part ready where we have the showcased items ready to push but we're still working on the ability to self-submit so you justin would be able to submit your own post it would come to us we'd approve it and it would be posted but yes uh it's very very close it's in our it's in our active workings nice great uh let's see always fun watching joe do these learn it lives gabe for sure eve uh good to see you evie i guess it is hola [Laughter] michael rose thank you uh okay everyone uh shout out have a good weekend we'll catch y'all soon uh see y'all tuesday [Music] hey okay

Channel: Finsweet

Views: 3,331

Keywords: webflow

Id: XXsaIbSXeHk

Length: 60min 35sec (3635 seconds)

Published: Thu Dec 16 2021