At last with CE 1.7, Magento is shipped with a tool that allows very easy translation of Javascript strings. This works for any Javascript text like a dialog box or a form validation for instance.

Everything happens in the jstranslator.xml file. This file that must exist for each module needing JS translate, must be present in the folder /etc of each module having JS translations.

There is no difference between frontend and admin ; the same file will be used for both.

The jstranslator.xml file has this markup:

<jstranslator>  
    <[un-identifiant-unique] translate="message" module="[monmodule]">
        <message>An English message to translate</message>
    </[un-identifiant-unique]>
    <[un-autre-identifiant-unique] translate="message" module="[monmodule]">
        <message>Another English message to translate</message>
    </[un-autre-identifiant-unique]>
</jstranslator>

Requirements

  • A module must be declared
  • This module must be ready to receive translations (.csv files + Helpers and translate node must be declared in the module's config.xml)

Translate some text

This is done by using the Javascript object Translator which already exists in Magento. We pass the string to translate to this object with its translate() method.

For example:

alert(Translator.translate('Some JS Alert'));

We then add the translation in the module's .csv translation file (translated in French in this example):

"Some JS Alert","Une alerte JS"

At last, we implement jstranslator.xml. We first create a jstranslator.xml in our module's /etc folder. We then write the code below:

<jstranslator>  
    <jstranslate-js-alert translate="message" module="jstranslate">
        <message>Some JS Alert</message>
    </jstranslate-js-alert>
</jstranslator>

Please note that the value of the module attribute is jstranslate. Actually, this is the module's name as declared in its config.xml file. In this example, this is jstranslate.

Translate a form validation

In the case where we need wome specific form validation that does not exist in Prototype validations, there is no need to call the Javascript object Translator. Indeed, Magento manages those validations translations by itself! Here is an example with a sample form:

<form action="<?php echo $this->getUrl('FORM_URL'); ?>" method="post" id="jstranslate_form">  
    <div class="input-box">
        <input type="text" name="jstranslate-input" id="jstranslate_input" title="<?php echo $this->__('Some input'); ?>" class="input-text validate-jstranslate"/>
    </div>
    <div class="actions">
        <button type="submit" title="<?php echo $this->__('Submit'); ?>" class="button"><span><span><?php echo $this->__('Submit'); ?>``</button>
    </div>
</form>

Please note that the input has the validate-jstranslate class which will be used for form validation.
Below the form, we then have the Javascript code below. Please make sure to place the validation prior to instanciating Varien_Form.

<script type="text/javascript">  
    Validation.add('validate-jstranslate', 'Some Validation Rule', function(v) {
        return !Validation.get('IsEmpty').test(v);
    });
    var jstranslateForm = new VarienForm('jstranslate_form');
</script>

The string to be translated here is "Some Validation Rule". We then add the following line to our jstranslator.xml file:

<validate-jstranslate translate="message" module="jstranslate">  
    <message>Some Validation Rule</message>
</validate-jstranslate>

And we add the translation to our module's .csv file (still in French):

"Some Validation Rule","Une règle de validation"

Also...

We do not forget to clear caches: "Configuration", "Layouts", "HTML Blocks", "Translations".

Example module

An example module is available here: https://github.com/herveguetin/Herve_JsTranslate