This article discusses how to expose the translation system of symfony, so that it is made 

available to your javacript scripts. 

For translation handling purposes in symfony, we suggest to install JMSTranslationBundle, 

which, according to its author, "puts the Symfony Translation Component on steroids."

Assume you have made the proper settings to have the translation system up and running, 

including strings properly translated (in JMSTranslationBundle you can check them with an easy 

web interface). 

Now you have to install BazingaJsTranslationBundle.

This bundle makes available to javascript a global object for translation of texts and strings.

For more information regarding installation and setup, refer to the official documentation very 

clear and complete.

Don't forget to publish assets, include the javascript resource for Translator and clean up cache. 

The most common errors always concern the simplest things ;)!

Now let's consider possible applications of such bundle.

So, the Translator global object is available for your javascript scripts and, as explained by the 

author, it is AMD ready. 

The default language can be set in two ways.

Via html tag:

<html lang="it">

 Via javascript:

Translator.locale = "it";

Then you can set a fallback language and a default domain:

# app/config/config*.yml
    locale_fallback:      it
    default_domain:       messages

The simplest possible call is the following:


this will act exactly as the *trans* method belonging to Translator service of symfomy.

The trans method takes 3 arguments:

 1. the translation key

 2. an array of parameters for placeholders replacement

 3. the domain

Translator.trans("key", { "foo" : "bar" }, "DOMAIN_NAME");
// will replace each "%foo%" in the message by "bar".

The Translator object implements the TranslatorInterface interface, providing among the others, 

the function 'transChoice':

Translator.transChoice("key", 1, {}, "DOMAIN_NAME");

One of the most useful features offered is the "pluralization". 

Suppose your translation file contains the key 'bug':

# app/Resources/messages.en.yml
bug: "{0} Yuppie, nessun bug!|{1} Solo un bug|[1,5] Ci sono %count% bugs|[6,Inf] Oggi non si va a casa"
Translator.transChoice("bug", 0, {"count" : 0});
// will return "Yuppie, nessun bug!"

Translator.transChoice("bug", 1, {"count" : 1});
// will return "Solo un bug"

Translator.transChoice("bug", 2, {"count" : 2});
// will return "Ci sono 2 bugs"

Translator.transChoice("bug", 5, {"count" : 5});
// will return "Ci sono 5 bugs"
Translator.transChoice("bug", 42, {"count" : 42});
// will return "Oggi non si va a casa"

It is advisable to have in your projects a translation system always in place, even for a single 

language project, as texts are always changing and it's simpler acting on yml files rather than 

changing php files.

Happy coding!

Alessandro Nuzzo

Senior Web Developer , Website , Git home page , @aleinside , Linkedin profile
I am a developer since 2006. I am a basket and whisky lover, interests that i follow separately for obvious reasons. I am also the Milan PHP User Group founder and coordinator.

All articles by Alessandro Nuzzo


comments powered by Disqus


Follow Us