Show elements on filter results (opposite of Empty state)

Attributes
1

Hey all!

Question. Is there functionality (or a simple way to implement) to show elements when results are displayed? Think of this as like the opposite of the “Empty State”.

The use-case is that there is a resource filter set up. When results are displayed I want to show a div that says “We found these resources!” and another CTA div the bottom of the resources.

But when there are no results based on the filters, I want it to display the standard “Empty State” div that is already available as an attribute.

Thoughts?

2

Hey @EZ1!

You can achieve this using custom code

Add this code to your Before </body> code section

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  (filterInstances) => {

    const resultsUI = document.querySelector('.results-found-ui'); // replace this with your actual class name

    if (!resultsUI) return;

    filterInstances.forEach(instance => {

      instance.listInstance.on('renderitems', (renderedItems) => {

        if (renderedItems.length > 0) {
          resultsUI.style.display = 'block';
        } else {
          resultsUI.style.display = 'none';
        }

      });

    });

  }
]);
</script>
1 Like