I initially thought of detecting the browser language or using available PHP Geo IP tools. Detecting the browser language is a simple solution but does not necessarily mean the customer is physically in the country that the browser language is set to. I also thought that using a full blown Geo database would be overkill and too much of an overhead when performing lookups.

The simple solution was to match the customers IP address against the IP Allocation for the required country and create the Popup message when both product and IP Allocation match.

I used an existing PHP function capable of taking an array IP addresses in various formats and returning a true / false match against supplied address, and a simple Growl type jquery popup box function called Gritter..

First determine the IP addresses allocated to the country you want to target, you can obtain these from various websites e.g. http://www.ipaddresslocation.org

Download the PHP and Gritter jQuery files here and copy the Gritter folder to your magento /js folder.

Copy the php files to a suitable location on your system, they will be included from Magento. Open ip_allocation.php and paste in the range of addresses you want to use in the the array.

<?php

/*
 * ip__allocation.php
 *
 */

	$MyClient=FALSE;
	if (isset($_SERVER['REMOTE_ADDR']))
	{
		include 'ip_in_range.php';
		$clientIP=$_SERVER["REMOTE_ADDR"];
		$IPAllocation = array(
			'192.168.1.0-192.168.1.255',
			'192.168.2.0-192.168.2.255',
		);

			foreach ($IPAllocation as $addressRange) {

				if (ip_in_range($clientIP, $addressRange))
				{
					$MyClient=TRUE;
					break;
				}
			}
	}
?>

In the example our address ranges are 192.168.1.0-192.168.1.255 and 192.168.2.0-192.168.2.255. When you download the range of addresses from www.ipaddresslocation.org you will have a list of perhaps hundreds of address ranges. Open them in Excel so that you can format them correctly for our PHP script. I.e. remove any unwanted spaces and add the quotes and comma so that you can just paste the addresses straight into the php array correctly formatted. i.e. ‘192.168.3.0-192.168.3.255’,

Save the PHP file.

In Magento edit the head.phtml template file and add the following at the beginning of the file modifying the include path to point to the path and folder where you have save the files.

// detect if client is from specific country based on IP and show popup on specific product page.
if (Mage::registry('current_product') && Mage::registry('current_product')->getId() === "XXXX")
{
	include '/home/www/php/ip_allocation.php';
}
?>

This code will include our IP allocation PHP scripts if the current page is a product page and the product ID matches XXX, enter your product ID here for the product or products you want to match.

Further down in head.phtml we need to add the Gritter jQuery code. If you already are using jQuery in your Magento shop this should come after the getIncludes statement and you should remove the javascript links to the google jQuery source.

<?php if (Mage::registry('current_product')) : ?>
<?php if(Mage::registry('current_product')->getId() === "XXX"):?>
<?php if($MyClient): ?>
<link rel="stylesheet" type="text/css" href="/js/gritter/css/jquery.gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.5');</script>
<script type="text/javascript" src="/js/gritter/js/jquery.gritter.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){
	 $.gritter.add({
		// (string | mandatory) the heading of the notification
		title: '<br />Are you a customer<br />from the United Kingdom?<br />',
		// (string | mandatory) the text inside the notification
		text: '<br /><br />You can save shipping costs and order our <?php echo trim(Mage::registry('current_product')->getName())?> directly from one of our partners, click <a href="/partners?utm_source=Country&utm_medium=Partners&utm_campaign=MyCampaign"><strong>here</strong></a> for more information.<br /><br />',
		// (string | optional) the image to display on the left
		image: '/js/gritter/images/uk-flag.jpg',
		// (bool | optional) if you want it to fade out on its own or just sit there
		sticky: true
	 });}
 )
//]]>
</script>
<?php endif ?>
<?php endif ?>
<?php endif ?>

Again we are checking for a match on a product page, and our specific product as well as a TRUE value for our IP address check returned by the variable $MyClient. When true, the Gritter jQeury code will be added to the page to create the popup box. You can see we are displaying a message for UK customers including a custom image.

Refresh your store cache and browse to the defined product page to test the code. You will need to add an entry for your current IP address in the allocation array to ensure a match if you are not in the country you are targeting!

The Gritter example code is linking to a relatively old version of jQuery, in a Magento 1.3 shop this was no problem, in 1.6.1 I had to use a newer version.

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.