Shopify themes, liquid, logos, and UX
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?
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.
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 %}
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
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
We finally solved it by creating an extra metafield for the translated languages.
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:
@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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024