Adding translations to the Jive 8 i18n bundle

Version 1

    There doesn't seem to be any documentation for this area of customisation, so I thought I'd write up what I've found. We're in the process of migrating a bunch of Jive 6 customisations to Jive 8 and we used to set up a JavaScript variable with the translations we needed to access in a bunch of JavaScript functions that got called later on. These were declared pretty high up in the stack of FTLs (in header-javascript-global-params-e14.ftl) like this;

     

    var e14_i18n = {  
        lblWithXInStock: '<@s.text name='pf.productsearch.lblWithXInStock'/>',  
        lblNotAvailForYourRegion: '<@s.text name='pf.productsearch.lblNotAvailForYourRegion'/>',  
        lblExportInfo: '<@s.text name='pf.productsearch.lblExportInfo'/>',
    

     

    It was never ideal, but Jive did this a lot too (with a tonne of boilerplate JS and i18ns baked inline into each page.. yuck).

     

    In Jive 8 (and possibly 7) Jive have done a much better job re-engineering things so that there's a lot less baked into the HTML of the page, so when we went to migrate this code, we wanted to see how to do this better.... the problem is, there's no documentation (that I could find) on how to do it better.

     

    Here's how...

     

    You'll find that Jive creates a global object called jive.i18n .. you can see it getting loaded & initialised if you look at the files the page loads;

     

     

    By a bit of trial and error I found that you can access the i18n object like this in JavaScript (using the i18n keyname);

     

    jive.i18n.jsGetMsg('event.access.label');
    

     

    So the only thing left to do is work out how to add your own custom translations, which is relatively easy... when you know how. We've added ours via a general plugin we use for adding global JavaScript across the site, but you can do this in any custom plugin that you use. First add a few i18n property files into the resources folder of the plugin, e.g.

     

     

    Next all you need to do is add a single line of code to plugin.xml.. the value in bundleName should match the start of the i18n filename you used above.

     

    Compile the plugin and load it onto your site & the i18n's you've specified will magically get added to the jive.i18n object. All you need to do is access them using jive.i18n.jsGetMsg(keyname).