How to Localise Your JavaScript-Frontend in CakePHP

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:

View Live-Demo

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.