How to Localise Your JavaScript-Frontend in CakePHP

How to Localise Your JavaScript-Frontend in CakePHP

CakePHP Localisation Tutorial Screenshot

In this post, I am going to outline a quick and easy solution to using the CakePHP translation facility in your JavaScript front-end.

Please note that there are much more advanced solutions to the problem of having to translate strings in your JavaScript app, but I like to use this concept for smaller apps since it is an effective way of achieving the desired end-result.

If you’re interested in seeing it in action, check-out the live-demo of one of my apps. The first account is English, whilst the second one is in German:


So, let’s get started – what we want to achieve is the following:

  • Be able to translate your stuff through your PO/MO files
  • Have all of our strings available on a JavaScript object
  • Be able to switch the language of your app


Let’s go ahead and take a look at the (rather simple) code. Just drop the following into your respective view-file:

	App::uses('L10n', 'I18n');
        $L10n = new L10n();
        $appVars = json_encode(array(
            'Locale' => Configure::read('Config.language'),
	    'LangCode' => $L10n->map(Configure::read('Config.language')),
            'Timezone' => Configure::read('Config.timezone'),
            'BaseUrl' => Router::url('/'),
            'WebrootUrl' => $this->Layout->getWebroot(),
            'Lang' => array(
                'Error' => __('Error'),
                'OK' => __('OK'),
                'Uncategorised' => __('Uncategorised'),
                'All' => __('All'),
                'Cancel' => __('Cancel'),
                'Accept' => __('Accept'),
        echo $this->Html->scriptBlock('var YourObject = ' . $appVars . ';', array('inline' => true));


As you can see, I also like to add some other useful information such as the webroot URL or the app’s root URL. This way, I can simply use these variables within my app.

To display your strings, simply access the object like this: alert(YourObject.Lang.Accept);

All in all: what we now have is one central object which can be used to show your localised strings, to get the base-URL for AJAX calls and to set the language for external libraries. For example, I personally use the “LangCode” and “Timezone” properties to set-up libraries such as moment.js.

Please note that this is just meant to point-out the concept. For example, you may like to abstract this all away into a helper method, or you might like to be able to rather set these variables from your controller. Depending on the kind of data you save in this object, serving its localised variants from a cache may also be a good idea.

So there we go, you can now change the language of your CakePHP app by setting Configure::write(‘language’, ‘deu’) and voliá: your JavaScript-frontend is German!

If you have any questions or other queries, just give me a shout in the comments section.

No comments

Leave a reply

Your email is never published nor shared. Required fields are marked *

Security Question * Time limit is exhausted. Please reload CAPTCHA.