Javascript localization doesn’t load. How to Internationalize javascript without plugin?

Question

Good News after 2 days!

I resolved my issue, but I believe that wp i18n make-json does not generate the json file correctly. Why?

Because it uses the ISO codes and not the locale (get_locale()) from the browser/user. So it isn’t “en_GB” that should be used but “en” in the .json file.

This :

"locale_data": {"messages": { "lang": "en_GB",...

should be :

"locale_data": {"messages": { "lang": "en",....

That means that you can’t distinguish between ‘en_US’ and ‘en_GB’.
So it makes no sense to name these files (.po and .json) with the locale (en_GB) if json use only ISO 639 to retrieve used language.

As a reminder : Language_Country (en_GB) correspond to Language[ISO 639]_country[ISO 3166].

I also think it’s a pity, even if the documentation specifies it, that wp i18n make-json (Cli Command) should automatically generate the name of the json file based on the files (at least for WordPress) that already exist and assuming you already have a .pot and .po file.

For example, from these files: Awesome.pot , fr_FR.po, en_GB.pot with “Awesome” as the text-domain, obtain: Awesome-en_GB-md5.json and Awesome-fr_FR-md5.json.

Here the script to use to javascript internationalization for a script from the theme folder:

Theme/script/file.js doesn’t change. see in the original question.

Files inside Theme/languages folder doesn’t change.

Theme/functions.php :


function actionjs_enqueue_scripts() {
  wp_enqueue_script(
    'main-action',
    get_template_directory_uri() . '/script/action.js',
    array('jquery', 'wp-i18n' ),
    '1.0.0',
    true
  );
}

add_action( 'wp_enqueue_scripts', 'actionjs_enqueue_scripts' );

function load_js_text_domain(){
  wp_set_script_translations(
    'main-action',
    'your-text-domain',
    get_stylesheet_directory() . '/languages'
  );
}
add_action( 'wp_enqueue_scripts', 'load_js_text_domain', 100 );

add_action("after_setup_theme", function () {
  load_theme_textdomain(
    'your-text-domain',
    get_stylesheet_directory() . '/languages'
  );
});

The script for text-domain-en_GB-md5.json file looks like this :

{
    "translation-revision-date": "2023-09-14 19:28+0200",
    "generator": "WP-CLI\/2.8.1+infong1.1.2",
    "source": "script\/action.js",
    "domain": "your-text-domain",
    "locale_data": {
        "messages": {
            "": {
                "domain": "your-text-domain",
                "lang": "en", // And not "en_GB", only ISO 639
                "plural-forms": "nplurals=2; plural=(n != 1);"
            },
            "Ville principale": [
                "Main town"
            ],

Related Posts: