How to translate JS error message or text in Magento 2?

Question

I have two views English and Arabic default js validation error message needs to translate in Arabic so how to do it? And also I have a few custom texts on how to do it.

I created an i18n for Arabic is working fine if I do echo in PHTML or PHP file, the same way how to brig it into js also in Magento 2

anyone help me out

Answer 1

You can translate js error message like this

require([
'jquery', // jquery Library
'jquery/ui', // Jquery UI Library
'mage/translate' // Magento text translate (Validation message translte as per language)
], function($){ 
    $(window).load(function() {
        alert($.mage.__('Enter Your message here'));
    });
});

Magento2 use mage/translate.js for translation

Answer 2

This worked for me:

define(
    [
        'mage/translate'
    ],
    function (
        $tr
    ) {

        $tr('<your text>'),
    }
);

Answer 3

Additional note: if you need to include some variable to translation (in js), you can use this:

$.mage.__('Hello %1').replace('%1', yourVariable);

Answer 4

after digging deep i come to know the concept of localization in magento2

below are thing you need to follow , in my website we have two view en and ar_kw Arabic

1. Create language package http://devdocs.magento.com/guides/v2.0/config-guide/cli/config-cli-subcommands-i18n.html#config-cli-subcommands-xlate-example2

2. to get all phrases you need to run command ex

   php D:\xampp\htdocs\magento2\bin\magento i18n:collect-phrases -o "D:\xampp\htdocs\magento2\app\code\Sugarcode\Test\i18n\ar_KW.csv" D:\xampp\htdocs\magento2\app\code\Sugarcode\Test
   

   it ill read my test module and create a csv Sugarcode\Test\i18n\ar_KW.csv

it will get all __('Some Text') and $.mage.__('Some Text') in js and prepare a csv

3. now translate the newly generated file to Arabic which you can keep in name of ar_KW.csv locale code (it may be inside your module or it may be inside you language module )

4. remove var folder and run bin\magento setup:static-content:deploy en_US ar_KW

5. it will create all js along with js-translation.json file in each theme/ ex luma/ar_KW, js-translation.json will have all js side translated data in json format when ever you see the error msg it ill shown from this file only

Answer 5

it throw error if you use __ so follow below code

  require([
    'jquery', // jquery Library
    'mage/translate'
   ], function($,$t){ 
        $(window).load(function() {
            alert($t('Enter Your message here'));
        });
    });

Answer 6

I had the same problem with js translations so i created a new language pack within app/i18n/... folder and refresh the cache.

See translating problem in JS templates.

Answer 7

Add in a template .phtml your error message like :
<?php echo __('This is a required field.'); ?>
- active translate online
- translate

done