How to add swatches/color codes for Color facet in InstantSearch WooCommerce

I need some guidance on whether this can be done. So far, I have followed the guide presented at https://preview.algolia.com/instantsearch/ (code at https://github.com/algolia/instant-search-demo).

I have the Color facet working with text names for the colors. Is there a way to place a swatch of the color next to the Color name? I have added color codes to the terms of the Color taxonomy (For example, Black is #000000).
However, that field (color code) is not part of the Color Terms Taxonomy index.

  1. How do I add the color code so it becomes part of the index?
  2. What do I use to display the actual swatch once it is returned? i.e. would transformData() be the correct route?

Thanks in advance!

Hi,

If I understand your issue correctly, you would like to be able to display a swatch next to the facet values for Color, but you are faced with 2 challenges:

  1. the rgb code is not part of the record
  2. the refinement list has no way of natively displaying these rgb colors

Is that correct? If so, there are a few ways to do so.

For the first question, depending on how many color names there are, you may either try to:

  • map the name of the color to an rgb code directly in the front-end at query time. (e.g. have an object colorNameMap such that colorNameMap["black"] = '#000000')
  • add the colorCode field directly in the record at indexing time, so that each record returns the correct value

For the second question, I am not 100% sure I can answer precisely, because I do not know which version of InstantSearch you are using (v2, v3, v4), nor which flavor (react, vue, vanilla, etc.). But the gitst of it would probably to extend a refinement list using the method that is described in the documentation here: https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react/#customize-the-complete-ui-of-the-widgets

Best,