CMS Load- Paginate on desktop and infinite scroll on mobile

Attributes
1

Hi,

Is it possible to have collection items paginate on desktop and infinite scroll on mobile? I’m using CMS Load.

2

Hey @claudine! I’m afraid this is not possible as you can only have fs-cmsload-mode once per CMS Collection. You could however add a second collection list only visible for mobile breakpoints and add a CMS Load instance set to infinite.

The only issue is the repetition of content on the same page :confused:

3

Ok, I don’t know how I could do that because I’m using filters on the collection and they won’t work on a different one (if I created one for mobile).

Or is there a way around that?

If not, which CMS load would you recommend using?

4

@claudine You could also have a different filter setup.

However, I think my original answer may not be completely correct. We may be able to change the value of the fs-cmsload-mode attribute depending on the breakpoint and then initialize the whole Attribute.

Could you share a live link?

5

Great!

The live link is here.

6

Hey @claudine! Can you please test this?

<script>
  const breakpoints = {
    small: '(max-width: 576px)',
    medium: '(min-width: 577px) and (max-width: 768px)',
    large: '(min-width: 769px) and (max-width: 992px)',
    extraLarge: '(min-width: 993px)',
  };

  function getCurrentBreakpoint() {
    for (const [breakpoint, mediaQuery] of Object.entries(breakpoints)) {
      if (window.matchMedia(mediaQuery).matches) {
        return breakpoint;
      }
    }
    return 'unknown';
  }

  function setLoadMode() {
    const list = document.querySelector("[fs-cmsload-element='list']");
    if (!list) {
      console.error("Element with [fs-cmsload-element='list'] not found.");
      return;
    }

    const breakpoint = getCurrentBreakpoint();

    if (breakpoint === 'small' || breakpoint === 'medium') {
      list.setAttribute('fs-cmsload-mode', 'infinite');
    } else {
      list.setAttribute('fs-cmsload-mode', 'pagination');
    }
    console.log('Current mode:', list.getAttribute('fs-cmsload-mode'));
  }

  setLoadMode();
</script>
1 Like
7

Works perfectly, thank you!

1 Like