type:
snippet
category:
shipping
name:
Restricting Countries and States on the Checkout (0.7.2 and older)
versions:
0.6.0, 0.7.0, 0.7.1, 0.7.2
reference:
http://forum.foxycart.com/comments.php?DiscussionID=1642&page=1, http://forum.foxycart.com/comments.php?DiscussionID=2834&page=1, http://forum.foxycart.com/comments.php?DiscussionID=3482&page=1
tags:
snippets, shipping, advance
date:
2011-05-27

The functionality detailed on this page is for FoxyCart versions 0.7.2 and older. If you're using 1.0 or newer, please see this page.

Using version 2.0? There is native functionality that covers this snippet within the configuration section of the administration. There is also a new snippet available for our latest version, available from here.

Restricting countries from the checkout

Often times you need to alter what countries or states are able to be shipped to. The following javascript provide examples of how to do that, which need to be pasted right before the closing </head> tag of your checkout template.

Restricting the checkout to a single country

That excludes everything that is not US, but you could do it differently to adjust for the countries you want. Using firebug to analyze FC.locations.config.locations and FC.locations.config.countries will give you some idea of the structure we're using.

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
  var usIndex = -1;
  for (var i = 0; i < FC.locations.config.locations.length; i++) {
    if (FC.locations.config.locations[i].cc2 == "US") {
      usIndex = i;
    }
  }
  if (usIndex != -1) {
    FC.locations.config.locations = FC.locations.config.locations.splice(usIndex,1);
    FC.locations.init(); // Update the countries and regions based on the modified locations array
    FC.checkout.setAutoComplete("customer_country");
    FC.checkout.setAutoComplete("customer_state");
    FC.checkout.setAutoComplete("shipping_country");
    FC.checkout.setAutoComplete("shipping_state");
  }
});
</script>

Some code for serving the US only

This code prevents people from altering the country text input in the checkout form - so is especially useful when you only allow customers from a single country. Simply changing US and United States to match the country you're targeting will update to your specific country.

jQuery(document).ready(function() {
  jQuery('#customer_country, #shipping_country').val('US');
  jQuery('#customer_country_name, #shipping_country_name').addClass('fc_text_readonly').val('United States');
  jQuery('#customer_country_name, #shipping_country_name').attr('readonly', true).focus(function() {
    jQuery(this).blur();
  });
 
  // Update states
  FC.checkout.setAutoComplete("customer_state");
  FC.checkout.setAutoComplete("shipping_state");
});

Restricting the country dropdown to a subset of countries

Often you'll need to ship to only a few countries, like perhaps just the US and Canada. In that case, the following javascript will help you do that. Just change the includeCountries array to include the 2 character country codes of the countries you want to include.

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
  var newCountries = [];
  var includeCountries = ["US", "CA"];
  for (var i = 0; i < FC.locations.config.locations.length; i++) {
    if (jQuery.inArray(FC.locations.config.locations[i].cc2, includeCountries) > -1) {
      newCountries.push(FC.locations.config.locations[i];
    }
  }
  FC.locations.config.locations = newCountries;
  FC.checkout.setAutoComplete("customer_country");
  FC.checkout.setAutoComplete("customer_state");
  FC.checkout.setAutoComplete("shipping_country");
  FC.checkout.setAutoComplete("shipping_state");
});
</script>

How to remove Alaska and Hawaii from the state pulldown on checkout.

Often times you need to remove certain states from being selectable in your checkout. You can achieve that using javascript to run through the locations array on the checkout and removing any states you don't want.

Step 1: Add javascript

Add the following right before the closing </head> tag in your checkout template:

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
  var usIndex = -1;
  for (var i = 0; i < FC.locations.config.locations.length; i++) {
    if (FC.locations.config.locations[i].cc2 == "US") {
      usIndex = i;
    }
  }
  var newregions = [];
  for (var i = 0; i < FC.locations.config.locations[usIndex].r.length; i++) {
    if (FC.locations.config.locations[usIndex].r[i].c != "HI" && FC.locations.config.locations[usIndex].r[i].c != "AK") {
      newregions.push(FC.locations.config.locations[usIndex].r[i]);
    }
  }
  FC.locations.config.locations[usIndex].r = newregions;
  FC.checkout.setAutoComplete("customer_country");
  FC.checkout.setAutoComplete("customer_state");
  FC.checkout.setAutoComplete("shipping_country");
  FC.checkout.setAutoComplete("shipping_state");
});
</script>

Site Tools