How to make the JavaScript strings localizable (translatable)

localization
js-translation-json

(Dmitry Fedyuk) #1

Use $.mage.__.
An example:

Place the translation into i18n folder of your module.
Note that you need not en_US.csv file (though Magento 2 core modules have it): it is enough to make a translation file for your target language.

Some Magento 2 core modules use another way to translate JavaScript strings:
they define / require the mage/translate library


and use it:

But I was unable to get it working: in my case the translation was called earlier than the transation dictionary has been loaded from the server. $.mage.__ works for me.


How is js-translation.json file generated?
How to translate Knockout templates?
How is a JavaScript translation dictionary («js-translation.json») generated on the static assets deployment («bin/magento setup:static-content:deploy»)?
How is js-translation.json file generated?
(Dmitry Fedyuk) #2

See also:


(Hellsanos) #3

Hey there, I am currently still facing a translation problem. Everything in our mage2 installation translates well, except for anything created with JS/KO.

For example, I am trying to translate the words “Adding…”, “Added” and “Add to Cart” from the file

app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js

Now, in that file the translation is done via $t. This does not work for me. So I tried using $.mage.__ still no success.
I checked the js-translation.json file but it was empty []

Any ideas on that issue? Does your translations work?


(Dmitry Fedyuk) #4

The js-translation.json file is autogenerated. You should delete it and delete the cache, and the system will recheck your new interface strings and the dictionary used and will create a new js-translation.json file.


(Hellsanos) #5

Hey, thanks for the quick reply.

I tried that. Deleted the JSON File, flushed cache multiple times, reloaded, still the same. File is empty, no translatable Strings seemed to be fetched.

I also tried following steps:

  1. Cache Storage should be flushed (basically var/cache and var/view_preprocessed folders should be cleared)
  2. Static files should be redeployed (delete all folders inside pub/static and run bin/magento setup:static-content:deploy de_DE)

did not work.

For my translations I created a custom theme, following the official guide on [Frontend Developer Guide][1].
So I have all my translations in

app/design/frontend/{VENDOR}/{THEME}/i18n/de_DE.csv

As stated above, only the JS/KO generated Strings are not working for me
[1]: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/bk-frontend-dev-guide.html


(Dmitry Fedyuk) #6

The js-translation.json file is generated only if there is a language package for the current language.
So you should create a language package for the de_DE.


(Niclas Hoyer) #7

we are facing the exact same problem. We already published a first version of our de_DE language pack: https://github.com/splendidinternet/Magento2_German_LocalePack_de_DE

The js-translation.json file is generated correctly, it is also loaded on the frontend side and even stored in local storage. But it seems that at the mentioned location in catalog-add-to-cart.js the translations are not yet loaded, so $t always returns the original (English) string. This is clearly a bug, not something that we could fix in the language pack.


(Itay Raz) #8

I am facing the same issue here also.