Static Titles Displaying Despite No Items in Collection

Attributes
1

Hi! This probably comes up a lot, but: I have 3 instances of the same collection (webflow)filtered by a Type. “News”, “Press”, and “Awards”.

I have put these collection lists each into a section with static titles that announce what the types are (News, Press, Awards). The (finsweet)filter is filtering the 3 collections by “brands”. It’s working great. But if I don’t have any items that belong to both the “brands” and “types” categories, the static titles still show on the page.

I’ve tried a number of custom js/jQuery, including watching for mutations on the page (“if there is no collection list item, don’t show the title” kind of thing). But nothing seems to work. Has anyone run into this and can help?

THANK YOU!!

2

Hey, @matt1 can you share your links? There might be a way of hiding these elements with the API

3

Absolutely! I think this is what you’re needing? Webflow - tastytrade-skunkworks

It’s definitely a prototype! more for the UX, but any hints would be amazing, @Support-Luis !

4

Hey @matt1!

Can you test this code on your page? You should add ids to your static headers and replace the ones I used

<script>
      function toggleHeaderVisibility(headerElement, renderedItems) {
        if (renderedItems.length !== 0) {
          headerElement.style.display = 'block';
        } else {
          headerElement.style.display = 'none';
        }
      }

      const newsHeader = document.getElementById('news-header');
      const pressReleasesHeader = document.getElementById('press-releases-header');
      const awardsHeader = document.getElementById('awards-header');

      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsload',
        (listInstances) => {
          listInstances[0].on('renderitems', (renderedItems) => {
            toggleHeaderVisibility(newsHeader, renderedItems);
          });

          listInstances[1].on('renderitems', (renderedItems) => {
            toggleHeaderVisibility(pressReleasesHeader, renderedItems);
          });

          listInstances[2].on('renderitems', (renderedItems) => {
            toggleHeaderVisibility(awardsHeader, renderedItems);
          });
        },
      ]);
</script>

Or this code, the same but refactored

<script>
      function toggleHeaderVisibility(headerElement, renderedItems) {
        if (renderedItems.length !== 0) {
          headerElement.style.display = 'block';
        } else {
          headerElement.style.display = 'none';
        }
      }

      const newsHeader = document.getElementById('news-header');
      const pressReleasesHeader = document.getElementById('press-releases-header');
      const awardsHeader = document.getElementById('awards-header');

      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsload',
        (listInstances) => {
          listInstances.forEach((listInstance, i) => {
            const headerElement =
              i === 0 ? newsHeader : i === 1 ? pressReleasesHeader : awardsHeader;
            listInstance.on('renderitems', (renderedItems) => {
              toggleHeaderVisibility(headerElement, renderedItems);
            });
          });
        },
      ]);
</script>
5

Amazing!! Thank you, Luis…this worked like a charm and it was really great to see what to “grab on to” when using Attributes in the future. Thanks again!

6

You are welcome! :muscle:
Let me know if you need more help in the future!