Strings from Javascript not translated

Resolved Maurizio Melandri
(@melojoy)

4 years, 12 months ago

I used Loco Translate to scan the .js files of a custom plugin. The scan works, the strings present in the .js are added to the .pot file and the .po files. When saving, the .json files are also correctly generated.

In the plugin code, the domain is defined, I used the wp.i18n functions correctly in the javascript files, in the wp_enqueue_script function there is the dependency on ‘wp-i18n’ and I added wp_set_script_translations.

In the frontend, the strings of the PHP files are shown translated correctly but the translation of the strings present in the javascript files is not loaded.

Thank you

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author Tim W
(@timwhitlock)

4 years, 12 months ago

When saving, the .json files are also correctly generated.

I need to verify this is the case, because it sounds like the json files are not correctly generated.

Can you see if the json files are being read and whether the js objects are actually loaded into the page source?

Also – Please post an example with (1) the name of a .json file, (2) the corresponding file reference extracted from the .js code into the PO files, and (3) the path to the .js script file you are queuing.
Thread Starter Maurizio Melandri
(@melojoy)

4 years, 12 months ago
Hi Tim, thanks for reply.

I don’t see the .json file as a resource loaded by the browser. How can I check exactly if the js objects are correctly loaded?

I send you the scripts used in the plugin:
```
<?php
/*
    Plugin Name:       My Plugin
    ...
    Text Domain:       auteciot
    Domain Path:       /languages 
*/
```
```
add_action( 'init', 'mmelandri_plugin_load_text_domain' );
function mmelandri_plugin_load_text_domain() {
    load_plugin_textdomain( 'auteciot', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}
```
```
function mmelandri_wp_enqueue_scripts()
{	
	wp_enqueue_script( 'auteciot-script-functions', plugins_url( '../frontend/js/functions.js', ( __FILE__ )), array ( 'wp-i18n', 'jquery' ), '1.0.0');
}
add_action( 'wp_enqueue_scripts', 'mmelandri_wp_enqueue_scripts' );

function mmelandri_wp_load_text_domain()
{	
	wp_set_script_translations( 'auteciot-script-functions', 'auteciot', plugin_dir_path( dirname(__FILE__) ) . 'languages/');
}
add_action( 'wp_enqueue_scripts', 'mmelandri_wp_load_text_domain', 100 );
```
In /plugins/auteciot/functions.js:
```
const { __, _x, _n, sprintf } = wp.i18n;
console.log(__('Il campo \'%s\' deve contenere %s caratteri.', 'auteciot'), 'A', '99');
console.log(sprintf(__('Il campo \'%s\' deve contenere %s caratteri.', 'auteciot'), 'A', '99'));
```
In auteciot-en_US.po:
```
#: frontend/js/functions.js:49
#, javascript-format
msgid "Il campo '%s' deve contenere %s caratteri."
msgstr "The field '%s' must contain %s characters."
```
In plugins/auteciot/auteciot-en_US-78aae6d73b1bd2d0505f0d1ffcd6bc85.json:
{"translation-revision-date":"2021-05-31 13:18+0000","generator":"Loco https:\/\/localise.biz\/","source":"frontend\/js\/functions.js","domain":"auteciot","locale_data":{"auteciot":{"":{"domain":"auteciot","lang":"en_US","plural-forms":"nplurals=2; plural=n != 1;"},"Il campo '%s' deve contenere %s caratteri.":["The field '%s' must contain %s characters."],"Il campo '%s' deve contenere da %s a %s caratteri.":["The field '%s' must contain %s to %s characters."]}}}

I tried with both the ‘Pretty Formatting’ setting toggle.
Plugin Author Tim W
(@timwhitlock)

4 years, 12 months ago

I don’t see the .json file as a resource loaded by the browser. How can I check exactly if the js objects are correctly loaded?

View the HTML source. JSON contents is printed out as inline JS, not loaded from URLs.

Plugin Author Tim W
(@timwhitlock)

4 years, 12 months ago

Using your example code, the path you’re passing to wp_set_script_translations is wrong. Fix this and I don’t see a problem.

You wrote: plugin_dir_path( dirname(__FILE__) ) . 'languages/';

I think you meant: plugin_dir_path(__FILE__).'languages/';

The JSON file name is indeed correct, but if your actual code has the same mistake as your example code then the issue is there and not in Loco Translate.
Thread Starter Maurizio Melandri
(@melojoy)

4 years, 12 months ago
Hi Tim, Thanks for the reply.

wp_set_script_translations function is not in a file at the MyPlugin’s root level, and with your suggestion plugin_dir_path(__FILE__) I have a relative path to the current file but with plugin_dir_path( dirname(__FILE__) ) I retrieve the parent folder path.

In the HTML source there is no JSON content. Related to wp-i18n there is only this code:
```
<script id='wp-i18n-js-after'>
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
```
Plugin Author Tim W
(@timwhitlock)

4 years, 12 months ago

wp_set_script_translations function is not in a file at the MyPlugin’s root level,

In this case the problem is in your plugins_url call which results in a “..” reference in your path.

Using this doesn’t work:

plugins_url('../frontend/js/functions.js',__FILE__)

Using this does:

plugins_url( 'frontend/js/functions.js', dirname(__FILE__) )

Yes, they reference the same file but WordPress hashes the path without resolving parent references so it will never find the JSON.

Fixing this and using your code from a sub directory works for me without further modification. The JSON is found and loaded.

Thread Starter Maurizio Melandri
(@melojoy)

4 years, 12 months ago

Hi Tim,
thank you so much for the support.

The following code works:
`wp_enqueue_script( ‘auteciot-script-functions’, plugins_url( ‘frontend/js/functions.js’, dirname( __FILE__ )), array ( ‘wp-i18n’, ‘jquery’ ), ‘1.0.0’);
wp_set_script_translations( ‘auteciot-script-functions’, ‘auteciot’, plugin_dir_path( dirname(__FILE__) ) . ‘languages/’);’

Plugin Author Tim W
(@timwhitlock)

4 years, 12 months ago

No problem. Happy to eliminate my plugin as the cause of an issue.

If you find problems like this occurring, you can use the load_script_textdomain_relative_path filter to find out what’s going on. You can also use it to fix bad paths that are producing incorrect hashes in JSON file names.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Strings from Javascript not translated’ is closed to new replies.