Colors and color codes

If you have color attribute in your product data, there is a chance that you want to show this color in some way on the frontend. We treat color product attributes a bit extra so that you can easily render interface elements using an appropriate color.

In general, there are two cases which needs to be covered:

1. presence of product color code(s) in product fields so that it can be used when rendering product tile
2. presence of color code information in facet data response so that it can be used when rendering facet values

Color and product tile

If your product attributes contain an attribute, which includes the term color, Luigi's Box will assume that it holds the color label (its human readable name) and will automatically add color_code attribute to the response with a matching hex code. It will not overwrite any existing color_code though. So, if you are using custom color codes for your colors, make sure to include them in the product data.

Color and facets

If you ask for a facet for an attribute, which includes the term color, Luigi's Box will, apart from ordinary value and hits_count, also include color_code for each facet value.

...
"hits": [...],
"facets": [
      {
        "name": "color",
        "type": "text",
        "values": [
          {
            "value": "Black",
            "hits_count": 12184,
            "color_code": "#3d2b1f"
          },
          {
            "value": "White",
            "hits_count": 2310,
            "color_code": "#ffffff"
          },
          {
            "value": "Blue",
            "hits_count": 2070,
            "color_code": "#006fdf"
          },
          ...

If you are using your custom color codes and would like to have these available in facets, then the approach is bit more complex:

1. Create a field combining facet label and its code. Make sure that it contains the term color in its name. For instance, color_with_hex is a good name.
2. Values of this field should be in a form label~code, using ~ as a separator between color label (name) and its code. Take gray~a9aeba as a good example.
3. Ask for color_with_hex as your color facet in your search request.
4. The response will contain label in addition to color_code, hits_count and value for each facet value. See an example below.
5. Make sure to display label and color based on the color_code to your visitors, but filter using value when doing requests to Luigi's Box search backend. If you are using Luigi's Box search.js library, this works out of the box.

 "facets": [
      {
        "name": "color_with_hex",
        "type": "text",
        "values": [
          {
            "value": "gray~a9aeba",
            "hits_count": 240,
            "color_code": "#a9aeba",
            "label": "gray"
          },
          {
            "value": "white~ffffff",
            "hits_count": 250,
            "color_code": "#ffffff",
            "label": "white"
          },