Injecting Static Item into List Preventing Empty State from Being Shown

Attributes
1

So I am injecting a static item into my filtered collection list. This static item has a collection list of its own, which I think may be bugging things so that the empty state doesn’t appear when there are no items to show for a particular filter.

Currently, when there are no items to show, the static item is still displayed. I want the injected static item to not show and for my fs-list-element=empty component to show instead.

I tried adding the fs-list-interactive=true attribute to the static/injected item, but this broke how it was being injected into the list.

I tried fixing this with some code to hide static items and trigger an empty state when there are no items, but the browser is still logging items even when none are displayed.

You can test the “empty” state by clicking on the Pixel 9 Pro Fold or Pixel 9a filters (there are no results for these).

Read-only: Webflow - Navi

This is what the empty state is supposed to show.

Screenshot 2025-08-05 at 2.54.50 PM
Screenshot 2025-08-05 at 2.54.50 PM1562×926 71.1 KB

And this is what it currently shows (note that I am using multiple instances of the same dark green CTA - one is my injected component and one is nested in my empty state). I need the injected one to hide on empty state and the other to show.

Screenshot 2025-08-05 at 2.56.36 PM
Screenshot 2025-08-05 at 2.56.36 PM762×486 29.7 KB

2

Hey @Navi!

We can see exactly what’s happening: your injected element marked with fs-list-interactive="true" needs to be hidden whenever the Collection List has no CMS items, so that the empty-state can show.

Here’s what we suggest trying:

  1. Make sure your injected element has both
fs-list-element="item" fs-list-interactive="true"
  1. Just before your closing </body> tag, add this snippet:
<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      listInstances.forEach((listInstance) => {
        listInstance.addHook('render', (items) => {
          const interactives = document.querySelectorAll('[fs-list-interactive="true"]');
          if (items.length === 0) {
            interactives.forEach((el) => (el.style.display = 'none'));
          } else {
            interactives.forEach((el) => (el.style.display = ''));
          }
          return items;
        });
      });
    },
  ]);
</script>

What it does:

  • On every render (load, filter change, pagination, etc.) it checks items.length.

  • If there are no CMS items, it hides all [fs-list-interactive="true"].

  • As soon as there’s one or more result, it brings them back.

With this in place, clicking the “Pixel 9 Pro Fold” or “Pixel 9a” filters (which return zero items) will correctly hide your injected CTA and show the empty-state component.

@Support-Luis or @Support-Pedro can help if you need additional assistance with custom code solutions.

3

@support-finn @support-luis @support-pedro Awesome, it looks like this got the desire empty state working - thanks so much!

The only outstanding wrinkle is that it doesn’t look like the fs-list-element=item is being injected into the grid list when items are shown - it’s just floating beneath the grid - whenever the fs-list-interactive=“true” attribute is added.

Screenshot 2025-08-07 at 11.50.39 AM
Screenshot 2025-08-07 at 11.50.39 AM1156×1420 103 KB

It needs to be shown last in the grid list, so it has an attribute of fs-list-position=9 because the most amount of cards that would ever be shown is 8.

Is there anything to do to fix this?

4

Hey @Navi! There appears to be an issue with the attribute. I am taking a closer look and will open a bug report with the team.

5

Thanks @Support-Luis! Keep us posted.. we were hoping to launch something using this attribute mid-week.

6

Hey @Navi! If it works for you, I can come up with a workaround for you in case we cannot ship the update this week!

Just let me know and I’ll come up with something!

7

@Support-Luis Yeah that would be great in the meantime

8

@Support-Luis Checking in to see if you have an ETA? Thanks again for your help!

9

Hey @Navi!

I noticed you have removed the Static Element from the page. Could you please re-add it to the setup so we can continue debugging? Alternatively, you can duplicate the page and share the broken URL with us!

10

@Support-Luis We had to remove it to get the pages live but I duplicated the Webflow project with the bug present, so linking to the live page and read-only for that. Thanks again

11

Thank you! I’ll get back to you as soon as possible!

1 Like