F'in sweet CMS Library for Webflow!

Thanks a lot for this!

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).

Would really appriciate some help if you got the time. Here is my test project: https://preview.webflow.com/preview/calendo-de2c73ec3ba763d98ba4c19a22bf9b3?utm_medium=preview_link&utm_source=designer&utm_content=calendo-de2c73ec3ba763d98ba4c19a22bf9b3&preview=628f981e40c5ef4e2ada3a81cc188d8a&mode=preview

And here is published site: https://calendo-de2c73ec3ba763d98ba4c19a22bf9b3.webflow.io/

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.

Here is published site again: https://calendo-de2c73ec3ba763d98ba4c19a22bf9b3.webflow.io/

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

+1 for infinite scroll pagination. (currently using infinite-scroll.js https://infinite-scroll.com/)

2 Likes

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.

4 Likes

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.

Thanks for your work. :slight_smile:

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.

If you make loadAll true, yes that is what happens. The user would not see the items loaded. What do you mean by load 290 redundant images?

We’re considering adding an option that loads a certain number of paginations rather than loading all of the paginations. In a future release!

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.

Hey Caleb,

Yes, you can filter by multi-reference if you have a nested collection list. As long as the text is inside the collection item, it can filter by those values. Can’t do nested collection? Wait a week or two… we’re releasing a lightweight .nest() component.

Yes, works with dropdowns.

Please join our JS community if you have more questions - Sweet JS https://www.sweetjs.io/ . We can help with customizations!

2 Likes

Cheers, this looks useful, however I thought it was a library of CMS structures rather than a presentation layer. I hope the goal is not another subscription to do things that should be done on the platform…

Unrelated, but all this JS love makes me think of this little gem every time:


:smile:
1 Like

The goal is the exact opposite. We will never charge for F’in sweet CMS Library. It’s free for you to use for any project.

10 Likes

Fin sweet… you did an awesome job…

how do we get in touch with you if we have a project we want to discuss over the 30k level?

Send an email to projects@finsweet.com

Its awesome - the only one thing I noticed in the Filters section it looks like when I add 2 filters of type < select > < /select > and add elements to it. E.g. Boston, Kentucky it looks like it searched all over the collection elements. How to get it search only within specific field, e.g. location. For instance I am looking for Kentucky Fried Chicken in Kentucky and do not want to show it in Boston, NY etc