Internationalization in CakePHP JavaScript Files

Question

I am completing the project using Cakes internationalization features so that our application can be translated into different languages. It did a great job.

The problem I noticed, although there are several places where the text is added via JavaScript, and this text is currently not coming from the server at all. This is for things like dialog boxes and several pieces of text that change depending on the choice of users.

How did you deal with this in your applications? How would you handle this? Is there a library or component that handles this. What about any jQuery libraries?

Answer 1

You can also do this using JavaScript translation files in this format:

lang = { no: "No", yes: "Ja", agreed: "Akkoord" } 

One file per language, for example: lang.nl.js, lang.es.js, lang.en.js ...

Then you can check the current language and, depending on it, download this or that file:

 if($this->Session->read('Config.language') == 'es'){ $this->Html->script('lang.es', array('inline' => false)); }else{ $this->Html->script('lang.en', array('inline' => false)); } 

And inside your javascripts, instead of using something like this:

 alert("Yes"); 

You should use this:

 alert(lang.yes); 

What is it:)

Answer 2

CakePHP does not have a built-in / standard way to localize JavaScript. It offers various ways to localize strings in general. See Internationalization and Localization.

To localize strings output using JavaScript, consider:

• For “static” lines (that is, lines that are independent of the content of your site), create localization files for your scripts. Many plugins use this approach. For example, see this page on localizing date pickers. JQuery-UI UI / Datepicker / Localization

• If you already localize strings on your website via .po files and want to use the same translations in your JavaScript, you might consider dynamically creating translation files, as indicated in 1.) , for example

In your app/Config/routes.php , enable parsextensions, see File Extensions

 Router::parseExtensions('json'); 

Create a controller that will output strings localized as JavaScript / JSON

 http://example.com/localized/strings/eng.json class LocalizedController extends AppController { public function strings($lang) { if('json' !== $this->request->ext) { throw new NotFoundException(); } // Switch to the requested language Configure::write('Config.language', $lang); $strings = array( 'hello', 'world', ); //translated the strings $translations = array(); foreach ($strings as $string) { $translations[$string] = __($string); } // build and send a JSON response $this->autoRender = false; $this->response->type('json'); $this->response->body(json_encode($translations)); return $this->response; } } 

This json file should now be accessible through http://example.com/localized/strings/eng.json and can be loaded from your javascripts at runtime

note

Just clarify; the example is untested and simply illustrates the idea of ​​dynamically creating JSON (or JavaScript) files containing localized strings. The code is far from efficient and (at least part) the code should not be inside the controller, but (for example) inside the model.

Answer 3

To translate JavaScript inside my CakePHP applications, I use this library: https://github.com/wikimedia/jquery.i18n , which is used on Wikipedia.

You have all the necessary files inside the src folder. It is very easy to configure and use. Of course, it works with any application, not just CakePHP!

Answer 4

Here is the solution I use for cakePHP 3:

in your layout file (my default.ctp):

 if( isset( $translated_js ) && !empty( $translated_js ) ){ $this->Html->scriptStart($block_render); echo "var translated_js = " . json_encode( $translated_js ) . ";"; $this->Html->scriptEnd(); } 

Now in any controller add the beforeRender method:

 public function beforeRender(Event $event){ parent::beforeRender( $event ); $translated_js = [ 'reinit_map' => __('Reinit map to default'), ]; $this->set( 'translated_js' , $translated_js ); } 

This way you can use gettext statements.

In your JS files, you can now use the translated electronic elements as follows:

 translated_js.reinit_map 

Hope this helps someone find a way to translate texts and move on to JS

Answer 5

I had the same problem as you, and I found this link very useful: http://jamnite.blogspot.de/2009/05/cakephp-form-validation-with-ajax-using.html

This is not relevant, but the basic principle should be clear.

Answer 6

Check out this CakePHP plugin: https://github.com/wvdongen/CakePHP-I18nJs

It uses the functionality of Drupal 8 JavaScript translations. It has CakePHP console functions for generating .po files (just like you use with Cake), and for creating your translated .po files in JavaScript.

Answer 7

I am using a simpler method. (I don't know if this is the best, but it works).

Inside the template file, I define a series of hidden message fields that js may need.

 echo( $this->Form->hidden( 'msg-select-promotion-items', [ 'value' => __( 'Select promotion items' ) ] ) ); 

Here we use our own cake localization system.

And then in the js file:

 alert( $('input[name=msg-select-promotion-items]').val() ); 

Hope this helps. Sincerely. Facundo.