Google announced on the 26th of May 2011 (the day I blogged about this solution!) that the translation API used by the jQuery plugin is now deprecated and will be shut off completely in December 2011. The author of the jQuery plugin will develop it to use the Microsoft translation API. Google are shutting down the API due to “extensive abuse” and recommend using the Google Translate Element. Whether the Microsoft translation service will be as good as Google we will need to wait and see. The author of the plugin comments “… the Microsoft API provides a method for array translation (just as Google’s v2 API), which eliminates almost all bugs with this plugin, and will make it a bit faster too. The quality of the translation is not any worse I think, so there’s nothing to worry about.” If you want to implement this solution bear in mind that changes to the plugin will take place at some point and the Google API will certainly stop working in December 2011.

Automatic jQuery Translator for Magento

Having looked at integrating the Google element translation tool into Magento to provide a quick fix content translation service I wanted to improve this tool by automatically translating content based on visitor browser language without the visitor having to manually select a language on every page. Despite spending a lot of time looking at ways to manipulate the Google element translator code I couldn’t come up with a good solution until I came across the jQuery dynamic google translation plugin which integrates the Google Ajax Language API to jQuery and provides a really flexible and powerful method of dynamically translating content. Using jQuery and the jQuery translation plugin we can create an automatic language translation service for Magento that detects the visitors browser language and automatically translates every Magento page to that language when it is loaded, or alternatively does the same when a new language is manually selected from the language drop down selector. This is quite an easy solution to implement but should be thoroughly tested on your development platform as it requires some changes to existing javascript libraries as well as the addition of new jQuery libraries and plugins. I have included the new jQuery libraries and plugin files required to implement this solution in a download which you can access here. Download and extract the files, copy them to your Magento installation folder and then follow the instructions below to implement automatic jQuery Google translations in your Magento store.

jQUERY & script.aculo.us
According to this Magento blog post jQuery should have no problems working with other javascript frameworks and should “work out of the box” with Magento but doesn’t due to a conflict with an older version of scriptaculous.The Magento conflict lies with the code in effects.js which we will upgrade to the latest version (1.9.0 as of December 23, 2010).

jQuery, jQuery Translator plugin and UIBlock plugin

The other libraries required are the jQuery library which provides the jQuery framework, the jQuery Translator plugin which currently integrates with the Google API to do the translations and the UIblock plugin which I’ve used to provide a neat way of updating the user interface when translations are taking place. These are included in the download package. After copying the new libraries across to the Magento /js folder we need to update the page layout XML in Magento so that the new libraries are loaded. Locate page.xml in the layout folder of your Magento stores theme and open it for editing.

Installation

First find the XML that loads the existing scriptaculous effects.js file and modify the line that loads the effects.js library and change it to load the new upgraded version as shown below. Double click the code box and use CTRL C to copy.

 <action method="addJs"><script>scriptaculous/effects-1.9.js</script></action>

Next we need to add some new XML to tell Magento to use the new jQuery library and plugins, add the following three lines before the existing line of XML that loads the prototype library in page.xml

<action method="addJs"><script>jquery/jquery-1.2.6.noConflict.min.js</script></action>
<action method="addJs"><script>jquery/jquery.translate-1.4.7.js</script></action>
<action method="addJs"><script>jquery/jquery.blockUI.js</script></action>

