Issue with CMS Filter Pagination and Load More Functionality

Hello Finsweet Support Team,

I am currently experiencing an issue with the CMS Filter functionality in my project, specifically when using pagination in conjunction with the “Load More” feature for the fs-cmsfilter-field applied to the categories CMS collection. Unfortunately, the filter does not seem to work as expected in this scenario.

Here is a brief description of the problem:

  1. I have implemented the CMS Filter for the categories CMS collection, allowing users to filter categories based on certain criteria.
  2. Additionally, I’ve incorporated the “Load More” functionality to enable users to view more categories by clicking the “…” button.

However, the issue arises when users click the “…” button to load more categories. While the additional categories are displayed, they do not get filtered.

I managed to find a solution. In case anyone needs it, here’s what I did. :slight_smile:

When clicking on the load more button for the CMS filters I run that function and It resets the filters

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  "cmsfilter",
  (filterInstances) => {
    // Select the button
    const button = document.querySelector("#load-more-btn");

    if (button) {
      button.addEventListener("click", function () {
        // Your code here
        console.log("Filter instances loaded: ", filterInstances);

        // Re-initialize the filter
        filterInstances.forEach((filterInstance) => {
          filterInstance.init();
        });
      });
    } else {
    }
  },
]);

Hey @elay! Thanks for sharing the solution! :muscle: