How to make the JavaScript strings localizable (translatable)

dmitry_fedyuk · September 23, 2015, 2:37pm

Use $.mage.__.
An example:

magento/magento2/blob/6a9988382bb0cdec11fd15694008977d261028de/app/code/Magento/Catalog/view/adminhtml/web/js/custom-options.js#L38


    this._initSortableSelections();
    this._bindCheckboxHandlers();
    this._bindReadOnlyMode();
    this._addValidation();
},


_addValidation: function () {
    $.validator.addMethod(
        'required-option-select', function (value) {
            return (value !== '');
        }, $.mage.__('Select type of option.'));


    $.validator.addMethod(
        'required-option-select-type-rows', function (value, element) {
            var optionContainerElm = element.up('div[id*=_type_]'),
                selectTypesFlag = false,
                selectTypeElements = $('#' + optionContainerElm.id + ' .select-type-title');


            selectTypeElements.each(function () {
                if (!$(this).closest('tr').hasClass('ignore-validate')) {
                    selectTypesFlag = true;

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

github.com

magento/magento2/blob/6a9988382bb0cdec11fd15694008977d261028de/app/code/Magento/Braintree/view/frontend/web/js/cc-edit-form.js#L9


/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
/*jshint jquery:true*/
define([
   "jquery",
   "braintree",
   'mage/translate',
   "jquery/ui"
], function ($, braintree, $t) {
   'use strict';


   $.widget('mage.braintreeEditForm', {
       options: {
           backUrl: '',
           formId: '#form-validate',
           creditCardTypeId: '#credit_card_type',
           deviceDataId: '#device_data',

and use it:

github.com

magento/magento2/blob/6a9988382bb0cdec11fd15694008977d261028de/app/code/Magento/Braintree/view/frontend/web/js/cc-edit-form.js#L202


                    success: function (response) {
                        $('body').trigger('processStop');
                        if (response instanceof Object) {
                            if (response.success) {
                                $('body').trigger('processStart');
                                window.location = self.options.backUrl;
                            }
                        }
                    },
                    error: function (response) {
                        alert($t('There was error during saving card data'));
                    }
                });
            } else {
                //handle error
                $('body').trigger('processStop');
                alert($t('There was error during saving card data'));
            }
        });
    }
}

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.

dmitry_fedyuk · October 22, 2015, 12:09am

See also:

hellsanos · January 11, 2016, 8:22am

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 · January 11, 2016, 8:27am

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 · January 11, 2016, 8:39am

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:

Cache Storage should be flushed (basically var/cache and var/view_preprocessed folders should be cleared)
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 · January 11, 2016, 8:43am

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.

niclashoyer · January 23, 2016, 10:53am

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.

itaymesh · May 10, 2016, 12:49pm

I am facing the same issue here also.