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

Notes

See the following lessons for specific customization and advanced usage scenarios for FS CMS Load.

Advanced

Purge Cache Hotkey

In situations where the CMS is updated frequently Sygnal has had some clients struggle with stale caching.

Here's prototype code on how to clear the FS Load cache by using CTRL+SHIFT+C has a hotkey combination.

It relies on Sygnal's SA5 Hotkey lib, so be certain to install that if you use it.

// https://discourse.webflow.com/t/webflow-js-and-jquery-plugins/907
var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow api

});

window.sa5 = window.sa5 || [];
window.sa5.push(['hotkeys', (hotkeyHandler) => {
  hotkeyHandler.register("ctrl+shift+c,cmd+shift+c", () => {
    clearFSLoadCache();
  });
}]);

function clearFSLoadCache() {
  
  // Assuming there is an element with the 'data-wf-site' attribute in your HTML
const siteId = document.querySelector('[data-wf-site]').getAttribute('data-wf-site');

// Now, 'elementValue' contains the value of the 'data-wf-site' attribute
console.log("siteId", siteId); // Log the value to the console to verify

  // Assuming the siteId variable contains the name of the IndexedDB database you want to delete 
  
  const request = indexedDB.deleteDatabase(siteId);

request.onsuccess = function () {
    console.log("Database deleted successfully");
      alert("Cache cleared");
//  window.location.reload();

};

request.onerror = function (event) {
    console.log("Error deleting database:", event.target.error);
};

request.onblocked = function () {
    console.log("Database deletion is blocked");
};
  
}

‍