Why does Shopify convert JSON type Metafield to a string in non-default languages?

MattiaM
Shopify Expert
3 0 4

Hi,

If I try to import the translation of a metafield specified as JSON, in all languages except the default one it is converted to a string, making the metafield unusable.

It also happens if I enter the same content, so it's not a formatting problem

Has it happened to anyone?

Replies 5 (5)

Jesse_Vogt
Shopify Staff
14 2 10

Hi @MattiaM , Jesse here from the Metafields team. 

You are correct that translations for Metafields do come back as a string. As you have observed once it becomes a string you are not able to index into it as you would expect. I have created an issue on our side to dig into better alternatives for handling translated values. The only short term work around I can currently offer is to use the deprecated json_string type rather than json. The json_string type exists to support the JSON_STRING value type prior to the introduction of the updated metafield type system.

To learn more visit the Shopify Help Center or the Community Blog.

MattiaM
Shopify Expert
3 0 4

Hi @Jesse_Vogt ,

Thank you for the reply.

I needed a quick solution that was manageable in terms of content from your metafield panel
I used another workaround.

I need it to manage the faq, so I needed to have questions and answers.

I formatted the string using <question> and <answer> separators

like:

<question> Question 01?
<answer> Answer 01
<question> Question 02?
<answer> Answer 02
<question> Question 03?
<answer> Answer 03
etc

so

 

{% assign faq_list = product.metafields.faq.string | split: "<question>" %}

{% if faq_list != blank %}

  <div class="">
    {%- for faq in faq_list -%}

      {% unless faq == blank %}

        {% assign faq_parts = faq | split: "<answer>" %}
        {% assign question = faq_parts[0] %}
        {% assign answer = faq_parts[1] %}
        {% comment %} faq {% endcomment %}
        <div 
          class="border-t border-b -my-px border-grey-7"
          x-data="{show:false}"
        >
          {% comment %} question {% endcomment %}
          <div 
            class="flex justify-between items-center p-4 md:p-8 cursor-pointer"
            @click="show !== true ? show = true : show = false"
          >
            <h3 class="">{{ question }}</h3>
            <div class="w-8 h-8 p-1 duration-300 rounded-full hover:bg-ver-ben-4"
            :class="show == true ? 'transform rotate-180' : ''">
              {% render 'icon-tail-arrow' %}
            </div>

          </div>
          {% comment %} answer {% endcomment %}
          <div
            class="relative overflow-hidden transition-all max-h-0 duration-700 bg-grey-10"
            style=""
            x-ref="container"
            x-bind:style="show == true ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''"
          >
            <p class="p-xs md:p-lg p-6 md:p-12 text-grey-2">
              {{ answer }}
            </p>
          </div>
        </div>
        
      {% endunless %}
    {%- endfor -%}
  </div>

{% endif %}

 

mgnumis
Visitor
1 0 0

Hi @Jesse_Vogt 

 

Have you got any news on this ? I'm stucked on the same problem : I need to create a json-type metafield with translations, but the translations seems being typed as string.

How can I address this problem ? 

 

Thank you 

 

Geoffrey

InesCV
Shopify Expert
10 0 6

Hi @Jesse_Vogt, I am having the same issue. 

 

I tried using the json_string deprecated type, and it helps me see the JSON as an object instead of a String in my console. 

<script>console.log({{ product.metafields.rocket.specifications | json_string }})</script>

But I can't assign a variable to this json_string parameter as I show below. 

{% assign test_json = product.metafields.rocket.specifications | json_string %}

Therefor, I still don't know how to iterate through every item of my JSON in order to render all the information in the translated languages. I have all technical information about my product in an extended format of the JSON below and all values have been translated correctly via API with a PIM integration.

{
    "characteristics":
    {
        "brand": "XXXXX",
        "category": "XXXXX",
        "code": "XXXXX",
        "id": "XXXXX",
        "installation_mode": "XXXXX",
        "kw_cold": 0,
        "precodice": "XXXXX",
        "series": "XXXXX",
        "short_description": "XXXXX"
    },
    "tech_specifications":
    {
        "other_info":
        {
            "kit": "XXXXX"
        },
        "labels":
        {
            "wifi": false
        }
    }
}

 Please, this is an urgent matter for our client, could we get some help?

 

Thank you,

 

Ines

Ines Castelltort
InesCV
Shopify Expert
10 0 6

We finally solved it by creating an extra metafield for the translated languages.

  • product.metafields.rocket.specifications for English
  • product.metafields.rocket.specifications_fr for French
  • product.metafields.rocket.specifications_de for German

And added the following snippet before pointing to the metafield, so it displays the correct JSON in each language instead of the translated JSON that was having issues (was only read as a string):

 

{%- if localization.language.iso_code == "en" -%}
  {% assign specifications_json = product.metafields.rocket.specifications %}
{%- elsif localization.language.iso_code == "fr" -%}
  {% assign specifications_json = product.metafields.rocket.specifications_fr %}
{% elsif localization.language.iso_code == "de" %}
  {% assign specifications_json = product.metafields.rocket.specifications_de %}
{% else %}
  {% assign specifications_json = product.metafields.rocket.specifications %}
{%- endif -%}

{%- if specifications_json and specifications_json.value -%}
  {%- for specification in specifications_json.value -%}

  {%- comment -%}
  ------------------------------------------------------------------------------
  Here you would find the loop to display each item from the JSON metafield.
  ------------------------------------------------------------------------------
  {%- endcomment -%}
  
  {%- endfor -%}
{%- endif -%}

 

I understand Shopify is going to solve this JSON translation issue at some point, so we keep sending the translated JSON as both:

  • New language metafield (explained above)
  • Translation of the original English metafield.

@Jesse_Vogt if you have any news regarding this topic, please let us know, so we can correct the code accordingly and stay tuned about the best practices possible when translating JSON metafields.

Ines Castelltort