Sitewide Country Selector

Coding Instructions

Step 1. Create a template file for the dropdown

Create a file under templates/products/includes/country_selector.template.html and paste in the following code:

Select Your Country: 
<select class="form-control" id="country_selector" onchange="$.load_ajax_template('_country_selector', { 'showloading': '1', 'ship_country': $('#country_selector').val()})">
        [%PARAM *body%]
            <option value="[@country_code@]" [%if [@country_code@] eq [@session:ship_country@]%]selected[%/if%]>[@country_name@]</option>

Step 2. Add a reference to the above template in your header

The following code needs to be placed wherever you want the country selector to appear.

[%load_ajax_template id:'_country_selector' type:'item' template:'country_selector' preload:'0'/%]
[%site_value id:'footer_javascript'%]
    $( document ).ready(function() {
        $.load_ajax_template('_country_selector',  {'ship_country': ''})

Final Result

When the country is changed in the selector, this will update the users shipping location session data. Any future page/template (ajax) loads will cause the tag to display whatever has been selected.

Assuming the rest of your templates are setup correctly and your shipping is country specific, product pages should load with shipping already calculated for that country.

Was this article useful?

Be notified when this page is updated. Optional.