How to set translations in javascripts for my plugin?

Question

How to set translations in javascripts for my plugin?

J.BizMai

2017年9月20日 14:12

I have in my plugin :

form.js : js script to do a custom validation on form fields
js_lang.php : based on this stackoverflow post
my-plugin-domain-fr_FR.po

In form.js, I use a var (msg_must_match) from js_lang.php

function inputsMatch( inputTypes, idInputReferring, idInputRepeat ){
        var inputReferring = document.getElementById( idInputReferring );
        var inputRepeat = document.getElementById( idInputRepeat );

        var checkPasswordValidity = function() {
            if (inputReferring.value != inputRepeat.value) {
                inputRepeat.setCustomValidity( msg_must_match /*-- here*/ );
            } else {
                inputRepeat.setCustomValidity('');
            }
        };
        inputReferring.addEventListener('change', checkPasswordValidity, false);
        inputRepeat.addEventListener('change', checkPasswordValidity, false);
}

In my js_lang.php I try to manage the translation loading my-plugin-domain-fr_FR.po without success

$locale = "fr_FR";

putenv("LANG=".$locale); 
setlocale('LC_ALL', $locale); 
bindtextdomain("my-plugin-domain", "./locale/");  
textdomain("my-plugin-domain");
$str = 'It is must match with the previous input';
?
msg_must_match = "?php echo gettext( $str ); ?"

I do not manage to load correctly the .po file. Someone could help me ? Is there a easier wordpress way to do this ?

Topic xgettext translation Wordpress javascript

Category Web

Jacob Peattie · Accepted Answer · 2017年9月20日 14:12

The WordPress way to do this is the wp_localize_script() function.

When you enqueue a script, also add a call to wp_localize_script():

wp_register_script( 'my-script', 'path/to/script.js' );
wp_localize_script( 'my-script', 'myScript', array(
    'msg_must_match' => __( 'Message must match', 'my-plugin-domain' ),
) );

This creates a global JavaScript object called myScript that will contain the keys and values passed as an array in the 3rd argument. So you can pass in strings using the WordPress translation functions, which will get translated just like any other string in your plugin.

Then in your script you can use those values for your strings:

inputRepeat.setCustomValidity( myScript.msg_must_match );

How to set translations in javascripts for my plugin?

About