Hiding Price-related Instant Search Facets

Hey everyone,

I’m developing a Shopify site and I’m looking to hide prices for customers if they don’t have a specific tag, on the Instant Search page. This has gone well with templates for the actual results, but I’m not sure how to hide the Price and Price Range filters as well. I’d rather go the logical route than the CSS one, but I’m not sure what variable to check for facet title/id, etc. If you could direct me to where I might conditionally check a unique facet attribute to show or hide it in the Instant Search results page files, I’d appreciate it.

Cheers

When you say “if they don’t have a specific tag”, you mean the users, correct?
If you look at algolia_facets.js.liquid, you’ll see that it creates a facet list, called algolia.facets, which it then splits in two : shownFacets and hiddenFacets.
The idea of hiddenFacets is usually for people who want to create a custom facet widget instead of using the ones we’ve built in the extension, but in this case, it can also work too.

The condition is easy:

  • hiddenFacets take all the facets where facet.type === 'hidden'
  • shownFacets take all the facets where facet.type !== 'hidden'
  algolia.facets = _.filter(algolia.config.facets, function (facet) { return facet.enabled || parseInt(facet.enabled); });
  algolia.shownFacets = _.filter(algolia.facets, function (facet) { return facet.type !== 'hidden' });
  algolia.hiddenFacets = _.filter(algolia.config.facets, function (facet) { return facet.type === 'hidden'; });

You can easily modify this condition.
In your case, I’m not sure how you check your user tag, but let’s say you’re able to set a JavaScript variable with it.

  var showPrices = /* Check on the user tags */;
  function showFacet(facet) {
    if (facet.type === 'hidden') return false;
    if (!showPrices) {
      if (facet.name === 'price') return false;
      if (facet.name === 'price_range') return false;
    }
    return true;
  }
  algolia.shownFacets = _.filter(algolia.facets, showFacet);
  algolia.hiddenFacets = _.filter(algolia.config.facets, function (facet) { return !showFacet(facet); });