Multilingual Javascript Support Question (or how do we retrieve non default locales?)

Jordy_D
Shopify Partner
118 0 51
Hi all,
 
I'm looking for a way to pull the alternate locales in a javascript file.
Is that possible ?
 
Currently, Shopify says:

> Liquid code embedded in .js.liquid, .scss.liquid, or .svg.liquid files execute only when the file is saved, not on page request. Liquid code that depends on the session state uses session information from when the file was generated, not the current session. For example, if your store's primary locale is English, then the code console.log("blog.comment.email"); would display the english translation even when it's being viewed in a language that you support.
 
Which means that the Javascript file cannot contain any text that needs to be translated, unless we create cases for each language within the javascript file.
No problem with that, but how can we retrieve the json key for each language ?
Is there a liquid filter that forces from which locale file the translation is pulled ?
Or is there a way to access those files, the same way we can retrieve all asset urls ?
 
Thank you very much! 
 
★Shopify tweaker★
emigdiox
Shopify Partner
1 0 0

I have the exact same question, have you found a solution?

 

0 Likes
Jordy_D
Shopify Partner
118 0 51

Nope, nothing yet. 

The only other solution I see is to create a snippet or a json metafield to store translations for all languages.

We're also stuck with trying to pull alternate language URLs to create a language switcher that doesn't redirect to the home page but the product in another language. 

Either I missed things in the documentation, or this multilingual feature isn't finished... 
(Although workarounds are possible of course).

★Shopify tweaker★
0 Likes
garyrgilbert
Explorer
42 3 10

Hi Jordy,

 

The best thing I found to do is to save the translation text you need in a javascript variable before you include your javascript file, I know it dirties the window-global scope but you could create your own if that bothers you. Then you only need to reference the variable inside your js code and it will always be the right language you need.

 

Cheers,

 

Gary

0 Likes
Jo_Seido
New Member
1 0 0

Yeah, that's what we did. 

0 Likes

Hi All, 

My app is uploading a custom product template to the store. The template includes 2 sections.

I am trying to use Vue i18n to do it. But I can only think of the static way like below:

  1. Open a new .liquid snippet file

  2. Put all language content inside, e.g.
    <script>
    const
    messages = { en: { message: { hello: 'hello world' } }, ja: { message: { hello: 'こんにちは、世界' } } }
    </script>
  3. Display merchant-selected language / language based on user-locale detection

What about dynamic display? Let's say the merchant using my app want to add Spanish. How can I add his language content to the template?

Can anyone give me a hint?

SPO - SEO App to research keywords & edit social link preview
BYOB - Build Your Own Bundles
0 Likes