Load more attribute with custom code not working

General
1

I’ve got the load more attribute set up on a page using infinite, with some custom code that attached event listeners to each item.

Because the code runs on page load, it only runs the code on the first page of CMS items. Is there a way to handle it so that the code runs every time it loads more items so that the event listeners get added to the rest of the items as well, essentially the same way that the reset interactions attribute works?

2

Hey @horvatic.brandon! You can use the CMS Load callback function to achieve this.

Here is how to set it up

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

      const [listInstance] = listInstances;

      //create a function to run on the elements loaded

      //call function() for items on the first page

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);

        //call function() for newly rendered items
      });
    },
  ]);
</script>
3

Hey @Support-Luis ! Awesome thank you I’ll implement this

4

You guys rock. I am going to be testing this implementation in the morning. Just wanted to chime in and say I appreciate the support in here

1 Like
5

Anytime @bill! Let me know if you need any help! :muscle: