Issue with Pagination & Total Item Count in Webflow

Hi everyone,

I’m working on Webflow and recently added pagination to display my CMS items. However, I’ve run into two issues:

  1. The “Next” button for pagination doesn’t appear, and all items automatically load as I scroll down.
  2. 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 . .

My Setup:

  • Custom attribute name: fs-cmsfilter-element
  • Custom attribute value: results-count

The Issues:

  1. The pagination doesn’t behave as expected; instead of showing a “Next” button, all items are auto-loaded on scroll.
  2. After removing cmsload.js, the total item count where I’m using fs-cmsfilter-element="results-count" now displays 0.

Questions:

  1. How can I fix the pagination issue so it works with a “Next” button instead of infinite scrolling?
  2. How do I correctly display the total number of items across all pages without using cmsload.js?
  3. Do I need to reinitialize Finsweet’s library (window.FsCmsFilter.init()) after modifying the attributes, or is there another solution?

what to chnages to make in this code to get what i want…(its first time sharing code…do not know how to paste in correct form)

Any insights or guidance would be greatly appreciated.

Thanks in advance!

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-

image

1 Like

@memetican …thanks…this was helpful…

1 Like