Loading of CMS items is incomplete and inconsistent

Attributes
1

Hi, we are about to put one of our client projects live, but I noticed the following issue: the number of items that is loaded into our collection list is different with every refresh. Here’s a link to the page. and here’s a read-only link. To reproduce this, just scroll down to the last row of items in the list, and hit refresh a couple of times. Am I missing something, or is something not initialized or configured correctly? Thanks in advance!

2

Hey @studiopiraat! You can try adding CMS Load to your setup to ensure all items are loaded as they should.

3

Hi @Support-Luis, thanks for your reply! I added CMS Load to my page, and also added fs-cmsload-mode=“render-all” to my list. Unfortunately, it’s still not loading all items from my CMS (which currently has a total of 20 items). I added a results counter displaying how many items are in the list. Do you have any idea how to make sure all items are always loaded?

4

@studiopiraat, Render All requires Webflow’s native pagination to be enabled.

Can you try enabling it and setting it to 10 items per page, and let me know how it goes?

5

Hi @Support-Luis, I added CMS Load to my page, turned on pagination on my Collection List, and added the attribute fs-cmsload-mode=“render-all” to my Collection List. However, it still randomly loads 16 to 21 items. (there are currently 21 items in the CMS)

I added the ‘?fs-attributes-support=true’ to my url, and it says both CMS Load and the render-all attribute is set up just fine. I also tried disabling the CMS Filter script, to see if that had something to do with it, but that didn’t seem to be the case. Any ideas on what the issue might be here?

Thanks in advance!

6

Hey @studiopiraat! It might be due to the pagination being set way over the amount of items on the list.

Can you try something like 10 items per page instead of 100 per page?

Let me know how it goes!

7

Hi @Support-Luis, I tried that as well, but it didn’t seem to fix our problem. I’ve set it to 10 per page now though, if that is of any help to you!

Edit: should my collection list have the attribute ‘fs-cmsload-mode’ set to ‘render-all’ or ‘pagination’ for it to work? My guess is ‘render-all’, right? Also, might the order of the attributes on the collection list have anything to do with our problem?

8

Hi @Support-Luis, this problem is solved. It turned out to be another script that was interfering with the loading of the CMS items. It runs after a small delay now, and it properly loads everything!

Thanks for your answers and effort!

9

Hey @studiopiraat! Thanks for letting me know you got it working! Sorry for missing the extra script!

To avoid using delays you can always use the CMS Load callback to run code after the solution is done loading!


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

      const [listInstance] = listInstances;
      // Run code (once) after CMS Load is done loading!


      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        // Add code here that should run for newly rendred items
      });
    },
  ]);
</script>
1 Like
10

No worries! We can’t expect you to get to know every website inside out :wink: Thanks for the provided code, seems a bit more elegant indeed! :raised_hands:

1 Like