Finsweet CMS Load

Finsweet's CMS Load tool is another one of their most popular toolsets.

It allows you to resolve Webflow's 100-item collection list limits by pre-loading and browser-caching all pages of entire collection list.

You can then navigate it in several ways;

• Pagination, like Webflow's but without the page reload or the visible querystring param.
• Infinite scroll.
• Render all, where everything loads without waiting for the user to scroll.

Moreover it fully interoperates with CMS Filter, which means that you can easily deal with hundreds or even thousands of collection items with a solid filtering UX.

Learn more:

https://finsweet.com/attributes/cms-load

Advanced Use

Responsive Pagination

Do you want smaller pages on mobile phones?

On desktops, we might want 12, 20, or 50 items shown. But on tablets or mobile devices, much less.

We've built a solution for this that uses Finsweet's CMS Load libraries to provide fully responsive page sizes at every breakpoint and, it supports CMS Filter too.

Demo - https://responsive-pagination.webflow.io/

Cloneable - https://webflow.com/made-in-webflow/website/responsive-pagination

https://forum.finsweet.com/t/load-more-and-responsive-page-item-counts/1639

Custom Javascript

For javascript developers, Finsweet offers an API

https://finsweet.com/attributes/api/cms-load

With it you can capture certain events, like page changes, item rendering, and respond specially. You can also programmatically manipulate both the in-memory data and the paginated views.

But how would you use that?

Use External Datasources

You can use CMS Load and CMS Filter with external data by loading it with your own Javascript, and then passing it to Finsweet's tools through the API.

A tutorial here-

https://finsweet.com/attributes/api/cms-load

Attributes API

Finsweet offers an API, which allows you to use client-side Javascript to further extend the capabilities of loading and filtering.

https://finsweet.com/attributes/api

https://finsweet.com/attributes/api/cms-load

https://www.npmjs.com/package/@finsweet/attributes-cmscore

One of the chief reasons for the API is to allow you to work with new content as CMS Load renders it into the page.

Here, for example, we re-initialize Webflow forms to ensure that new forms will function properly with Webflow's forms handler.

Technical Notes

https://finsweet.com/attributes/api/cms-core#cmslist-instance

_renderItems happens when a pagination event renders more elements into the list. This can happen based on a page-button click, or through a scrolling action in the event of CMS load more.

• It can be called directly to refresh the view.
• It returns a promise which can be awaited to ensure the new data is loaded before your custom code progresses.

_clearItems clears the visible and in-memory lists.

Caching

You can see the cached pages in the browser's data store. Remove these if you need to do performance testing on the page load.

I'm unclear on cache rules;

• How long the cache remains before updating
• Update triggers, such as whether a newly published site is detected

‍

‍

‍

‍