Implementing Hierarchical facets on Shopify with named tags

I’m trying to implement a 2 level hierarchy for a faceted search experience on a Shopify website. I created the named tags following @Jerska’s recommendation in this thread. It’s not quite working yet, so I must be missing something. Would love some guidance if anyone has experience in this realm!

I think I’ve isolated the issue to the algolia_instant_search.js.liquid file. I added this code:

//Heirarchy Menu
    instant.search.addWidget(
      instantsearch.widgets.hierarchicalMenu({
        container: '.hierarchical-categories-menu',
        attributes: ['named_tags.lvl0', 'named_tags.lvl1'],
        autoHideContainer: false,
        showParentLevel: true,
      })
    );

This code seems to recognize the named_tags from the standard search facets and remove them, but nothing appears in the hierarchical-categories-menu div that was added to algolia_instant_search.hogan.liquid. So maybe it’s an issue with the attributes named_tags.lvl0 and named_tags.lvl1?

If it’s helpful, here is a snippet from the product JSON, as viewable from Algolia dashboard:

"named_tags": {
  "applications": [
    "DB",
    "ICC"
  ],
  "lvl0": "Neuronal/Glial",
  "lvl1": "Neuronal/Glial > Neuronal Markers"
},
"named_tags_names": [
  "applications",
  "lvl0",
  "lvl1"
],

website: https://antibodies.myshopify.com/search
password: xenopus

Cheers!
Alex

Hi, I did manage to produce a simple example where your hierarchical menu is working: https://codesandbox.io/s/oojqllx0z5

So your datastructure is good. And the network result is good too in your shopify store:
image

But there’s a difference with my example in network result:
image

Did you maybe define lvl0/lvl1 as facets in shopify? That could enter into conflict with hierarchical menu.

cc @Jerska any hints?

2 Likes

Definitely nice insights from @vvo .

Conflicts could definitely be an issue. To have an attribute defined as an attributeForFaceting on Algolia, but keep your hand on how you want to use it in the front-end, we provide the custom facet type “hidden”.

To use it, simply head in Search Options > Facets > hover over one > Edit:

2 Likes

@vvo I didn’t realize that you had to pull the lvl0/lvl1 tags out of the facets in Shopify. It appears that was the conflict. Thanks for the clarification – that worked!

1 Like

@Jerska – i forgot about the facet types and haven’t used those yet. Good to know!

1 Like