(2022) Intro to Attributes - Set up CMS Load

welcome to attributes attributes is a way to add advanced features to your webflow website without code instead of using code we use attributes my name is joe krug ceo and founder of fin suite and we at finsuite have created attributes for you the webflow community this video will walk you through the absolute basics of attributes the core principles of attributes we will review the documentation we'll look at a live example and help you get started with your first attributes implementation this is a great introduction video to those who are brand new to the system let's start by looking at this screen record we copy the script for the solution we want to use then paste it to the head of the page then we apply attributes to elements on the page and here we're applying an attribute to the text element that will display the number of items in the list this right here is the entire process to set up our count list items solution in attributes for any attribute solution we do this we add a script file then we place attributes on elements to add the functionality we have two different types of attributes and understanding the difference between these two will really help you understand the system we have attributes for page elements and we have attributes for options we apply element attributes when we want to define an element on the page for example in our cms filter functionality we add a list element attribute to the collection list that we want to filter it defines what element this is it's the list we apply a filters element attribute to the form that has our filter ui elements it's the filters and then we can apply a reset element attribute to any element to make it a reset all filters button all of these are elements that we're defining on the page we're telling attributes which elements on the page to target which elements are going to carry out this functionality and look how organized this list is everything in cms filter has the functionality key cms filter every one of these is marked as an element and there's a clear identifier to understand which element it is in previous fin suite solutions we used classes for this we assigned a class to an element and then we used that class in the javascript attributes does not rely on classes classes and ids are not used as identifiers anymore instead we use element attributes and that is a core principle of attributes now let's look at option attributes here we see cms filter type easing and duration everything has that same cms filter functionality key and the option tells us which option we're controlling the value is the option that we want so look at this we have cms filter type equals date it's telling attributes that this is a date field this is an option to accept date formats in the filter easing and duration these are options that we all know and love on the web customize these easing options and the amount of time that the transition takes these are options of the cms filter functionality we aren't tagging elements here we are setting options and that is a again a core part of attributes make sure you understand that elements attributes options attributes the best way to understand attributes is by actually doing it so instead of talking about it let's go in designer and actually build something we're going to build a collection list that has load more functionality then we're going to add infinite scroll then we're going to switch it to pagination and we're going to go step by step into a real workflow and see how we use attributes documentation with our live project to create the final result we have a collection list here on the page in designer this is a webflow collection list 20 auto-generated items from the cms absolutely nothing custom here no classes just the list with the content in it we haven't done too much just yet here i have connected each of these fields to a webflow cms field just so we can see some content and as of right now we really have a normal setup nothing custom here in designer this is a collection list with content now we're going to enable webflow pagination in the settings panel of this list with our load more functionality we need pagination enabled before we start adding attributes to this let's confirm the default functionality first let's go to this live page and we'll watch as the page reloads and shows the next three items in the list the paginated content is showing on a new page not the same page i was on perfect this is exactly the web flow default this is what we want okay so now we're going to get into the custom stuff let's go and add a single attribute to this webflow pagination and turn it into a load more let's go and first look at the load more docs and take this step by step this is the first thing i would do as a user first i need to copy paste the script onto my webflow site so each attribute has its own script file this is for improved performance for better load time to make this system truly modular and this script is specific to the load more functionality each solution has its own script so we're going to copy it here and then we're going to paste it in the head of the page now back to the docs we have step two okay we're going to add attributes to elements on the page here in the docs purple indicates element attributes orange indicates option attributes we always want to start with the element attributes because options are added on top of elements so we start with elements i want this collection list to be the list with the load more functionality this is exactly what we want for our collection list so let's go open this up we will apply this attribute name and value to the collection list element there we go each element attribute has a screenshot to make implementation more clear so look at this it's telling us exactly what to do here we're going to select this collection list we're going to add this attribute to it we can copy the name of the attribute right here and now the name is copy to my clipboard so let's go back to designer let's go and add it as an attribute to our collection list element and we will also add the value list just like the docs show all right let's go publish and we'll see this working yeah this is all we have to do to create load more functionality in our webflow project copy the script copied this attribute and okay let's see it work there we go watch as more items are loading on the same page right under the existing ones perfect now let's go and add some more attributes to make it spicy we're going to add option attributes to change the options of our load more instance and they're going to be added to the same element that gets our element attributes let's go back into the docs make this super clear for us we want infinite scroll okay i want load i want to load items with infinite scroll perfect okay this is what we want when we open this up we see the attribute that we need to add and the note telling us which element to add it to this should be added to the list element perfect i'll copy it and let's go back into designer and we will paste in here fscms load mode i'm now going to add our infinite and there we go it's the same element with our list attribute perfect now let's go and publish we have our list load more we have our infinite option when we publish and load this will now see items loading with infinite okay it looks great there we go as i'm scrolling down this page more and more items are loading on the page this is exactly what we wanted now let's go at a preloader we're loading more things on the list but maybe the user has a slow connection or maybe we want a visual to show that there's more items loading great so we'll add a preloader to help users understand that there's more items loading let's go back to the docs and see how this works okay here we are i want this gif html at embed or lottie animation to show loading progress of the list this is it perfect all right and notice how this is an element we are tagging an element as our loader we can see here fs cms load element loader we're going to add it in designer okay let's go add this element in designer this is a gif i got this from icon8.com you can use gif lottie it's super flexible here i'll center it on the screen put some autos in here some display there we go we're centered and now let's add the attribute to this loader i'll select it and i'll go fs cms load element and loader we're telling attributes that this is the element that should show more items that should show when there are more items on the page that's it more items loading this loader will show so let's go publish and see this working okay nice look at this we have our loading spinner showing only when new content is being loaded on the page if i wanted to i could absolutely hide this pagination button doesn't matter for this walkthrough but you can hide that pagination button no problem all right now let's go and change it our client change their mind one hour before launch we don't want infinite anymore we want pagination omg not a problem with attributes we are just going to change the value of the option i'll go back to the docs and see what we need to do for this okay and here we see the option i want to load items on the same page using webflow pagination next and previous buttons this is it perfect all right and we see our load mode pagination okay i'll go do that we're going to change the mode option from infinite to pagination and we're doing that right inside designer here so we're just going to make this change i'm going to remove infinite and i'm going to write in pagination awesome i'll also remove this loader element now that we have the pagination it doesn't really make sense to have a loading state anymore so i'm just going to remove this from the page we don't need it all right let's publish and see this working okay i'm going to reload and our list is transformed to a paginated list with this small quick change we now have a big result totally different outcome that's the concept that's the introduction video to attributes we add attributes to elements we have options on side of on top of those and we can change those very quickly in a very short period of time we had load more underneath then we had infinite scroll then we added a loader then we added pagination and we didn't even look at one line of code our other solutions follow the same exact logic identify elements give them the attributes apply options try attributes for yourself and after a few implementations you'll feel like a pro that's power that's attributes [Music] you

Channel: Finsweet

Views: 11,926

Keywords: webflow

Id: D3VXms-ABaI

Length: 13min 20sec (800 seconds)

Published: Wed Nov 17 2021