Geo Popup with Redirect Button - Nations ECS Stores

HOW THE CODE WORKS:

The code works by checking the location of the user. If the user is within the criteria of the function, then a popup shows offering them the option to navigate to another store that is closer to their origin and save on shipping cost.

WHEN TO USE THIS METHOD OVER A STRAIGHT REDIRECT

Use this technique when the client has more than 1 currency store and each store has different products, but they still want to allow international customers the option to purchase the other products as long as they are willing to pay the increased shipping rate.

THE CODE:

geo-location.liquid Create a snippet named geo-location.liquid and add the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
	$(document).ready(function() {
		 $.get("//ipinfo.io/?token=f2a02c74d816ea", function(response) {
			 console.log(response.ip, response.country);
			 if (response.country != 'US') {
				$('.geo-location-popup, .geo-location-background').delay('1000').show("slow");
			 }
			 var countryResponse = response.country;
			 console.log('you are visiting from ' + countryResponse);

			 $( ".customer-origin" ).text( " " + countryResponse );
		 }, "jsonp");

		 $('.close, .geo-location-no-thanks-btn, .geo-location-background').click(function(){
			$('.geo-location-popup, .geo-location-background').hide("slow");
		 });
	});	 
 </script>


<div class="geo-location-background" style="display: none;">&nbsp;</div>

 <div class="geo-location-popup" style="display: none;">
	<div class="popup"> 
		<a href="#" class="close">
			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="15px" height="15px" viewBox="215.186 215.671 80.802 80.8" enable-background="new 215.186 215.671 80.802 80.8" xml:space="preserve"> <polygon fill="#FFFFFF" points="280.486,296.466 255.586,271.566 230.686,296.471 215.19,280.964 240.086,256.066 215.186,231.17 230.69,215.674 255.586,240.566 280.475,215.671 295.985,231.169 271.089,256.064 295.987,280.96 " />
	       </svg>
        </a>

	    <p>We noticed you were in <span class="customer-origin"> </span>. We have a store just for you! Switch to shop your store to see EU pricing and save on shipping costs.</p>
		<a class="geo-location-leave-btn" href="//globalshop.optic.tv/">Save on shipping costs.</a>
		<a class="geo-location-no-thanks-btn" href="#">No Thanks.</a>
	</div>
 </div>

 <style type="text/css">
	.geo-location-background {
		 background: rgba(0, 0, 0, .75);
	    height: 100% !important;
	    width: 100% !important;
	    position: absolute;
	    top: 0;	
	    z-index: 5;
	}
	.geo-location-popup {
	    background: rgb(42, 42, 42);
	    border: 2px solid #b8e550;
	    z-index: 99999 !important;
	    width: 50% !important;
	    position: absolute;
	    top: 50px;
	    margin: 0 auto !important;
	    left: 25%;
	    color: white;
	    padding: 20px 20px 30px 20px;
	    border-radius: 10px;
	}
	.geo-location-popup p {
	    margin-top: 40px;
	}	
	a.geo-location-leave-btn {
	    background: green;
	    padding: 10px;
	    color: white;
	    text-transform: uppercase;
	    text-align: center;
	    margin: 0 auto;
	    width: 100% !important;
	    display: block;
	    margin-top: 25px;
	}
	a.geo-location-no-thanks-btn {
	    background: hsla(26, 50%, 36%, 1);
	    padding: 10px;
	    color: white;
	    text-transform: uppercase;
	    text-align: center;
	    margin: 0 auto;
	    width: 100% !important;
	    display: block;
	    margin-top: 25px;
	}
	.geo-location-popup a:hover {
		opacity: .75;
	}
	a.close {
		position: absolute;
		right: 20px;
		top: 20px;
	}	
 </style>

CHANGE CODE VALUES

• Locate the if (response.country != 'US') { and change it to meet redirect requirements. The example states if the customer is not visiting from the US then show the popup. You can also change the statement to say if (response.country == 'US') { which would only run only if the user was in the USA.
• Locate and change the <a class="geo-location-leave-btn" href="//globalshop.optic.tv/">Save on shipping costs.</a> button link to the URL of the other store.
• Adjust the CSS to match the site's branding.
• Change language in the <p></p>. Make sure you leave the <span class="customer-origin"> </span> code as this automatically populates the location of the user.

  THEME.LIQUID Open theme.liquid and add the following code at the bottom of the file.

{% if template == 'index' %}
  {% include 'geo-location' %}
{% endif %}