Shopify / Shopify/liquid

HTML / unicode encoding issue with line item properties

Open
#1,696 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Ruby
Stars
11.9k
Forks
1.5k
Avg merge
17h 55m
Merged PRs (30d)
3

Description

My products have color customization properties. The properties are stored in a product 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 rendered as inputs with name="properties[Branches & Birds Colour]"

After adding an item to cart with properties, on the cart page if I print {{ cart.items.first.properties | json }} I get this:

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

The ampersand is converted into & then the & is unicode encoded... This appears to be the way all properties are encoded in the line item.
The equivalent of {{ string | escape | json }}.

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

[{"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 of each customization in the cart (using the hexadecimal value) by matching the property key 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', but this would only handle ampersand characters...

Is this a bug or am I missing something? Or is this just one more of Shopify's delightful quirks that I must learn to live with?
Either way, I'm welcome to any ideas on how to overcome this.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the behavior around Liquid's json, escape, and url_decode filters using an ampersand-containing line-item property key. Compare the encoded line-item properties with the metafield JSON shown in the issue. Done means establishing consistent decoding behavior or documenting the limitation with a regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
ruby
Domain
backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.