Skip to content

Javascript localization within Plone

For a while now, I’ve been trying to think of the best way to get localized strings into Javascript under Plone. Many existing packages and parts of Plone use one Javascript file per language, containing all translations. Whilst this is effective, it doesn’t “feel right” having all your translations distributed to the user on each page load, much less having them drawn from two different sources. Worse still (in my mind) is having translations dumped out into hidden HTML elements and then recalled by Javascript using getElementById or some such.

The solution I’ve eventually settled on is one that combines AJAX and client-side caching in cookies to minimize page load time. The implementation consists of a single view, a Javascript file and a bunch of XML & ZCML to tie it all together.

The powers that be here at Isotoma, have kindly agreed to let me open source this under the Apache 2.0 license.

Full documentation can be found for the code can be found in the README.txt, however I’ve included a quickstart guide below.

  1. Add jsl10n to the eggs and zcml directives of your buildout:
    eggs = ...
          jsl10n
    zcml = ...
          jsl10n
    
  2. Install using the portal quickinstaller
  3. Try it out in your own Javascript code using the following format:
    required_translations = [
      {'msgid':'my_message',
       'default':'Hello world!'}
      ];
    translate('domain', required_translations,
      function (translations) {
        alert(translations['my_message']);
      }
    );
    

And that’s it!