CMS load/filter issue - Interactions on collection items not working beyond 100th item

Attributes
,
1

Hi everyone,

I’ve put together a gallery using ‘CMS Filter’ & ‘CMS load’ for a CMS list with over 500 items, and each ‘Collection Item’ has a hover interaction attached to it. Website links below:

Website link:

Preview Link (doesn’t seem to work properly):
https://preview.webflow.com/preview/dave-court?utm_medium=preview_link&utm_source=designer&utm_content=dave-court&preview=ba8eff37136a2915ae412f2283be974b&workflow=preview

Mouse hover on the items reveals an info box at the bottom left of the screen, however after the 100th CMS item the hover interaction no longer works, I’m assuming this is due to the CMS Load function bringing in new CMS data without bringing the interaction with it. I’ve tried using ‘fs-cmsload-resetix = true’ with no success.

Is there a work around for this so all items after the 100th include the interaction?

Thanks.

2

hey @kristian! I see you have used some initial states for your hover interactions, these are not recommended as resetix will reset every interaction to its initial state making them stop working.

You can always simulate this state by using the effects panel.

3

Hey @Support-Luis ,

Thankyou very much for the prompt response.

Is there a work around to get interactions to work with the CMS load? Each image also has a lightbox pop up on click along with a fixed text reveal on hover. I’ve set the interaction to have no initial state which still allows the popup function but still doesn’t work after 100th item.

4

Hey @kristian! You can test this code? Here we are resetting Webflow’s interaction engine with each rendering of items :muscle:

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        window.Webflow && window.Webflow.destroy();
        window.Webflow && window.Webflow.ready();
        window.Webflow && window.Webflow.require('ix2').init();
        document.dispatchEvent(new Event('readystatechange'));
      });
    },
  ]);
</script>
3 Likes
5

@Support-Luis thankyou so much, this worked perfectly.

1 Like
7

Hey Luis,

Is there a way to set a ‘lazy load’ to each additional paginated page? Looking at the network tab it seems Webflow waits to load ALL paginated pages once activated, but then only begins to load the images AFTER every page has been loaded, making the load time ~12s. After this ~12s the hover interaction then works on all images.

If I’m able to set it so it only loads the paginated page you get to that could make the site more responsive. Is this possible?

8

Hey Luis,

Any update on this?

Thanks

9

Hey @kristian!

I’m afraid lazy loading is not possible natively. However, we have a speed boost that optimizes your items’ loading by simply enabling the “Show page count” option for the native pagination settings.

Screenshot 2024-05-24 at 12.28.34
Screenshot 2024-05-24 at 12.28.341920×1101 252 KB

Let me know if this solves your issue!

1 Like
10

Thanks Luis, this worked perfectly!

1 Like