Fix Javascript Translation Not Working Properly in Magento 2

js-translationlocalisationmagento-2.1magento2

I've translated some text in a javascript file with translation.js, I've done it the following way:

I've defined the translator.

define([
'mage/translate',
];

After that, I translated my text.

 $.mage.__('excl. VAT')

And added the translation in the CSV file.
The strange thing is, that sometimes it get's translated and sometimes not…

Did I miss something?

Best Answer

Best approach for this would be to use 'domReady!' in your define to make sure document is fully loaded once translation is applied.

define([
    'jquery',
    'underscore',
    'domReady!'
], function ($, _) {...}

Related Solutions

Magento – Translation not working for “please specify shipping method”

I encountered this before. I think it's a magento bug. The text comes from app/code/core/Mage/Checkout/etc/jstranslator.xml:

<validate-shipping-methods-required translate="message" module="checkout">
    <message>Please specify shipping method.</message>
</validate-shipping-methods-required>

The problem is that in the same file there is an other element with the tag validate-shipping-methods-required(as the item above) and this interferes with the translation of this text. The element is this one (2 elements lower that the first one):

<validate-shipping-methods-required translate="message" module="checkout">
    <message>Please specify payment method.</message>
</validate-shipping-methods-required>

That should be:

<validate-payment-methods-required translate="message" module="checkout">
    <message>Please specify payment method.</message>
</validate-payment-methods-required>

I know it's against every Magento best practice, but I modified the core file directly, (in hope that this will be fixed in the next version) and everything works now.

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.

Best Answer

Related Solutions

Magento – Translation not working for “please specify shipping method”

Magento 2 JavaScript – Text Translations Guide

Related Topic