Sitewide Country Selector

Add a country selector to the top of your header.

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
• The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1: Create a new template

Navigate to the product includes folder /templates/products/includes/ and create a new file named country_selector.template.html.

Step 2: Add the code to the template

Paste the following code into the newly created country selector template:

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

Step 3: Add a reference to the country selector dropdown in your header

Paste the following code into the header template where you would like the country selector dropdown to appear:

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

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.