Using Load More With Filter

Attributes
1

Hi There,

I’m trying to combine CMS Load (specifically ‘load-more’) with filtering.

It works in the main however the ideal functionality is that each time one of the filtering options is clicked the the rendered items from the collection list are reset and the ‘load more’/next button appears.

It seems that if you hit ‘load more’/next on any of the filtered options and then move between the filtered options the number of CMS items displayed is equal to those that were previously displayed.

https://webflow-playground-6df9bb.webflow.io/cms-filters-prev-next

e.g. I have 9 items showing on the All tab, clicking next reveals the next 9. If I then move to the BBC-2 tab it will show 18 items (or the total number based on the filter), rather than the desired 9.

Is this functionality feasible?

2

Hey @neilmcdermott! You should be able to set this back to 9 items per page with this script:

  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      // The callback passes a `filterInstances` array with all the `CMSFilters` instances on the page.
      const [filterInstance] = filterInstances;

      // The `renderitems` event runs whenever the list renders items after filtering.
      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        filterInstance.listInstance.itemsPerPage = 9;
      });
    },
  ]);
</script>
3

Thanks for your help Luis, this works apart from when there are more CMS items to be loaded than 18.

So on first click of the more button the next 9 items are revealed, but beyond that no more items are loaded.

And the share link if it’s useful

preview link

4

@neilmcdermott I see. We normally suggest using pagination if you are using CMS Filter with CMS Load as the pagination option is the one that behaves the best when combined with filtering

Let me know if this is an option or if we should try to fix this with code.

5

Thanks Luis, appreciate your time. Yes we did try this with pagination as from reading the docs i noted how it was expected to work best.

However, with this implementation, the client has seen another site that they like with this desired functionality and has specifically requested it of us.

It would be great if you could suggest a solution.

6

@neilmcdermott can you please republish with the code removed? I’ll try to work on a solution for this

7

Thanks @Support-Luis, i’ve removed that now and published