Best practice for using url slugs for product categories

Just looking for the best practice for using product category slugs alongside names for a browsable search feature:

The issue:

I would like a path like /products/super-widgets/ to show all the products in the “Super Widgets” category, ideally without having a secondary lookup-table and having Algolia power the system - i.e. the user would click on a “By Category” widget to narrow down the list to “Super Widgets” and my URL would update.

As far as I can see it - in order to have super-widgets AND “Super Widgets” be part of this, I would need to add categories to my index in some sort of format that includes both the slug and the label like so:

{
  category: "super-widgets#Super Widgets",
}

{
  category: "another-category#Another Category With A Long Name"
}

And then within my <HierarchicalMenu/> or <RefinementList /> widgets, I’d use the transformItems prop to convert my category label value into just the label part:


<RefinementList
  attribute="category"
  transformItems={
    (items) => items.map(item=>({...item, label: item.label.split("#")[1]}))
  }
/>

This would work up to the point until a user lands on /products/super-widgets/ where I would need to turn super-widgets back into super-widgets#Super Widgets in order to refine the results using the category attribute. In the case of my second example, this would be impossible without a lookup-table AFAIK…

So… do people just use lookup tables for this kind of thing? i.e. push the slug into Algolia, and rely on a lookup table to convert that slug into the label for the UI, or is there another way to power this through Algolia alone?

Hi Guy,

It looks like what you’re trying to achieve is synchronizing your application’s URL with the state of your search—that is, if the URL updates, the search updates, and vice versa.

I see you tagged your question with react-instantsearch so I would recommend looking into our Routing URLs guide for React InstantSearch. You’ll be able to build the same experience as in this sandbox.

Let me know if this works for you, and happy coding!

Thanks for that - I have looked at those docs, however they would require that the URL < - > category is an exact two way translation. Which is not going to be possible a lot of the time (e.g. if I want the url to be /special-products/ and the category name to be “Our Special Products”). Or indeed any sort of seemingly unrelated slug / label combo.

Unfortunately the information to be able to filter has to be in both the URL and the filters. The only alternative I can think of is saving the mapping in an object on the page and using that to translate between labels and slugs.

Hope that helps!