Load More Button For CMS Items in Webflow | Finsweet Attributes
HTML-код
- Опубликовано: 8 сен 2024
- Come on this adventure with E.T. and me to learn how to use The Finsweet Attribute Library to build a load more button for your Webflow CMS collection items! I’ll show you how to incorporate pagination or a loading effect to easily render more CMS items as the user scrolls down. 🌕🚲👽
Webflow Cloneable Project Preview
webflow.com/ma...
Finsweet Attributes
www.finsweet.c...
Webflow Profile:
webflow.com/cu...
Portfolio Website:
www.cullenkuch...
Feel free to like, subscribe and let me know your favorite movie in the comments below!
😁🎬🖥
this is amazing!! super clear and helpful, valuable contents! Thanks for sharing!
So glad to hear that, my pleasure!
Your videos are seriously so useful and clear, besides not having unnecessary “I need views” information. Love it. Hope we can see more!
Thanks so much, that's great to hear!
Recently found your channel and all I can say is I love love what you do. Please keep it going.
Thanks so much Daniel, you made my day. I'm hoping to get another video out this weekend! 😄
Thanks for making this video. Do you know if the load more functionality works on collection lists with over 100 items?
Hey Steve, it should work yes. I don't see anything in their notes about restrictions on collection size. It works in combination with other attributes as well so there would probably be a workaround if needed. finsweet.com/attributes/cms-load
you are doing good. I have a question about how to load more in 2 different collection lists with CMS Combine ?
Awesome! Any idea how to make the Load More button convert to a Show Less button that resets the load once all items are loaded?
Hey Emma! I tried to play around with this but couldn't come up with a solution. This may be a question for Finsweet as their code library is handling the behavior outside of our native Webflow controls.
@@CullenKuch Hi Cullen, I appreciate your attempt and your response! Thanks
great video but I have a question. When I use the Attributes on assets with interactions the new line items fail to load the interactions? I tried FS interactions reset but is not working as expected. Any solutions you may be able to share. I noticed your hover interaction works on your new row of actors after every 'Load More' click. TIA
Hey Ivan, that is odd. Perhaps it's the order in which you built it? I think I built out my whole collection of actors, added interactions, then implemented the Finsweet load more and limited the view to 3 at a time. So the interactions were there from the start. Did you maybe add them after the Finsweet attributes? Good luck!
@@CullenKuch thank you for your quick reply. I appreciate you taking the time to answer my question. I follow the same pattern but maybe there's something I'm doing wrong. Will have to test the structure to find my a solution. Thank you.
i have the same problem
Hey Cullen, I just noticed you are using states (hover) for the rotate and box-shadow. The challenge is getting Attributes to work with Element trigger interactions.
Got it to work. If any item in a Collection List is using an interaction apply the Reset Interaction Attribute under the CMS Load more list of attributes. Name = "fs-cmsload-resetix", Value = "true".
Quick Question: Is it possible to have Both Load more and Pagination Next and Prev Button Functionality?
Hey Josh, with the Finsweet Load More solution I don't think there is since it targets the native Webflow pagination element and essentially replaces it.
@@CullenKuch Ok thanks for the info
Is there an Option for ShowLess ?
Hey there, after some quick research there doesn't seem to be a way to handle this using the attribute library they already have in place. You may be able to add some custom code and have it watch for the user navigating all the way to the end of a paginated list of items, and then instead of a 'show less' button you change it to a 'go back a page' function of some sort.