Save the modified page.xml file. The dynamic translation jQuery code can be placed in the footer.phtml template file of your Magento theme so that it runs when the page is fully loaded, this file is usually located in the template/page/html folder of your theme. Locate the file, open it for editing and append the following code at the bottom:

	<?php
	/**
	 * Automatic jquery translator for Magento
	 * blog.gaiterjones.com
	 * v0.3
	 *
	 */
	?>
	<script type="text/javascript">
	//<![CDATA[
	jQuery(function($){

			var defaultLang = '<?php echo substr(Mage::app()->getLocale()->getDefaultLocale(), 0, 2) ?>';

			$('#langSelect').change(function() {
				var pathname = window.location.pathname;
				window.location = pathname + '?translateTo=' + $('#langSelect').val();
				if ($('#langSelect').val() == defaultLang) {
					$.blockUI({
					message: '<h1>Language is being reset to default...</h1>',
					timeout: 2000
					});
				}
			});

			function doTranslateTo( destLang ){
			$('body').translate(defaultLang, destLang, {
			  not: '.doTranslate',
              start:     function(){   $.blockUI({ message: '<h1>Translating, please wait...<br />(' + defaultLang + ' > ' + destLang + ')</h1>' })   },
              complete:  function(){   $.unblockUI()  },
			  error:  	 function(){   $.growlUI('Translation Error', 'An error occured during translation...');   },
			  toggle: true
			});
	}

		<?php

		$defaultLang=substr(Mage::app()->getLocale()->getDefaultLocale(), 0, 2); // default store language

		// determine browser langugage
		if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
			// get languages from server header and assign quality rating
			foreach (explode(",", strtolower($_SERVER['HTTP_ACCEPT_LANGUAGE'])) as $accept) {
				if (preg_match("!([a-z-]+)(;q=([0-9.]+))?!", trim($accept), $found)) {
					$langs[] = $found[1];
					$quality[] = (isset($found[3]) ? (float) $found[3] : 1.0);
				}
			}
			// Order the codes by quality
			array_multisort($quality, SORT_NUMERIC, SORT_DESC, $langs);
			$browserLang=substr($langs[0],0,2);

		} else {
			$browserLang=$defaultLang;
		}

		$requestedLang=Mage::app()->getRequest()->getParam('translateTo');
		//$requestedLang=$_REQUEST["translateTo"];
		$storeCode=Mage::app()->getStore()->getCode(); // store code
		$cookieName=$storeCode. "-". $defaultLang. "-jquery-translateTo"; // derive cookie name

		echo "// defaultlang - ". $defaultLang. "\n";
		echo "// requestedLang - ". $requestedLang. "\n";
		echo "// browserLang - ". $browserLang. "\n";
		echo "// storeCode - ". $storeCode. "\n";
		echo "// cookieName - ". $cookieName. "\n";
		echo "// langfromcookie - ". Mage::getModel('core/cookie')->get($cookieName). "\n"; 

		if(!empty($requestedLang)) // check for language setting in REQUEST key
		{
			if (strtolower($requestedLang) !== strtolower($defaultLang)) { // translate if requested language != to store default
				if (!empty($requestedLang))
				{
					echo "// translating to requested language from url variable.\n";
					echo "doTranslateTo('". $requestedLang. "');\n"; // Translate and write cookie data
					Mage::getModel('core/cookie')->set($cookieName, $requestedLang, time()+36000);
				} else {
					echo "// Requested Language not detected.\n";
				}
			} else {
				Mage::getModel('core/cookie')->set($cookieName, strtolower($defaultLang), time()+36000); // set cookie i.e. keep default lang when default selected
				//Mage::getModel('core/cookie')->delete($cookieName); // remove cookie i.e. revert to browser lang when default selected

			}
		} else { // check for language data in cookie

			$langFromCookie = Mage::getModel('core/cookie')->get($cookieName); // read cookie

			if (!empty($langFromCookie))
			{
				if (strtolower($langFromCookie) !== strtolower($defaultLang)) { // translate if language data in cookie != to store default
					echo "// translating to requested language from cookie data.\n";
					echo "doTranslateTo('". $langFromCookie. "')\n";
				} else {
					echo "// cookie requesed language same as store default language - no translation required.\n";
				}
			} else { // no cookie	

				if (strtolower($browserLang) !== strtolower($defaultLang)) { // translate to browser language and set cookie
					if (!empty($browserLang))
					{
						echo "// setting language to browser language.\n";
						echo "doTranslateTo('". $browserLang. "');\n";
						Mage::getModel('core/cookie')->set($cookieName, strtolower($browserLang), time()+36000); // set cookie
					} else {
						echo "// Browser language not detected.\n";
					}
				} else {
					Mage::getModel('core/cookie')->set($cookieName, strtolower($browserLang), time()+36000); // set cookie
				}
			}
		}
		?>			

	})
	//]]>
	</script>

The code includes two jQuery functions, one that performs the jQuery automatic translation, and the other that monitors the language dropdown box used to manually change the page translation. The PHP code controls the automatic translation of pages based on the visitors browser language, using a cookie to store the visitors language which is subsequently used to translate every visited page to the browser language, or the language selected from the select Language dropdown box which is passed to the script via a URL request variable. Note that the code detects the default locale for the Magento store and uses this as the default language for translations.

