Magento2 localisation Javascript

Question

A similar question was already asked here: Magento 2 javascript text translations, but Magento updated this translation technique in the beta version.

How can I add or update translations used by Javascript?

I figured out that Magento creates a file called 'js-translation.json' in the static folder. If I edit this file directly, I see that my translations are updated. But where is this file created, and how can I add translations so that Magento will automatically add this to js-translation.json when it's generated?

Update

The correct answer to this question is still not given, altough Mage2.PRO pointed me to the right direction, it's not the full answer. My js-translation.json is still empty when generated.

For example, I like to translate the Add To Cart button. This button has three states, Add To Cart, Adding... and Added... How can I translate these words? Another example, the 'You have no items in your shopping cart.' text in the minicart. I think all these phrases should be translated from js-translation.json, but where to add them so these file is filled with these translations?

• Marius: I'm not 100% sure about this but I think the answer provided by mage2.pro is the correct one. If you have for example this in one of the js files $.mage.__('Add To Cart') it will be automatically picked up by the setup:static-content:deploy command. The only catch is that you have to have in the locale files a different translation for the text. The texts that have as translation the same text are not added to the json file in order to not increase the size without a reason.

Answer 1

Not sure if you figured it out already, but I thought I'd answer anyway..

I guess the other answers are heading in the right direction.

Assuming you already have the translations installed, if not please:

bin/magento i18n:pack -m replace -d source_nl_NL.csv . nl_NL

So, first of all, please clear the cache(as others suggested as well):

rm -rf var/cache var/generation var/page_cache var/view_preprocessed

Secondly, please clear your pub/static folder:

rm -rf pub/static/*/

Then we regenerate the static-content: (I missed the langcode in the other answers..)

bin/magento setup:static-content:deploy nl_NL - Make sure you add the langcode

Now check if there were any js-translation.json created:

find pub/static/ -name "js-translation.json"

Most likely you'll get a list of js-translation.json files. Please check these files and delete them if they're empty or contain something like [].

• Silvan: Thanks Timon, this is indeed the way to go! I figured this out myself a while ago, but did not post the answer here yet. This is a great addition to the question.
• Luis Garcia: @Silvan In my installation the file js-translation.json has already some phrases translated in my locale but there are still phrases not being translated, should I added them manually to this file?
• Silvan: I would not recommend this, because the js-translation file wil be overwritten the next time you deploy static files. In that case you should add the phrases manually every time that you did a deploy. Are these phrases present in the language pack?

Answer 2

Try to add translations to .csv files, then be sure that next steps are executed:

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)

Answer 3

Remove all cache and delele pub/static folder content.

Go to your root directory and run below command:-

php bin/magento setup:static-content:deploy

Hopefully your problem will be resolved.

• Silvan: ArkadiyCh also told me to remove cache and redeploy static files, unfortunately this does not fix my problem.

Answer 4

I had the same problem like "Cannot translate phrases in $.mage.__('XXX')" when phrase in phtml worked perfect. So, the solution was ingeniously simple.

$t(...) and $.mage analizes only files *.js

Consequently it does not fall into the js-translation dictionary.

So when rendering a section script in phtml files, you should directly insert the already translated phrases with wrappers __('Translated phrase') .