Liquid translated labels in app.js.liquid

Technical Q&A
1

Hi, I’m pretty new with Shopify but already works with twig,

I need to update hardcoded custom code in app.js.liquid by the liquid translated tags. Here’s the exemple :

original code :

$(‘.add_to_cart’).text(‘Make a selection’) ;

My code :

$(‘.add_to_cart’).text( “{{ ‘layout.general.cart_selection’ | t}}” ) ;

But ‘layout.general.cart_selection’ isn’t update with the right translation after switching the language.

I’ve noticed, that some tgas Like Shopify.translation.unavailable works with language switch. There is a way to register my custom tags as Shopify.translation.cart_selection ?

Thanks for help.

2

Hi,

You need change your code:

$('.add_to_cart').text( "{{ 'layout.general.cart_selection' | t}}" ) ;

To:

$('.add_to_cart').text({{ 'layout.general.cart_selection' | t | json }});
3

thanks for your help.

It doesn’t work. Does it can be related to the multi-language app (Translate my store) ?

4

Hi @Ephrem_agency

Yes, you can do that. You can follow on this guide: https://shopify.dev/tutorials/develop-theme-localization-use-translation-keys#include-html-in-translation-keys

Hope this helps.

5

Hello, thanks but this doesnt work for me. It is stuck at the default language and doesnt update when switched. Any help appreciated.

6

Hi @Ephrem_agency ,
The following should work with the current Shopify way of creating files on their server:

  1. Add the following script to the tag in the “theme.liquid” file:
​
  • Then you can use it in your “app.js.liquid” like so:
$('.add_to_cart').text( window.translations.cart_selection ) ;​

I hope this helps you or anyone else landed on this issue.