To add the dropdown box, locate the languages.phtml file in the template/page/switch folder of your theme. Make a backup of the original file and then edit it to add the Language selector drop down box, replacing the contents of the file with the following code which includes all the languages supported by Google. This file is also included in the download package.

The language dropdown has been updated to show the current language as selected in the drop down list.

<?php
/**
 * Language switcher for jQuery Automatic Translator for Magento
 * blog.gaiterjones.com
 *
 */

$defaultLang=substr(Mage::app()->getLocale()->getDefaultLocale(), 0, 2); // default store language
$storeCode=Mage::app()->getStore()->getCode(); // store code
$cookieName=$storeCode. "-". $defaultLang. "-jquery-translateTo"; // derive cookie name
$langFromCookie = Mage::getModel('core/cookie')->get($cookieName); // read cookie
$requestedLang=Mage::app()->getRequest()->getParam('translateTo');

if (!empty($requestedLang))
{
	$languageSelected=$requestedLang;
} else {
	$languageSelected=$langFromCookie;
}

$languagesSelection =
		array(''=>'Select Language',
				substr(Mage::app()->getLocale()->getDefaultLocale(), 0, 2)=>'Default Language',
				'af'=>'Afrikaans',
				'sq'=>'Albanian',
				'ar'=>'Arabic',
				'be'=>'Belarusian',
				'bg'=>'Bulgarian',
				'ca'=>'Catalan',
				'zh-CN'=>'Chinese (Simplified)',
				'zh-TW'=>'Chinese (Traditional)',
				'hr'=>'Croatian',
				'cs'=>'Czech',
				'da'=>'Danish',
				'nl'=>'Dutch',
				'et'=>'Estonian',
				'tl'=>'Filipino',
				'fi'=>'Finnish',
				'fr'=>'French',
				'gl'=>'Galician',
				'de'=>'German',
				'el'=>'Greek',
				'ht'=>'Haitian Creole',
				'iw'=>'Hebrew',
				'hi'=>'Hindi',
				'hu'=>'Hungarian',
				'is'=>'Icelandic',
				'id'=>'Indonesian',
				'ga'=>'Irish',
				'it'=>'Italian',
				'ja'=>'Japanese',
				'ko'=>'Korean',
				'lv'=>'Latvian',
				'lt'=>'Lithuanian',
				'mk'=>'Macedonian',
				'ms'=>'Malay',
				'mt'=>'Maltese',
				'no'=>'Norwegian',
				'fa'=>'Persian',
				'pl'=>'Polish',
				'pt'=>'Portuguese',
				'ro'=>'Romanian',
				'ru'=>'Russian',
				'sr'=>'Serbian',
				'sk'=>'Slovak',
				'sl'=>'Slovenian',
				'es'=>'Spanish',
				'sw'=>'Swahili',
				'sv'=>'Swedish',
				'th'=>'Thai',
				'tr'=>'Turkish',
				'uk'=>'Ukrainian',
				'vi'=>'Vietnamese',
				'cy'=>'Welsh',
				'yi'=>'Yiddish');
?>
<div class="form-language">
	<div class="language-switcher">
		<select id="langSelect" >
<?php
	foreach($languagesSelection as $langCode=>$LangName)
	{
		if ($languageSelected === $langCode)
		{
			echo '<option selected value="'. $langCode. '">'. $LangName. '</option>';
		} else {
			echo '<option value="'. $langCode. '">'.$LangName. '</option>';
		}
	}
?>
		</select>
	</div>
</div>

Save the file and refresh the Magento cache to load the new jQuery libraries and modified template files.

Testing

Now refresh your Magento front end and you should see the new language dropdown selector in the header of your page. This is where it appears in the default theme.

If your browser language differs from your stores default language then the page should automatically translate. If your browser language is the same as your stores, then perform a manual translation by selecting a language from the select language box. You will notice that a new request variable is appended to the site URL which triggers the dynamic translation. Navigate to other pages which should also become dynamically translated as the code reads the selected language from the cookie file. To turn off the automatic translation select the stores default language from the drop down, or select the second “default” option from the language dropdown list.

To manually link to a specific language for your site, specifiy the translation request variable in the URL with the two letter language code as shown above. i.e. for a German translation use http://www.webshop.com/?translateTo=de

