magento translation

Custom JavaScript form validators

Magento, thanks to Prototype framework, has nice set of JavaScript validators - so we can validate user input without reloading site. Of course, we cannot rely only on it, but it is good starting point - and for majority of users, it will have good look'n'feel.

But sometimes bulit-in validators are just not enough - for example, we can add custom fields for customer account, address etc. and we need some custom validation there. Magento together with Prototype gives us quick and easy way.

Little bit of theory - Prototype gives us Validation class. To check if form is valid, we have to call validate() method, which checks validation classes. I say classes, cause those are defined by css classes for input, for example:

<input name="someinput" class="required-entry" />  

will require to be not-empty. It would be nice to add our own classes to keep this process so simple as it is. So...

Step 1.

Create your own file, for example /skin/frontend/default/your_skin/js/myvalidation.js and add it to page.xml layout file.
Important note: it must be somewhere below adding script prototype/validation.js - usually, end of head block is good and safe place.
 

Step 2.

Editing myvalidation.js. Take a look on following code:

if(Validation) {        //   1.
    Validation.addAllThese([      //    2.
        [
            'validation-myown',       //     3.
            'Please insert proper word',     //    4.
            function(v,r){ return v.indexOf('valid')==-1?false:true }   //  5.
        ],
       [ ]    // 6.
    ])
}

Little explanations.

  1. We don't want to make any JavaScript error if for some reason validation script is not enabled, so we ensure it exists
  2. Adding a validators. Argument is array, each value of it is also array - so you can add multiple validators at once.
  3. This is css class that validator will be searching for, note that it must begin with validation-  ('-' sign at end) - otherwise it may not work as desired.
  4. This is error message displayed when validation is not passed.
  5. Finally, our most important function - validator itself.
  6. Next validators...

In this example validator function takes two arguments, but in fact usually first one is enough.
So first - called v here - is value of input at moment of validation
Second - called r here - can be useful in very custom validators - it is reference to validated object.
When validator function returns true, validation for field is passed, if false - opposite.

That's it. Quite simple if you will understand process ;)
 

Step 3. (optional)

We have nice error message - but what about case we need to translate it? Well, we can use Magento JavaScript class - Translate. Adding translations is quite simple, but has to be done from template level. We can use Jakub's module (blog.baobaz.com/en/blog/magento-translations-module):

<script type="text/javascript">
    Translator.add('Please insert proper word','<?php echo Mage::helper('translations')->__('Please insert proper word')?>');
</script>

Add this to template where you use your custom validators or create special block for it, so they can be easily reused.

Anything more on validators is just plain JavaScript and your needs :)

Magento Translations Module

One of best things in magento is you can easily add new language versions to the site. It's all done using CSV files - 1 file for 1 module per language. For most popular languages translations are available as free Magento modules on magento connect.

What if we want to change the translations and don't lose changes after updating magento and translations? Or if we want to have translation common independently of module? Or just list all the texts that were added by us and are not original magento texts? We can create our own very simple translations module.

You need to edit only 2 files:

  • etc/config.xml
    <?xml version="1.0"?>
    <config>
            <modules>
                    <Baobaz_Translations>
                            <version>0.1.0</version>
                    </Baobaz_Translations>
            </modules>
           
            <global>
                    <helpers>
                            <translations>
                                    <class>Baobaz_Translations_Helper</class>
                            </translations>
                    </helpers>
            </global>
           
            <frontend>
                    <translate>
                            <modules>
                                    <Baobaz_Translations>
                                            <files>
                                                    <default>Baobaz_Translations.csv</default>
                                            </files>
                                    </Baobaz_Translations>
                            </modules>
                    </translate>
            </frontend>

    </config>
  • and helper/data.php:
    class Baobaz_Translations_Helper_Data extends Mage_Core_Helper_Abstract
    {

    }

and that's it... Module must be turned on (in etc/modules) and it will work fine.

in app/locale/fr_fr/ we create file Baobaz_Translations.csv and in it we put all the new translations we need.

Then, anywhere in magento - doesn't matter if it's template, block or controller - we can use:

echo Mage::helper('translations')->__('text to translate');

Yes. It is that simple.

eZ Gento, an alternative CMS Module for Magento: Content translation [Part 2]

Content management as a tree structure in eZ-Gento is a big step forward, but it's just a small part of the new features made available.
One of the purposes of Magento store views is to allow you to define additional languages for your e-Store.
Indeed, Magento site can be visited by clients from other countries and we don't want to lose them. That's why, as you know, we can create additional store view and assign each of them to different language.
Magento allows you to duplicate CMS content pages or blocks in order to have one for each store view and therefore one for each language. Having many pages with the same ID can become confusing and hard to manage when you have many pages and/or many languages.

Now everything is easier with ezGento! eZ-Gento comes with automatic mapping between Magento store views and eZ Publish siteaccesses. It means, that when we access the "french" store view, a "french" eZ Publish siteaccess will be asked for content. So if requested page has french translation, it will be displayed.

Remember that there are two main ways of defining content translation in eZ Publish:

  • The first one is to add a translation to an exisiting page. This way one content tree has pages with two (or more) translations.
  • The second one is to define a separate content tree and have a different page structure in a new language. (This is useful when we don't want to limit or when we want to extend content comparing to the initial language.)

Of course it is possible to mix both methods and add only a few additional pages in new language, or just not to translate some of them.

What about friendly URLs? eZ Publish comes with powerful URL management. Different language has its content with proper URL. By default it's created from the page title, but it's also possible to define additional fields just for URL.

For more multilingual features please refer to eZ Publish documentation page.

All that is possible in eZ Publish is now available in Magento thanks to eZ-Gento!

See eZ Gento, an alternative CMS Module for Magento [Part 1] for more informations on eZ Gento.

eZ Gento

Translation in Magento

Translations between languages is quite simple in Magento. For an advanced developer, who has already worked with PHP frameworks, it is not a matter to discuss, but for a beginner it may need a few words of explanation. All texts on the page that should be translated, are stored in CSV files, in /app/locale/[language] directory. The [language] part of the path is build of language code, e. g. 'en_US'.

If you have a look at the files content, you will find that every file structure is the same, one line contains two texts: one in your default language, and one in the destination language. To use the files - also called dictionaries - they must be declared in module's config file (config.xml). You should put this code directly inside your frontend or admin node of the config file.

<translate>
        <modules>
                <companyname_modulename>
                        <files>
                        <default>CompanyName_ModuleName.csv</default>
                        </files>
                </companyname_modulename>
        </modules>
</translate>

That's all. Now, when you want to use a phrase that should be translated, use:

echo $this->__('text to translate');

Magento will look in you dictionary files for the phrase 'text to translate' and will return the corresponding text in the proper language.