Translate json_type Metafield

MattiaM
Shopify Expert
2 0 2

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 2 (2)
Jesse_Vogt
Shopify Staff
6 1 0

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.

MattiaM
Shopify Expert
2 0 2

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 %}