Dynamic Content With Geo IP & JS

These prices are dynamically displayed based on your location:

Simple implementation with vanilla JavaScript:

	<script type="application/javascript">
	function geoip(json){
		
		// Get country code based on IP
		var country_code = json.country_code;
		
		// Set dynamic values in an object
		var price_obj = {
			prices: {
				GB: '£9.99',
				US: '$12.99',
				CA: '$12.99',
				SA: 'R 119',
				AU: '$14.99',
				NZ: '$14.99',
				NL: '11.99€',
				FR: '11.99€',
				IN: '119 ₹',
				JP: 'JP¥800',
			}
		},
		get_price = price_obj[ 'prices' ][ country_code ];
		
		// Check if we have a price for the visitor's country, if not we'll set a default of $12.99
		if(get_price == null) {
			display_price = '$12.99';
		} else {
			// Else the price does exist is the array
			display_price = get_price;
		}
		
		// Get the element we want to update by class
		var price_elem = document.getElementsByClassName('update_price');
		
		// Update each element on the page that uses this class
		for (var i = 0; i < price_elem.length; i++) {
		  var str = price_elem[i].innerHTML;
		  price_elem[i].innerHTML = display_price;
		}

	}
	</script>
	<script async src="https://get.geojs.io/v1/ip/geo.js"></script>

Simple implementation with jQuery

If you want to use jQuery to insert the values into the elements, make sure jQuery is included above the code. Then remove this part from the above code:

	var price_elem = document.getElementsByClassName('update_price');
	for (var i = 0; i < price_elem.length; i++) {
	  var str = price_elem[i].innerHTML;
	  price_elem[i].innerHTML = display_price;
	}

And replace it with this:

	$('.update_price').html(display_price); 

Adding a bit more functionality

No we have something basic, we can add some more functionality. Firstly add in a URL parameter to override the country returned from the IP. So for example we want to force the display of Japanese Yen, we'll do this via the URL parameter "country=" which in this case will equal "JP" (as in Japan). So to force JPY on this page, the URL is: https://www.thewebtaylor.com/static/tutorials/geo-ip-js/?country=JP.

For this added functionality, we will need to add a new function to get the URL parameter. Put this at the top of the code:

	function get_url_param() {
		
			var vars = {};
		
		var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
			vars[key] = value;
		});
		
		return vars;
		
	}

Then remove this part:

	// Get country code based on IP
	var country_code = json.country_code;

And replace with this:

	// Get the country URL parameter
	country_param = get_url_param()['country'];
	
	// If the country parameter is not empty, then use this value
	if(country_param != null) {
		country_code = country_param;
	} else {
		// Else use the GEO IP location
		country_code = json.country_code;
	}

So now our whole code should look like this:

	<script type="application/javascript">
	function get_url_param() {
		
		var vars = {};
		
		var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
			vars[key] = value;
		});
		
		return vars;
		
	}
	
	function geoip(json){
		
		// Get the country URL parameter
		country_param = get_url_param()['country'];
		
		// If the country parameter is not empty, then use this value
		if(country_param != null) {
			country_code = country_param;
		} else {
			// Else use the GEO IP location
			country_code = json.country_code;
		}
		
		// Set dynamic values in an object
		var price_obj = {
			prices: {
				GB: '£9.99',
				US: '$12.99',
				CA: '$12.99',
				SA: 'R 119',
				AU: '$14.99',
				NZ: '$14.99',
				NL: '11.99€',
				FR: '11.99€',
				IN: '119 ₹',
				JP: 'JP¥800',
			}
		},
		get_price = price_obj[ 'prices' ][ country_code ];
		
		// Check if we have a price for the visitor's country, if not we'll set a default of $12.99
		if(get_price == null) {
			display_price = '$12.99';
		} else {
			// Else the price does exist is the array
			display_price = get_price;
		}
		
		// Get the element we want to update by class
		var price_elem = document.getElementsByClassName('update_price');
		
		// Update each element on the page that uses this class
		for (var i = 0; i < price_elem.length; i++) {
		  var str = price_elem[i].innerHTML;
		  price_elem[i].innerHTML = display_price;
		}

	}
	</script>
	<script async src="https://get.geojs.io/v1/ip/geo.js"></script>