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.