Trigger script when using CMS load

Attributes
1

Hi,

I’m trying to build a winelist using Webflow CMS. The structure I’m going for is as follows:

Country (H1)
Region 1 (H2)
Wine 1
Wine 2

Region 2 (H2)
Wine 3
Wine 4

I’ve got a working example of the setup at www.restaurantiris.no/winelist

I’m using a custom script to hide the headers for each item (the wines) if the region or country equals the last items country of region. My issue is that I can’t seem to get my script to fire when used in conjunction with CMS load. If I for example use the infinite option, the script removes the duplicate headers for the first 100 items (I guess these are loaded with the page), but not for the following 230 items.

Is there a way to make the script trigger after CMS load has rendered the items, either using the “infinite” or “render-all” options?

Best,
Tobias

2

hey @tobiastorjusen you can use the Attributes API to execute code when new items are rendered. Your script should look like this:

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

      // The callback passes a `listInstances` array with all the `CMSList` instances on the page.
      const [listInstance] = listInstances;

      function removeHeadings(params) {
        // Your code.
      }

      removeHeadings();

      // The `renderitems` event runs whenever the list renders items after switching pages.
      listInstance.on('renderitems', (renderedItems) => {
        removeHeadings();
      });
    },
  ]);
</script>
1 Like
3

Hi,

Thanks a lot! That worked like a charm!

Best,
Tobias

1 Like