How to make JavaScript strings translatable (localizable) in Magento 2

May 13, 2016 - Fire development, Magento 2, Magento tips & tricks

Magento 2 Development
To make JavaScript strings translatable or localizable in Magento 2, use

$.mage.__

$.mage.__

For instance:

    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;

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;

Note that you should place the translation in the i18n folder of the module.

It is also necessary to mention that there are some Magento 2 core modules that translate JavaScript strings as follows:

define / require the mage/translate library

/**
 * 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',

/**

* 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

                    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'));
            }
        });
    }
}

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'));

}

});

}

Please note that you have to deal with the autogenerated js-translation.json file, so it is necessary to delete it and flush cache to make the system become able to recheck your new interface strings and the dictionary. It will create a new js-translation.json file. Also note that the js-translation.json file is generated only if you have a language package for your current language.

Source

More tips from Magento 2 cookbook

Post Tags:JavaScript strings localization magento 2 Magento 2 Developer’s Cookbook

← Previous Post Next Post →

Related posts