Today we’ve released the F’in sweet CMS Library! Add powerful components to your Webflow CMS Collection Lists with a few lines of simple js code. This javascript Library will allow you to Combine, Load More, Filter, Sort, and Add Classes to items in a CMS List. The cost? Free of course
Along with our library we have a 30+ video series showing you each part of the Library. We go over how the js works and how it is implemented on a Webflow site. One of our goals is to help people learn and understand javascript. Learning js will take your Webflow game to the next level - and we’re here to help . For those that don’t want to write code, we built a Visual Script Writer!
It looks F’in Sweet indeed!!!
Well done guys, that’s a brilliant effort.
But although the Visual Script Writter makes it feel super easy, it will need a little bit more guidance for someone who (like me) can understand what is happening when guided, but is otherwise completely clueless about that language…
@Finsweet, a quick Question regarding the filtering system: would it load the entire Collection on the page first and just manage the display or would it allow to block loading of elements based on filters ?
If it’s the later, this filtering solution could work with the below multi location on map system, and that would be AWESOME: https://webflow.com/website/Google-Maps-with-Multiple-locations-and-CMS
We are considering a trigger on scroll for load more. We wanted to start with manual Load More click first. What type of control would you want for trigger on scroll?
Hey! First, thank you for the awesome words. Really appreciate that
Visual Script Writer - this tool is meant as a supplement to the Docs. You must understand the docs and how the components work for the Visual Script Writer to make sense. We have a lot of videos and resources to help you learn. Take it slow. We dropped A LOT of content and education on you all at once. Start with one component, then learn another, then another. Don’t try to learn everything at once.
Filtering question - the entire collection will load on the page and then it manages display by showing/hiding elements. It does not load items based on filter criteria
I am getting some problems when using the filters in combination with pagination though. The filter is “ignored” when more items are loaded (or on page 2 using normal pagination).
Please use one instance when using multiple components. Adding the library more than once or creating multiple scripts is not recommended. Please push this through on your webflow.io link and I will then do a full test of the ignored items in filter.
My script I added wasn't added to the message.. Here it is @vwis
(function() {
// create a new Library instance and store it in a variable called "projectsGrid"
var projectsGrid = new FsLibrary('.collection-list')
// define our filter group(s)
var myFilters = [
{
filterWrapper: ".filters-wrapper",
filterType: "multi"
}
]
// run filter on our instance
projectsGrid.filter({
filterArray: myFilters, // the filter group name we defined
activeClass: 'fltr-active', // the active class we give to our buttons
animation: {
enable: true,
duration: 200,
easing: 'ease-out',
effects: 'fade translate(0px,20px)'
}
})
// run the loadmore Library component on your instance
projectsGrid.loadmore({
button: ".load-more-button", // class of Webflow Pagination button
loadAll: false,
animation: {
enable: true,
duration: .3,
easing: 'ease',
effects: 'fade'
}
})
})();
Sorry about that! I copied the script you provided here, still running in to some problems when I go to page 2 though. I am probably missing something. Really thankfull you are helping out.
That one was me. Copy and paste issue. I updated the code above. Please try that. This should filter items that are on the current page. Once you click load-more-button, more will load on the page. From my understanding, when you click the load-more-button, you want the newly loaded items to fit into the currently filtered items. If yes, this may need to be added to the next update.
This was not part of the first release because there was a problem with returning nothing. Let’s say you’re filtering by Red and Blue. You load more and expect on Red and Blue to show up since that is the active filter. There is a chance that nothing returns on the Load More click. If you’re loading the next 20 items and none of those items are Red or Blue, it will look like something is broken. Can I suggest trying the loadAll option? This could work for you
I get the filtering to work fine, but not together with pagination. It would be a nice feature to have, but as you said maybe for the next version. I’m thinking similar to how many online shops do it.
I will give loadAll a try. But won’t that slow down my site if it loads almost 100 items with videos and images?
loadAll loads all of the items after the entire page has loaded.
You have 100 total items. If you show 10 items and have 10 items on each page, the Load More component will load the first 10 with the initial page and the next 90 after the page has loaded. It will not influence the initial page load.
@Finsweet. What an amazing job you’ve done. So much quality.
You site was the first one that catched my eye when I saw the Webflow showcase. Then I dediced that I had to learn Webflow. Now I’m here amazed by your contribution to the community! I’m beyond thankful.
I’m not sure whether I understand this portion correctly. Does it use Ajax to load these items or does it just load them in background?
For example: Let’s say I have a collection page of blogposts and there are 300 of them. Each blogpost in the list has an image and a headline. My worry is that if I have 10 blogposts showing after load, I don’t want the user to load 290 redundant images if he doesn’t click the Load more button.
Thank you @fonchifox - Really appreciate that. Yes, learn Webflow!!! I started with 0 knowledge and have learned so much over the past few years. You can do the same.
This is incredible! The Docs are very detailed and user friendly, makes it a great starting point for learning js. I had a question about some more advanced functionality (since I have no previous js experience).
I was wondering if the Filter Component could be used with a multi-reference field. So I could have a collection list called tags that might have different categories, years etc, and then have another collection list (eg. blog posts) that has a multi reference field to those tags, and then be able to live filter them based off of the multi-reference field.
I was also wondering if this would work with using larger dropdown menus instead of buttons as the triggers for the filters, since at a certain point having too many buttons gets convoluted.
If I understand it right using reference and multi-reference fields will be able to expand/change functionality of this library to sort large collections in a very thorough way.
The cost? Free of course 
. For those that don’t want to write code, we built a Visual Script Writer!
- https://visualscript.webflow.io/