I’m working on Webflow and recently added pagination to display my CMS items. However, I’ve run into two issues:
The “Next” button for pagination doesn’t appear, and all items automatically load as I scroll down.
I’ve removed cmsload.js from my setup because I thought it was causing the issue. After doing so, the total item count (meant to show the total number of items) now shows 0.
Here’s the script I’m currently using, which is added via Google Tag Manager:
(function() {
var scriptsFired = false;
var scriptElements = [
"https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js",
"https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js"
];
function loadScripts() {
if (!scriptsFired) {
scriptsFired = true;
scriptElements.forEach(function(src) {
var script = document.createElement('script');
script.src = src;
document.head.appendChild(script);
});
var lastScript = document.head.lastChild;
lastScript.onload = function() {
var countElements = document.querySelectorAll('[fs-cmsfilter-element="results-count"]');
countElements.forEach(function(element) {
element.setAttribute('fs-cmsfilter-element', 'results-count-total');
});
};
}
}
setTimeout(loadScripts, 2500);
window.addEventListener('scroll', function() {
if (!scriptsFired) {
loadScripts();
}
}, { once: true });
})();
/script
.
.
First, why are you using GTM to load scripts that are fundamental to the function of your page? I would not do that- you don’t have cookie concerns here and you can introduce timing or functionality issues.
You need CMS Load to handle your dynamic pagination, and you’ll need to read up on those attributes and configure it with the behavior you want. Currently it sounds like you have it set for infinite scroll when you want load-under.
Markdown uses three backticks, you can use this button-