Tested with Magento community editions v1.3.x and 1.5.x Please provide feedback if you experience any problems, have successfully implemented this solution or if you have any other ideas for further development.

Resources used in creating this solution

http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/javascript_related/how_to_use_jquery_1.2.6_lastest_with_prototype

http://code.google.com/p/jquery-translate/

http://jquery.malsup.com/block/

http://jsbin.com/ozenu/1007/edit

Update Links

http://code.google.com/apis/language/translate/overview.html

http://msdn.microsoft.com/en-us/library/ff512404.aspx

Blogged in Berlin.

You can simply implement the Google element translation tool into Magento (and WordPress – see top left!) with support for over 50 languages in 5 minutes.

Lets look at the default themes for Magento 1.3.x, 1.4.x and 1.5.x – in the header.phtml template file languages.phtml is used to automatically create a store switcher for Magento sites with more than one store. Lets replace the code in the language switcher phtml file with the Google element translation code.

Locate your version of the languages.phtml file and make a backup copy i.e. languages.phtml.old. Copy and paste the following code into languages.phtml replacing the existing code.

<div class="form-language">
    <label for="select-language"><?php echo $this->__('Your Language:') ?> </label>

<!-- Google Element Translator Styling-->
		<style>
			.goog-te-combo{width: px !important;}
			.goog-te-balloon-frame{display: none !important;}
			font{background: transparent !important;}
			a font:hover{ color:  !important;}
			#google_translate_element{height: 26px !important;overflow: hidden !important;}
			.goog-te-banner-frame{display: none !important;}
			body{top: 0px !important;}
		</style> 

<!-- Google Element Translator -->
	<div id="google_language_drop">
		<div id="google_translate_element" class="-blank"></div>
			<script>
				function googleTranslateElementInit() {
					new google.translate.TranslateElement({
						includedLanguages: 'en,de,af,sq,ar,hy,az,eu,be,bg,ca,zh-CN,zh-TW,hr,cs,da,nl,et,tl,fi,fr,gl,ka,el,ht,iw,hi,hu,is,id,ga,it,ja,ko,la,lv,lt,mk,ms,mt,no,fa,pl,pt,ro,ru,sr,sk,sl,es,sw,sv,th,tr,uk,ur,vi,cy,yi',
						pageLanguage: '<?php echo $this->__('en') ?>',
						gaTrack: true,
						gaId: 'UA-12345678-1'
					}, 'google_translate_element');
				}
			</script>
		<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	</div>
</div>

The standard Google element translator code introduces a nasty looking frame at the top of translated pages and a few other stylings and images around the language drop down that we don’t want to see,  so we remove these first with some style elements. We then use the bog standard code from Google to include the element translator javascript which generates the country selection drop down box. You can specify which languages you want to include by editing the includedLanguages ISO two letter country codes. If you use Google Analytics then include your analytics account number to feed usage data into your Google Analytics account. If you have a multi language store remember to add a translation for ‘en‘ in your locale files to let Google know the language of the page it is translating (although if you leave this blank it will try and auto detect the language).

Save the new languages.phtml and refresh your site, you should see the new Select Language drop down box in the  site header, or whereever you placed the element translator within your sites Magento theme.

If your site already has multi language stores then you will need to integrate the code into your existing language switcher. You might want to hide the Google translator for visitors with a browser language that matches your site, you don’t want customers trying to translate your site with Google when you have already perfectly translated it yourself! You can accomplish this by wrapping the Google code in a PHP If statement e.g. if your site is in German and English, hide the translator from German speaking visitors:

<?php if (Mage::app()->getStore()->getId()==ID NUMBER OF ENGLISH STORE): ?>

<!-- Google Element Translator -->

<?php endif ?>

Style the #google_translate_element DIV if you need to place it correctly within your theme. I prefer switching stores using clickable flags, and for our store implemented a “Google” language flag that toggles the Google element translator DIV on or off for visitors with foreign language browsers –

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

<a href="#" onClick="toggle_visibility('google_translate_element');"><img width="16" height="16" src="<?php echo $this->getSkinUrl('images/google-translate.gif') ?>" id="lang-flag-google" title="Google Translate - please note we are not responsible for the accuracy of translations made with this service." /></a>

Tested with Magento 1.3.3, 1.4.2 and 1.5.0.

This post is dedicated to Nile Rodgers.