<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>
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);
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; }
<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>