Hide sidebar Facets unless it has options to select

Hi,

So we have many ways for visitors to sort through our products, but most of our products are drastically different. We end up having many empty Facet blocks on the left side because it does not relate to the search results.

I need to hide the empty ones when they are empty. Here is a photo:

Just installed on Shopify and loving it so far.

Thanks for your help!

Just installed on Shopify and loving it so far.

Really happy to read that!

If you use your browser’s Inspect element tool on one of the empty facet lists, I believe there should be a class stating that this list is empty.

You can simply add a bit of CSS targeting this class to hide them.

Thanks for the info… So I tried to remove it via CSS, but it will only remove the child, not the ais-header. Here is the CSS code:

.ais-RefinementList:empty {
display: none;
}

Any ideas on what to add to take the header part out?

Thanks

Sorry for the bad advice, I didn’t realize the title was not part of the refinement list widget itself.

After looking at it again, it seems like instantsearch v4 has a panel widget meant to handle exactly this: https://www.algolia.com/doc/api-reference/widgets/panel/js/ .
I unfortunately don’t believe our Shopify integration is using those.

You can try modifying our front-end code to include usage of panels.
Otherwise, a small hack which should solve your problem would be to hide them manually on each render.
See How to execute JavaScript code in the instantsearch page for a bit more information about that.

Here’s the code I’d have in mind:

  instant.search.on('render', function () {
    var emptyFacetSelector = '.ais-RefinementList--noRefinement';
    var emptyFacets = document.querySelectorAll(emptyFacetSelector);
    emptyFacets.forEach(function (elem) {
      elem.parentNode.parentNode.style.display = 'none';
    });
  });

You sir… Are amazing! Works perfect!

1 Like