How to use hidden facets

I want to display the AIS block on two “product landing pages” in my store. The products are “primary” and “secondary”.

Primary products should only display on the primary page, and same for secondary – they should only display on their page. There should not be a facet selector on the left sidebar for the user to reveal secondary products on the primary page. So it seems like a hidden facet is perfect for this job!

I’ve added a facet located at product.metafields.antibody.type, where primary products have product.metafields.antibody.primary and secondary products have product.metafields.antibody.secondary.

I’ve also installed the AIS block on other pages and written a custom header to represent the data from each product on each landing page. I’ve also used the outputted query parameter to filter the results on the page.

My question is this: How do I filter the products using the hidden facet so that only primary products show on the primary page?

This has been my process currently but it’s not working between steps __ and __:

  1. start with the metafield/facet as type “menu” not “hidden”
  2. go to the general /search page (https://antibodies.myshopify.com/search) and select “primary” product type
  3. copy the query parameter
  4. append the query parameter to the primary product page (https://antibodies.myshopify.com/pages/primary-antibodies)
  5. go to the algolia dashboard on shopify and change the facet type to “hidden”

(password is xenopus)

I thought this worked at one point, but now it keeps breaking the loading for the .instant-search block. My theory is that changing the facet type changes the inputs for the query parameter.

Is there another workaround? Possibly using debug mode?

Have you seen the Instant Search page section of Shopify: Add a filter to the autocomplete and / or the search page ? :slight_smile:

Your filter will probably be something like:

helper.addFacetRefinement('meta.antibody.primary', 'THE_VALUE_YOU_USED_FOR_THIS_METAFIELD')

An easy way to test which filter to add is to go on your Algolia dashboard, select the shopify_products index.
On this page, you’ll then see your metafield values in the left side column.
If you select its value, you’ll then see the filter used under the search bar at the top of the page, in the format key:value. Use the key as the first parameter of the function, and the value as the second, and you should be good to go.

1 Like

Thanks again for helping me out! I ended up adding some other JS to check the page URL and only do this filtering if it met my conditions. Then there’s an additional filter for sub-pages. Cool stuff! I had another friend help with the JS as well.

Here’s the output in case it helps anyone else searching for this in the future:

in the algolia_instant_search.js.liquid file

//find page URL
var path = window.location.pathname;
var strippedPath = path.split('?')[0];
var primaryPaths = [
  '/search',
  '/pages/primary-antibodies'
];
var secondaryPaths = [
  '/pages/secondary-antibodies',
  '/pages/affinity-purified-secondary-antibodies',
  '/pages/unpurified-anti-serum-secondary-antibodies'
];
var antibodyType = null;

//check page URL
if (primaryPaths.includes(strippedPath)) {
  antibodyType = 'Primary';
} else if (secondaryPaths.includes(strippedPath)) {
  antibodyType = 'Secondary';
};

var secondarySubType = null;

if ('/pages/affinity-purified-secondary-antibodies'.indexOf(strippedPath) >= 0 ) {
  secondarySubType = 'Affinity-purified';
} else if ('/pages/unpurified-anti-serum-secondary-antibodies'.indexOf(strippedPath) >= 0 ) {
  secondarySubType = 'Unpurified anti-serum';
};

//custom filter
if (antibodyType) {
  instant.search.addWidget({
    getConfiguration: function () {
      return {
        facets: ['product_type', 'meta.secondary.category'] //add facets
      };
    },
    init: function (opts) {
      var helper = opts.helper;
      var page = helper.getPage();
      helper.addFacetRefinement('product_type',antibodyType + ' Antibody'); // add namespace & key
      if (secondarySubType) {
        helper.addFacetRefinement('meta.secondary.category',secondarySubType); // add namespace & key
      }
      helper.setPage(page);
    }
  });
}

Super cool, thanks for sharing!

A minor comment, which will have no impact on your code, but you don’t need to use strippedPath.
Indeed, this is used to remove the query string, but this will actually be already removed when using .pathname.
You can confirm this by adding ?test=abc to the URL of this page, open the browser console and try executing window.location.pathname.

1 Like

Awesome! Good to know about .pathname. I was previously using the query parameter to the faceting on page load, but that is unnecessary now that the filters are in place.