(2020) Sort | BeginneRR Series for Finsweet CMS Library

[Music] what's going on everyone this is rr from finn suite and in this video we are going over the fn suite cms library for webflow this video is a step-by-step tutorial on how you can implement the sort tool into your cms this is similar to the filter tool but instead of filtering we are going to have different ways of sorting through your collection items so we're in our designer and this is the document that we've been making we've been working on this whole cms with this one right here as you can see we actually just created the filter option and we were able to filter through these buttons we were able to filter by search now what we're going to do is we're going to go ahead and add the sort tool now sort is similar to filter remember with filter you can kind of filter and only show up whatever uh you click for example if you click purple it'll just show up the purple ones red black and you can even search and all that stuff but with sword you're able to sort them within your cms in a certain order that you want you know it's kind of self-explanatory now webflow has some sort features in it already but the thing is it's kind of limited and i'm going to show you right now so if you go ahead and click our cms collection here and let's say let's click collection list wrapper click the gear button and you have ways you can filter and you have ways that you can or sort order as you can see here you can sort it with plain text alphabetical reverse alphabetical and all these things but one of the things is it's pretty limited you're really only able to sort with your collection um collection kind of features and the collection items but the fn suite cms library sort tool it lets you sort within the text inside the class name okay and also one thing with the webflow sort order it's really more for the creator so as a creator you can sort it in however way you want but uh the fnsuite cms library sort tool lets the user be able to select however they want to sort it out so that's just a brief explanation of the sort tool now what we have here is the thing that we've created i've added some things onto the cms to the collection i've added as you can see i've added years to the cms collection and i've tried as much as possible to make them as random as i can if you go back to the collection let's say we do flip sweet products um i added just the year and i just made it plain text and that's very key so that we can search within that main text now i did that to defensively pictures as well and i have the year numbers here and remember we have the combined uh tool uh feature added here as well so it combines and you're able to filter and sort through both of them so what we're gonna do now that we have our year numbers and we went ahead and um added these and another key thing by the way this is very important you want to add a class name to the text itself as you notice here i added the class name year this is very key especially later what because because we're going to tell the sort button what they're going to sort through and how are they going to sort it using that class name gear so these class names are very important when you're working with the fn suite cms library now we're going to go ahead and add our sort button we have our year numbers we've added them onto the collection we've added them onto the items we've go ahead we went ahead and put a class name which is year so what we're going to do we're going to add thing here now i'll go ahead and keep this on the left and the the purple red and black i'll keep that but what i'll do is i'll go ahead and remove this filter by search actually what i will do is i'll just go ahead and hide it and add another filter wrapper to me the best way to do that i can add a div block or and then put the class name or i can just duplicate this and what i'm going to do i'm going to edit the block so we'll add a div block here and we're going to name it filter wrapper it's nice to have these class names there and we're going to add our own button in here now there's a difference that we have to do here we have to make the button it has to be a link block or a link text not just a button so what we're going to do is we're going to make it a link text that kind of looks similar to this just so we can have the similar style but we're going to it's going to be a sort button so we're going to go ahead and add a link text into this filter wrapper which is there on the right and we're going to name this sort hyphen button now that's an important name to remember as well when we get into this script so that we're able to we're able to tell the script to sort using this one okay and i think we made this in the middle good now we're gonna go i don't like the underline so i'm gonna remove that and then we're going to make it consistent with the styling so the font that we've been using was montserrat monster wraps however you pronounce it make it semi-bold and we'll make it kind of a gray color to just to differentiate it make it 16. now i want to add some boxes around it that's pretty simple i'm going to make it to this display first make it a block element and then i'm going to add some padding on the top i'm gonna add some padding on the sides and then we're gonna go ahead and add a border around it make it two pixels kind of the same width as the other ones and i'm going to go and put it back to this type of into the inline display just because i want it to be good later on okay and then we'll go ahead change the name to filter by year now what we're going to do we're going to make an active um sort button as well okay so we're going to copy this remember uh we made some button mods for the purple red and black if you don't remember uh which is over here because we're going to tell the script as well that when the button is active it will look like this okay so we're going to go ahead and put that one here and we're going to make an active uh pretty much how it looks like when it's clicked because we want to be able to tell is it sorted this way is it sorted the other way so when it's active we want it to be in a similar style which is um a colored background with a white text so we're going to go ahead and make the background of this one well we'll go ahead first of all very important by the way add the secondary class sort hyphen active so that the other one doesn't change only this one we're going to make the background that gray color that we had and make the text white so now whenever it's active it will look like this button specifically and we have this button mod page just to display our active buttons so we go back to the sort um page that we have there's a sort button and what we're gonna do right now before we can go to add the script we need to add an attribute to this sort button so go ahead and click the sort button go to the gear icon right here and go to custom attributes and this is what we've been doing actually with filter as well we're going to add a an attribute now the name if you remember on filter we added filter by now this one's going to be sort hyphen by and the custom value that is important on the other ones we weren't adding this but in this one we are because remember the sort tool enables you to sort within the text not the actual class but the text within the class so it's important that you add a period signifying that we are sorting by not an actual year but the uh the text within that class name which is year so sort by period year okay not just sort by year sort by period year signifying that it is a class so now that we have the attributes we are ready we're pretty much ready to go and we're going to go to the visual script writer now remember these key things the classes need to remember is sort hyphen button sort hyphen active and also the um the collection list which is the whole thing okay so let's go ahead and go to visual script writer our best friend and we're gonna add the collection list here remember our collection list name is dot collection hyphen list anytime you put a dot between or before a name it signifies that it is a class name and remember we have two collection lists so we've been combining it so that we're able to filter and sort through both of them so we're going to add the combine function that's super easy just add it and you're good to go now we'll go ahead and go to sort and we're going to add a couple things here first off is our sort trigger that is our button specifically so period here period sort hyphen button and the next one is uh called sort reverse you're able to make this true or pretty much false or non-present this is a way because right now traditionally it will sort it from a through z alphabetically you're able to go ahead and make it that when you press the button it would be the reverse which is z through a now why would you want that well default sometimes they go it goes ahead and makes it alphabetical order so you can go ahead and make it reverse where you say okay instead of ascending order you want to make a descending order but how i designed it is actually randomized the years on purpose notice 2020 2014 2019 2015 and all the way here i go to 2009 i made it by year number so we're gonna sort by year i actually just realized i put filter here so we should do sort by year i don't know i put filter there so we'll go ahead and leave that alone i will add an active class now the active class was dot filter hyphen active okay so we have our class names collection list sort button filter not filter i keep saying filter sort active okay now we have all these things we're going to go ahead and copy the code you can add animation as well but i'm just going to go ahead and bypass that if you want to do that you can play around with it you're welcome to do so copy the code and we'll go back to the page now i'll click the page uh name here i actually went ahead and created a new page which is actually sort so we'll do the gear icon this is the old code this was still the filter code and by the way you're able to combine it you could do filter and sort but with this one we're just gonna do sort i'm gonna delete this and then we'll just paste the code that we just copied go ahead and press save now i just want to make sure that i put the right class name because i have a tendency to put filter instead of sort so let me go to the button mods ah see it says filter so if we did that it's gonna say sort by year when you click it because they filter right here and that's weird we don't want that okay and we have here sort active okay good now we'll go ahead go back to sort and remember we're going to go ahead and hit publish it's not going to work in preview mode it has to be published and we're going to go ahead and check it out every time we get to this part i always get really nervous that it won't work so we'll go ahead and click sort by year and there you go it's sorted by year 2007 2008 all the way down to 2020. as you can see i actually skipped a year i think i skipped 2010. i just miscalculated but pretty much now it's sorted to the year that we want if you want to turn off and there you go it's not sorted by year anymore and that is how you add and use the sort tool if you're still having trouble and you have any more questions about setting up the sort tool for your cms i encourage you to visit suitejs.io and join our customer service slack channel called sweet js where you can ask questions about any of the tools that finn suite has created until next time stay tuned for more videos and more tutorials that we have coming out for the rest of the tools that's effing sweet

Channel: Finsweet

Views: 2,275

Keywords:

Id: UYthOM8YmTg

Length: 13min 50sec (830 seconds)

Published: Thu Feb 04 2021