Top 3 Tricks for Collection Lists in Webflow

what's up youtube welcome back to the channel for webflow pros in today's video i'm going to show three top tricks for a collection list inside webflow so let's dive right in we'll split cms items into categories using only two collection lists we'll split cms nav links into drop downs using only one collection list will automatically hide an entire event section when the events have ended and finally we'll use an option field to select item styles without using conditional visibility for this first example we want to split these items into different categories but if we're using collection lists elsewhere on the page we'll likely exceed that 20 list per page limit so to solve this we're going to need to basically create a collection for our categories and then we'll just add all those categories in then in the settings of the main items cms we'll need to go here and add a reference field and we'll title it choose a category and then let's link it to the categories collection and let's go ahead and apply a category to each item and then next we'll add a collection list onto the page and let's link it to the categories collection we'll select the item and give it a specific class of tr contain needs to have that class and then we'll add any heading inside the item and get the text from the category name and we need to give the heading a specific class of tr title then we'll drag a div underneath the title and give it a class of tr dash list so inside the tr contain we have the tr title and the tr list now let's add another collection list under the first one and let's set its source to the main items we'll give the wrapper a class of tr wrap let's give the list of class of tr dash list and then let's give the item a class of tr dash item let's paste our card design inside the item and then we'll go ahead and set the desired display settings on the actual list which will affect the list inside the first collection as well and then next we'll drag basically a paragraph text inside the card and let's go ahead and get the text from the category name and we need to give this a class of tr dash category so our code is basically going to find all the category text right here that are inside the tr-wrap it's also going to find all the tr titles that are inside the tr contain and then if the text content of the two matches it will add the item inside the corresponding list so we can set the tr category to display none to hide it from the page we can also get the tr wrap and basically set that to display none as well because we won't need to actually see that part on the page so then i'll paste this code link in the description of this video but let's copy it and let's paste it inside the closing body tag section under our page settings and then let's just save and publish the site to see our changes all the items have been split into the corresponding categories and we've only had to use two collection lists to do this so if we actually want to change the order that these items are showing up we can select the tr wrap and set its sorting order to anything we want in this case we'll sort the items alphabetically by title so basically on the live site what we should see is the items will all appear in alphabetical order under each category so we scroll through each category and you'll notice that each item inside the categories are sorted alphabetically let's look at another example of how we can use this in this case we want to have a static number of main links but a dynamic number of sub links so first let's set the parent link class to tr contain and let's set the text inside to a class of tr title now let's find the div inside the contain where we want our sub links to be added and give it a class of tr dash list next let's create a collection for our sub links these will be cms links to cms pages so we'll add a reference field and let's link it to the basically we're going to link it to the page collection so they'll be able to select one of the pages to select a drop down for each sub link goes under let's add an option field and let's title it category and the choices inside our option field need to exactly match the text of our main nav links then we can basically save this collection and add our sub links in now let's basically add a collection list onto the page inside a symbol that way we can place it on every page of the site um we'll set its source basically to the nav links collection and we'll give the wrapper basically it needs a class of tr wrap the list again we'll have a class of tr dash list in the item we're going to need to give a class of tr dash item now let's paste our cards inside the item and we'll pull the link basically from the selected collection page and let's also get the text from the page name and then we'll need to drag paragraph text inside the item and let's get the text basically from that option field so we know which drop down it goes under give it a class of tr dash category and we can set its display to none again we don't actually need to see it and we can publish basically and let's try and check this out on the live site so each drop down has some css cms nav links under it based on the option field that was selected we can set the tr wrap also to display none we don't need to see it to provide control over the sorting order of the links let's add a number field in here in the cms we can title it sorting order and allow decimals basically we want to do that so that new items can be added in between existing items without having to renumber all of them and these will be sorted from smallest to largest number let's go ahead and just save this and we need to apply a number to each one of these links all right so with the wrapper selected let's add a sort order based on that number field and sort it from smallest to largest number so the numbers can be applied infinitely and let's go back to the publish site we'll notice that each one of the sub-links are appearing from smallest to largest number within each drop down so they're being sorted in this example we'll hide an event when it's over and we'll hide the entire section when there's no events let's start by adding a date field and let's title it start day we'll need to add another date field and call it end day and we'll make these required and let's save our changes and let's go back over to the page and limit the collection list to only show three items at a time and apply a sort order to the start date from oldest to newest so the events show up in chronological order then we'll apply a filter to the end date and set it to basically after or equal to zero days um in the past and let's save so then from there now if we move the last day of one of our events from today move it to yesterday um now it shouldn't show up because it's in the past so we're only going to see events that are happening either today or sometime in the future if we want the entire event section to disappear when no events are available we'll need to add this code that i'll leave in the video description and we'll just copy it and need to paste it inside the closing body tag section and then all we need to do is give the item basically a class of cms item again no capital letters no spaces and then we'll give the section a class of cms cms dash section and now let's um let's archive our events and just to test it out see if it works so if we archive these and then we can save let's go over to the publish site so now this entire section basically doesn't appear because we have no events in this section in this last example what we want to do is basically style all these collection items based on a drop down field in the cms so if we go over to our collection and we look at all these items which are called sections uh we need to add an option field and we'll call it select style so basically the client will be able to select the style all of these need to have no capital letters no spaces so we'll have image that or text only image dash only and then reverse dash order save the field will be optional and then we need to apply one of these styles to each one of the items so we'll make sure to give each one of these items a different style just to test it out all right and we can save that all right so now we need a way to know what the style that was selected was so if we drag an embed onto the page and just add a div in here then we're going to give that div a class and then we're going to set the class equal to a dynamic field called select style so whatever that class is that style they selected text only image only it's going to pull up now we need to apply a class to the parent called reverse if the class inside the div is reverse order just going to use flexbox to switch the order so we can actually basically use the wizardry builder jquery builder that i created we need this to happen on page load and our target class is basically going to be this reverse dash order so we're looking for that class inside the div that's in the cms drop down um it's inside this div so we'll get the parent which is the entire item of that and then we want to add a class to that parent the class we want to add is the one we created in webflow called reverse so we can just copy all this and come back over to our page settings paste it in the closing body tag page section there and save and then let's just publish and test it out on the live site so only one of them has that class or reverse order so you'll see only that middle one is reversed and the other two are still normal um so now let's take this a step further we know that we also have a class in there i'm basically for i want to say image only and text only so this is our text only if we add that class um to this we're centering aligning it we're adding some radius extra padding changing the flex box and then we're just hiding the image so basically this time instead of adding the class to the parent which is the whole item we have these two divs inside that we need to add this class of text only to so this one we're basically on page load again we're looking for a class of text only any item that has that class of text only we're going to grab the container then we're looking for a child inside the container which is the item media this time and we want to add a class to it of text only and that's basically just going to hide it now if we add another one here um this time we want to target the um the copy block here so we're going to make target that child copy block and we still want to add the same class of text only and we're basically going to use that combo class in webflow to style it however we want and we'll paste this in here really the advantage of this is it helps with page load time because you're not having to hide entire blocks of content with conditional visibility um you're just changing the style of them by adding classes and you're not having two sets of each headings inside so let's refresh all right so now we basically have regular set up a reverse and a text only block right here um and then added those classes for us so we have one more to do which is the image only basically we want to add that class of image only to this and then we want to add the class of image only to the photo as well and that will make it full width and we can adjust that class on different breakpoints too to style each one responsively independently in our jquery builder we're looking for a class of image only that's inside of that custom embed we're going to grab the parent of that which is the container and then we're going to grab the child and then we're going to set those children to have a combo class of image only so let's go ahead and copy that and let's paste it inside our closing body tag section just add it as another line of code and let's save and we'll remove those classes again um and then we're going to go ahead and publish and check it out on the live site so if we refresh now we have a full width image we have a reversed order and then we have a text only block so the client can come back and change these at any time just from that drop down so if they go to this one and we just don't select an option that's going to change it from the reverse style back to the normal style so the order will will just switch like that so we can set any of these orders styles using the drop down i hope you've enjoyed this video in next week's video i'm going to do a web flow development review of two to three projects so i'll look through them and explain what was done well what could be improved and give some tips for how to improve that if you're interested in submitting your project for next week's video go ahead and follow me on instagram at tim rix i'll put the link in the description and then send me a dm of your webflow share link if your project is selected i'll be sure to reply back and message you before the video next week i'll catch you in the next video goodbye

Channel: Timothy Ricks

Views: 8,254

Keywords: webflow, how to, tutorial, lesson, cms, collection, item, list, wrapper, 20 lists limit, nested, five items per list, limit, limitation, javascript, jquery, custom code, solution, style, hacks, tricks, tips

Id: xZVDzO6ZLxc

Length: 15min 43sec (943 seconds)

Published: Thu Mar 11 2021