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

score 35 · Answer 1 · answered Feb 02 '16 at 05:43

35

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

answered Feb 02 '16 at 05:43

Keyur Shah

18,046
6
66
80

created ar_KW.csv in my module i18n folder in that translated "Enter Your message here" in my j i tried it not working but in phtml if i do echo my translated text i displaying – Pradeep Kumar Feb 02 '16 at 06:05
Did you clear your cache and static-content deploy ? @PradeepKumar – Keyur Shah Feb 02 '16 at 07:23
Just the answer I was looking for! +1 – thdoan Aug 01 '16 at 10:22
Be aware that this will not work if you use it directly in phtml files. Magento will only parse and translate from js and html files. – eInyzant Feb 09 '18 at 03:00
1

This will work but is not the that clean of a code; you are requiring mage/translate but are not using it. . – oliver de Cramer Nov 06 '18 at 12:38

score 13 · Answer 2 · answered May 02 '17 at 05:25

13

This worked for me:

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

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

answered May 02 '17 at 05:25

Sharfaraz Bheda

1,323
16
28

Reference: /vendor/magento/module-checkout/view/frontend/web/js/view/payment.js – Sharfaraz Bheda May 02 '17 at 06:39
1

All right but the variable name for the mage/translate must be $t, not the $tr https://magento.stackexchange.com/questions/293771/the-i18ncollect-phrases-command-does-not-collect-all-translatable-strings-fro/293772#293772 – Siarhey Uchukhlebau Oct 25 '19 at 10:06

score 11 · Answer 3 · answered Feb 24 '18 at 03:50

11

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

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

answered Feb 24 '18 at 03:50

Roman Snitko

786
5
15

score 5 · Answer 4 · answered Feb 02 '16 at 09:22

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

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

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

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 )
remove var folder and run bin\magento setup:static-content:deploy en_US ar_KW
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

Hello, i have done all steps as per your answer, the code i added for ex : alert($.mage.__('js test')); is correctly coming in the language file generating but when i change the translatiion the js message still comes the same. Am i missing something ? — Sunil Verma, Feb 03 '17 at 08:11

score 2 · Answer 5 · answered Oct 31 '17 at 07:51

2

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

answered Oct 31 '17 at 07:51

Pradeep Kumar

8,731
12
60
86

score 0 · Answer 6 · edited Apr 13 '17 at 12:55

0

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.

edited Apr 13 '17 at 12:55

Community

1

answered Feb 02 '16 at 08:48

g5wx

681
1
10
21

score -1 · Answer 7 · answered Jan 04 '17 at 20:10

-1

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

done

answered Jan 04 '17 at 20:10

Thibault LHOTELLIER

23
1

Could you add some more details for the answer as to how and why it works? – tjons Jan 04 '17 at 22:46

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

7 Answers7

Linked