Issue with CMS Filter Pagination and Load More Functionality

Attributes
, ,
1

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.

2

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 {
    }
  },
]);
3

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

4

Hi,

I think you should facing the issue with your CMS Filter functionality not working properly after loading more categories could be due to the Load More button not reinitializing the filter script for the newly loaded items. To resolve this try calling the filter initialization function again after the Load More button is clicked and new items are loaded. This should ensure that the new categories are also included in the filtering process.

Thanks