I have a wordpress application and usually I use the PHP function <?php _e('foo', 'bar') ?> when I need to echo something that needs to be translated. But, right now I am implementing a new feature and in my .js file I have something like
var confirmation = confirm("Are you sure you want to quit");
if(confirmation){
...
}
The problem with the above code is that I can't use the PHP function _e() to translate it since this a JS script.
Is there anyway to enable translation for texts echoed in JS?
I am putting a bounty since the questions given are generic whereas I am searching for a solution that can solve my issue.
I am working on WP project that was built by someone before. I am supposed to only add a translation to codes that exist in js file called functions.js path: C:\Users\meskerem\foo.com\wp-content\themes\foo\assets\scripts\functions.js let's assume the following code exists inside the function.
var confirmation = confirm("Are you sure you want to quit");
if(confirmation){
...
}
Now the objective is make that English sentence translatable. The above js code is executed when a button inside this file is clicked.
C:\Users\meskerem\foo.com\wp-content\plugins\wp-jobhunt\templates\dashboards\candidate\templates_ajax_functions.php
The html code that triggers the translation is as simple as:
<h1> <?= _e('good morning', 'jobhunt') ?> </h1>
<div> <i class='icon-trash' onclick="askConfirmation()"> x </i> </div>
So, the script is simple but translating is where I have some issues.
In word press you have to pass translation array to respective java script.
for example,
if you are en queue script like below from function.php file,
wp_enqueue_script( $handle, $src, $deps,$ver,$in_footer );
you have to add translation from function file to perticular js by use his handle inside wp_localize_script();
e.g. wp_enqueue_script( 'your-handle', $src, $deps,$ver,$in_footer );
$translation_array = array('messagekey' => __('Are you sure you want to quit', foo'); );
wp_localize_script('your-handle', 'langvars', $translation_array);
In your case
wp_enqueue_script( 'cs_functions_js', plugins_url('/assets/scripts/functions.js', __FILE__ ), '', '', true );
just add below code after above code.
$translation_array = array('messagekey' => __('Are you sure you want to quit', foo'); );
wp_localize_script('cs_functions_js', 'langvars', $translation_array);
Then you can access translation in js like,
var confirmboxmessage = langvars.messagekey;
var confirmation = confirm(langvars.messagekey);
You should use the wp_localize_script function, which was added to WordPress for this very reason.
Try with something like this:
wp_localize_script( $handle, $name, $data );
Example
<?php
// Register the script
wp_register_script( 'some_handle', '<ENTER YOUR SCRIPT PATH HERE>' );
// Localize the script with new data
$translation_array = array(
'some_string' => __( 'Some string to translate', 'plugin-domain' ),
'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );
You can access the variables in JavaScript as follows:
<script>
// alerts 'Some string to translate'
alert( object_name.some_string);
</script>
Note: The data in the resulting JavaScript call will be passed as text. If you are trying to pass integers you will need to call the JavaScript parseInt() function.
<script>
// Call a function that needs an int.
FinalZoom = map.getBoundsZoomLevel( bounds ) - parseInt( object_name.a_value, 10 );
</script>
maybe this could help
function addScript() {
wp_enqueue_script( 'functions', get_template_directory_uri() . 'foo\assets\scripts\functions.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'addScript' );