HTML / unicode encoding issue with line item properties

Shopify Discussion
1

Quite a complex and complicated issue but I’ll try to be brief.

My products have color customization properties. The properties are stored in a metafield as a json:

[
  {
    "name": "Branches & Birds Colour",
    "required": true,
    "type": "color",
    "colors": [
      {
        "name": "Bright Yellow",
        "value": "#f8dc0d"
      },
      {
        "name": "Light Orange",
        "value": "#f8971f"
      },
      {
        "name": "Orange",
        "value": "#f14a27"
      },
      ...
]

On the product page, the options are chosen and the product is added to the cart.
On the cart page, if I print {{ cart.items.first.properties | json }} I get this:

[["Branches \u0026amp; Birds Colour","Leaf Green"],...]

So, when the item is added to the cart, the ampersand is converted into &
Then the & gets unicode encoded… which seems really odd. This appears to be the way all properties are encoded in the line item.

But if I print {{ cart.items.first.product.metafields.namespace.custom_properties | json }} I get this:

[{"name": "Branches \u0026 Birds Colour", ... }]

A problem then arises when I want to match the key in the cart to the metafield json property.

Practically, I want to show the color (using the hexadecimal value) of the customization by matching the property key in the cart with the metafield custom property definition, but the encoding messes this up.

I can’t use url_decode on the line item property key, the unicode would need to be decoded first, and there appears to be no way in liquid to decode unicode.

So I’m stuck… unless I implement some hacky solution where I replace all instances of ‘\u0026amp;’ with ‘\u0026’

Any ideas?