Change facet type to Hidden on certain pages (Shopify)

I’m wondering if it’s possible to change a particular facet’s type to “hidden”, but only for certain pages. Or if there is a known workaround. Here’s my situation:

I have a facet setup for product brands. This is useful and working for most pages like https://antibodies.myshopify.com/search (password: xenopus).

I also have a landing page set up for one of my brands NeuroMab (https://antibodies.myshopify.com/pages/neuromab), which is using a custom JS filter to show only products which match the NeuroMab brand on this page. This is working perfectly, except I would prefer the facet UI to not show the brand NeuroMab in the “selected filters” area at the top. As is, this UI can lead to a bad user experience if someone de-selects the brand and then has other products showing up on that page.

Any thoughts? Thanks!

Hi,

Thanks for reaching us, I am Alex, developer at Algolia, working on Shopify!

Yes this is totally possible! The idea behind it, would be add css classes depending on url of your page.

To be a little more technical the first step would be to go in algolia_init.js and set a boolean variable which either match or not your specific url. You can largely inspire yourself from algolia.is_collection_results_page on line 22, which is the boolean matching or not the collection page.

The second steps would be to go inside algolia_facets.js and add something like that

    params.container = "[class~='ais-facet-" + facet.name + "']";
    params.attributeName = facet.name;
    params.templates = {};
    params.cssClasses = algolia.facetCssClasses;
    let hiddenCssFacets = " ais-facets-hidden";
    if (algolia.is_specific_page && facets.name === pageName) { // the boolean defined previously
           params.cssClasses += hiddenCssFacets
    }

The pageName here would be the string matching the name of your page in the URL, in your case “neuromab”. I believe this variable is already set on your side since your doing a filter based on the url when going on /pages/neuromab.

Obviously, you would have had something like in the CSS file :
.ais-facets-hidden { display: none; }

Let me know if you have other questions!

1 Like

Than you Alex! I will try this right now. Really appreciate your guidance.

Hey Alex, quick question. I don’t see algolia.is_collection_results_page on line 22 of the algolia_init.js file that you mentioned here

Has there been an update to the Shopify files since I installed it a few months ago? Anywhere I can check what that would look like?

(copied my algolia_init.js.liquid file below for reference.)

(function (algolia, $, _, Shopify) {
  'use strict';

  if (algolia.config.powered_by) {
    console.log("You're using Algolia !\n" +
      'Visit https://www.algolia.com/ for more insight about what we do.');
  }

  /* No conflict */
  algolia.$ = algolia.jQuery = $.noConflict(true);
  algolia._ = algolia.underscore = algolia.lodash = _.noConflict();

  /* Store variables */
  algolia.storeName = window.location.hostname.replace(/^www\./, '').replace(/^([^.]*)\..*$/, '$1');

  /* Client setup */
  algolia.client = algoliasearch(algolia.config.app_id, algolia.config.search_api_key);
  algolia.templates = {};
  algolia.indices = {};
  algolia.full_results = window.location.href.match(/\/search/);

  /* We use Hogan as our templating engine with a custom delimiter: [[ ... ]] */
  algolia.hoganOptions = { delimiters: '[[ ]]' };
  algolia.getTemplate = function getTemplate (name) {
    return document.getElementById('template_algolia_' + name).innerHTML;
  };
  algolia.compileTemplate = function compileHoganTemplate (name) {
    return Hogan.compile(algolia.getTemplate(name), algolia.hoganOptions);
  };
  algolia.render = function render (template, obj) {
    obj = _.assign({}, obj, { helpers: algolia.hoganHelpers });
    return template.render(obj);
  };

  /* Add CSS block after current script */
  algolia.appendStyle = function appendStyle (content) {
    function insertAfter(newNode, referenceNode) {
      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }
    var scripts = document.getElementsByTagName('script');
    var currentScript = scripts[scripts.length - 1];
    var style = document.createElement('style');
    style.innerHTML = content;
    insertAfter(style, currentScript);
  }

  /* Here because we need to ensure we have a fallback with '$ {{ amount }}'. */
  algolia.money_format = algolia.getTemplate('money_format').replace(/^\s+|\s+$/g, '');
  algolia.formatMoney = function formatMoney (cents) {
    var val = (cents / 100.0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    var format = algolia.money_format;

    // Not necessary, but allows for more risk tolerance if Shopify.formatMoney doesn't work as we want
    var regexp = /^([^{}]*)\{\{amount\}\}([^{}]*)$/;
    if (format.match(regexp)) {
      return format.replace(regexp, "$1" + val + "$2");
    }

    if (!_.isUndefined(Shopify) && !_.isUndefined(Shopify.formatMoney)) {
      return Shopify.formatMoney(cents, format);
    }

    return '$' + val;
  };
}(algoliaShopify, $, _, Shopify));

This line is part of a newly introduced feature. It would make sense that you wouldn’t see it in your own installation if you’ve installed us more than a month ago.

That being said, to check if, you have two easy options:

  1. If you haven’t made any change to our code yet, you can simply reinstall us in your theme from the Display tab of the app
  2. If you’ve already made changes to our code, you can duplicate your theme and install our latest version in this duplicate