How to use CMS Nest in 8 min - Finsweet Attributes

so nested collection lists in webflow limit us to five items within that nested collection you can see here I have some categories for blog posts and it's only showing five but if I come to my CMS and I go to my blog posts this post why we love let flow why we love webflow and you should too actually has one two three four five six seven eight categories and we want to show those all and today I'm going to show you how to do that using fin Suites attributes CMS Nest solution hey there web Bae alright let's start from the docs come down here step number one is to copy the script into the head of our page so I'm going to press this copy script button come back to webflow and I'm working on the home page here so I'm going to drop it right there inside the head tag boom there we got it save that and let's proceed to step two step two is implementing webflow and now we have to start applying some attributes in styling our page how they tell us to so the very first one right here list I want this collection list to have the Nexus nested collection list and so they give us an attribute here with the value of list and in their example they say you have one that they are calling their parent list which in our case is going to be blog posts and then the child list which will be categories and there's an important note here that in the collection item it's required to have a link that's connected to the CMS template page for that item and this needs to be either the wrapper for the whole thing or as the first list I'm going to use it as a wrapper for the whole thing but this is important I wanted to read the whole thing just to make sure that you're not having like a read more button at the bottom so that's one place you could mess this up but I'll copy that attribute and come back to our collection list the parent collection list in this case and we're going to add a custom attribute I'm going to zoom in plug that name in and this is called list and then zoom out and now we need to drop our link Block in there you can see I have a collection item and then the heading the paragraph and our nested collection list what I'm going to do is just drag a link block right in here and I'm going to Nest heading 2 in there and the paragraph and then this link block I want it to not look ugly so I'm going to do that and then I don't know select some sure why not uh so that's good and we need to make sure it links to the current blog post so boom zooming in that is now linking to the current blog post which is going to go to our blog post template page correct all right so I think that's enough to satisfy step number two here or step three whatever one it is and then it's got a sub step Nest collection here I want this dip block to be where the nested collection goes so let's open that this div will be removed and replaced with the child collection list this is where the child collections will be added inside the parent and it must include the CMS item of the list element and then we also add an identifier to match this element to a collection so we need two attributes and we need a new element so CMS Nest element and let's go ahead let's see so we need to drop in a div block it said so I'm going to drop in an empty div right here and this is the one that's going to get the attributes so first attribute is CMS Nest element and I think it was Nest Target yeah we'll just copy that and come back here and paste and so that is applied and then we need to add an identifier as well so I'll copy that come here and my identifier and then we'll just call this categories like that okay and I think that completes this step so we'll close that up and collection to Nest I want this collection list to be nested to be the nested collection so this is our child uh this collection list can be anywhere on the page it will be removed from its location and added to the CMS item of the parent list we'll replace the target div that we just made do not set it display to none uh okay and I think it needs a link as well let's make sure in the collection item it is required to have a link that is connected to the CMS template page see screenshot graphic below it is not required for the link to be clickable or visible to the user the only requirement is that we have that link so I'm going to copy this attribute but you can see I have this nested collection here but we want to pull it out of the out of the item so let's go ahead and we want to unlink this but it's locked so I need to remove the text from the tag first and now I can say none I'm just doing this so that I can keep the styling and we'll drag it out now to outside of our page actually we can have it inside of the page but we want it as a sibling of section but we'll have it down here below so let's actually tie this back into our categories and we will update our text to be the category name just like that and so now we have all of our categories and we need to add our attribute to the list so I'm coming down here zoom in for you attribute and what was the attribute value is Nest source so let's grab that and put Nest Source there and there's another attribute that we have to add our identifier to again remember it was categories so I'm going to copy that add another attribute and say categories okay all right so it looks like I forgot to add the link block to the categories so we'll go ahead and grab the link block here and Chuck it it there and I want the tag to be right under it and we will send it to the current category Zoom back out there I think we're done with this step now collection on template I have to add this collection list on the CMS template page of the primary content list which we were also calling the parent so in our case the blog page so required step do not miss it look at the visual closely watch the video walk through uh this child collection list will be hidden on the CMS template page of your parent collection list so in this case blog posts like I said is our parent and it's just getting it's getting two attributes and I think we need a link on this one too in the collection list it is required to have a link that is connected to the CMS template page see screenshot graphic below so I don't think we need to style this one actually because it's going to be hidden anyways so let's go I'm going now to the blog post template page and I haven't done anything on this page yet but just so we can identify it let's tie our heading or title to it and now we're going to drag that collection list in here and the source we want this to be from categories and notice I'm selecting the blog post Fields the categories in there this is how CMS is going to know which categories are assigned to which post and it said I needed a link so let's just drag a link Block in there and we will link it to the current category I guess and that goes right in there and we'll get the text the name from there so now we have our categories let me make sure is connected to the CMS template page see screenshot graphic below yep so these are the categories and it goes to the current category so that should be right and I need to apply some attributes to this thing so on the list we'll apply template reference so coming back to our list paste come back to the documentation copy this one paste all right and then we also need to add the categories here so copy that paste and we'll call this categories and zoom out and I don't want to have multi-nested and this caching optimization is just a little nice FYI so let's come back to our home page and publish and see if we got this right all right and there we have our categories populating hey if the video helps be sure to like And subscribe and I'm going to show up two other videos that you might find useful so be sure to check those out and I will see you in the next one bye thank you foreign [Music]

Channel: Web Bae

Views: 10,029

Keywords: nest, cms, webflow, collection, nested

Id: CaGSUqWJgew

Length: 8min 38sec (518 seconds)

Published: Wed Mar 29 2023