Usage of facet data in a ais-refinement-list

Open Q&A
,
#1

Hello all.

I am using a facet called ‘color’, which is an object consisting of color.colorName and color.colorHexValue. I am using colorName as the attribute for the ais-refinement-list and I would like to use the colorHexValue inside the scope of the ais-refinement-list to showcase the actual color. After trying a bunch of things and searching online, I have yet to come up with a solution.

Every and any help at all will be greatly appreciated.

Thanks in advance and have a nice day.

Zafer

#2

Hi!

Don’t quote me on this, as I am definitely not an Angular InstantSearch expert, but I believe you cannot access the color.colorHexValue field from the ais-refinement-list if you use the color.colorName field. I think you would need to have a global map of the color name to hex values that lives outside of Algolia like:

const colorMap = {
  'pure red': '#ff0000',
  'pure green': '#00ff00',
  ...
}

Then, you could map the color name to the hex value using the :transform-items method like documented here: ais-refinement-list | Vue InstantSearch | API parameters | API Reference | Algolia Documentation

I hope this gives you some ideas on how to implement this.
Best,

#3

I’ve been busy implementing exactly what you suggested yesterday. Thanks anyway for taking the time to answer! :slight_smile:

1 Like
#4

Damn too slow :sweat_smile:
Don’t hesitate to mark it as a solution to your question if you want!