Issue with pagination, nest and filter (data not pulling through)

Attributes
, , ,
1

Hey,

We’ve built filter system utilising Pagination, Nest and Filter, however, some of the items from the CMS collection aren’t pulling through.

I’ve displayed the information within the “meta” class that should correctly filter on /apps. If you visit the CMS page, you’ll notice that there’s more items (BigCommerce) that should be pulling through to /apps.

/apps page - All eCommerce Tools, Software & Vendors - eCommerce Tech

CMS for /apps page - Verifone (was 2Checkout) - Reviews, Information and Alternatives

We’ve also utilised CMS Bridge to push data to Webflow, however, I’ve manually added the filter fields inside Webflow (as I thought it may be similar to how videos link in Webflow when they don’t pull through), sadly the issue is still present.

We also use a custom script to add some data to the pagination (for SEO improvement) (listed below), I’ve disabled this and the nested data doesn’t pull in so I don’t think this is causing any issues.

Script

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsload',
  (listInstances) => {
    const [listInstance] = listInstances;
    getPaginationDataLoad();
    updatePage();

    listInstance.on('renderitems', (renderedItems) => {
      getPaginationDataLoad();
      updatePage();
    });

  },
]);

function updatePage() {
  let pageTextWrapper = $(".page-number");
  let current = $(".pagination-btn-number.w--current").text();
  let last = $(".pagination-btn-number:last-of-type").text();

  if (current.length && last.length) {
    $("#page_number").text(current);
    $("#page_number_total").text(last);
    pageTextWrapper.css("opacity", "1")
  } else {
    $(".page_number-wrapper").remove();
  }
}

function getPaginationDataLoad() {
  const paginationBase = $(".w-pagination-previous").attr("href");

  $("[fs-cmsload-element=page-button]").each(function () {
    const pageNumber = +$(this).text();
    const newHref = `${paginationBase.split('=')[0]}=${pageNumber}`;

    if (!$(this).attr("href")) {
      $(this).attr("href", newHref);
    }

    $(this).on("click", function (event) {
      event.preventDefault();
      $(this).attr("href", newHref);
    });
  });

  const currentUrl = $(".pagination-btn-number.w--current");
  currentUrl.removeAttr("href");
}

Thanks for any assistance with this!

Project Share Link

Best wishes,
Dan.

2

Hello @chloe!

The issue comes from the amount of items in your nest-source collection, as only the first 100 are loaded on page load, CMS Nest is executed before the whole list is rendered on the page.

We can prevent CMS Nest from executing with some code while improving the load with CMS Load.

I’ve detailed the process here

However I’ll reshare it here :slight_smile:

For the CMS Nest script use this script:

<!-- [Attributes by Finsweet] CMS Nest -->
 <script defer fs-attributes-preventload="true"  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsnest@1/cmsnest.js"></script>

Child collection (COLLECTION TO NEST)

Use CMS Load set to render-all

  • Enable pagination with 100 items per page
  • Activate Speed Boost

Use the CMS Load callback to initialize CMS Nest

Add this snippet to </body> tag

 <script>
 window.fsAttributes = window.fsAttributes || [];
 window.fsAttributes.push([
   'cmsload',
   (listInstances) => {
     window.fsAttributes.cmsnest.init();
   },
 ]);
 </script>

Let me know if you need any help!

3

Perfect. Let me give this a shot.

Best,
Dan

1 Like