Magento 2 – Localisation in Javascript

javascriptlocalelocalisationmagento2template

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?

Best Answer

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 [].

Related Solutions

Magento 2 JavaScript – Text Translations Guide

OK. I found a solution but it seams ugly to me.
In the layout handle of the page I need I add this:

<referenceContainer name="after.body.start">
    <block class="Magento\Framework\View\Element\Template" name="some-name-here" template="[Namespace]_[Module]::translate.phtml"/>
</referenceContainer>

then create the template translate.phtml in [Namespace]/[Module]/view/[frontend|adminhtml]/templates with this content:

<?php
$_data = array(
    'Text one to translate' => __('Text one to translate'),
    'Text two to translate' => __('Text two to translate'),
);
?>
<script type="text/javascript">
    require(["jquery","mage/translate"], function($){
        $.mage.translate.add(<?php echo Zend_Json::encode($_data) ?>)
    });
</script>

I really hope there is an other way of doing this.

Magento – Translating “Add to Cart” and “Go to Top”

It might be an issue with hardcoded lines but first try to find the strings in the corresponding phtml files.

You can use template hints under System > Configuration > Developer > Debug (set scope to the website) to see what phtml file the line is in. Then open up that file, probably under app/design/frontend/[package]/[template]/template/path/to/file.phtml and look for the line Add to Cart for example.

Check if it is inside something that looks like

<?php echo $this->('Add to Cart')?>

If so: go to the locale/nl_NL/translate.csv file under app/design/frontend/[package]/[template]/ or create it and add the line

"Add to Cart","Voeg toe aan winkelwagen"
"Go to Top","Ga naar boven"

If it's not wrapped in the above code you can do so yourself. This will tell Magento to translate it

Update

Best Answer

Related Solutions

Magento 2 JavaScript – Text Translations Guide

Magento – Translating “Add to Cart” and “Go to Top”

Related Topic