Elements with conditional visibility aren't showing up in filtered CMS items

Attributes
1

I have a simple filtered list with load more functionality. In my list of cards, I have a div block that is set though show with conditional visibility, and contains an embed with a typeform embed script.

I’ve discovered that when the second batch of items is loaded after clicking “load more” or even after just clicking a filter button, the embed block isn’t showing. I thought it was because the embed had no height/width properties, but that didn’t solve it.

  1. I’m not sure why the embed would be hidden after loading the next set of items
  2. I’ve been playing around with CSS of the parent elements to get it to show, but haven’t been able to find a clickable button, which is set forth by typeform.

Any idea why this is happening?

Thanks for any support and insight as always!

Here is a loom video
Read only
Staging page

UPDATE 1/3/25: I have narrowed down that this is only happening the cms load script and with load-under infinite and pagination load modes. Under native Webflow pagination, there are no display issues.

2

Hey @Drcontempo!,

I am taking a look at your page but I noticed you are also making some changes to the setup. Let me know when I can step in to debug! Also let me know if you find anything

3

Hi @Support-Pedro thanks for responding. It is safe for you to check it out now. Basically my conclusion is unchanged from my 1/3 update: the behavior comes up when the CMS load script is being used. When I commented it out, and used native webflow pagination, everything worked fine, but I lose filter functionality.

Let me know if you have other insight, thank you!!!

4

Hey @Drcontempo! The issue comes from how the code in the embed block is triggered.

Quoting Webflow support from this other thread

In Webflow, interactions and other JavaScript functions typically work on page load. However, when pagination is used and elements on the page are replaced without reloading it, these functions need to be restarted each time the page content changes.
To address this issue, you’ll need to ensure that the functions within the collection items are restarted whenever the page content changes. This might involve manually triggering these functions again after the pagination operation is completed or finding a way to bind these functions to elements dynamically so that they are applied to new elements loaded via pagination.

The best forward is to replicate the setup from the other thread and using the CMS Load/CMS Filter API to run a function on the items shown.

5

Yikes ok thanks for this. There seems to be a good handful of custom code, and I’ve never dealt with the API, or any API for that matter lol. Would you be able to help with the code?

I’ve tried working with the code for a few hours, but have been unsuccessful! Thanks for any help! @Support-Luis

6

@Support-Luis @Support-Pedro Is there any way you can assist with the code here as it refers to this other thread mentioned?

Thank you!!

7

Hey @Drcontempo! I’ve sent you a DM!

8

Solved via DM. Instead of using a embed block we used the CMS Load callback to add the div containing the Form.

The code looks like this.

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

      const [listInstance] = listInstances;
      const { items } = listInstance;

      async function processRenderingQueue() {
        try {
          const result = await listInstance.renderingQueue;
          result.forEach((item) => {
            const typeformWrapper = item.element.querySelector('.typeform');
            const name = typeformWrapper.getAttribute('data-name'); // This attribute's value is added with Webflow's native dynamic attributes

            if (!typeformWrapper.querySelector('[data-tf-live]')) {
              const typeformDiv = document.createElement('div');
              const scriptElement = document.createElement('script');
              scriptElement.src = '//embed.typeform.com/next/embed.js';

              typeformDiv.setAttribute('data-tf-live', '<embed-id>');
              typeformDiv.setAttribute('data-tf-hidden', `integration_name=${name}`); 
              typeformDiv.appendChild(scriptElement);

              typeformWrapper.appendChild(typeformDiv);
            }
          });
        } catch (error) {
          console.error('Error processing renderingQueue:', error);
        }
      }

      processRenderingQueue();

      listInstance.on('renderitems', (renderedItems) => {
        processRenderingQueue();
      });
    },
  ]);
</script>