When using certain credit card processors (like Paypal), this option is ignored, and it is always set to the Drop Down. This is because the credit card processor requires a specific code for the State or Province in certain countries... for PayPal they require a specific 2 letter code for the USA and for Canada.
The problem with this particular setup, is that you can only have one big list which contains all the States and Provinces you put in the list... the more countries you want to add, means your list gets longer and longer so it becomes harder for the customer to find what they are looking for. And then if want to be able to ship to most countries in the world, then you will either end a giagantic list, or else you will have to have a choice that says something like OTHER-MY STATE IS NOT LISTED.
So below is some JavaScript that will display a Drop Down of only the US States when USA is chosen for the country, a Drop Down of only the Canadian Provinces when Canada is chosen for the country, or will change to a Text Box if any other country is chosen. It is fairly easy to modify if you have another Country that you want to add a list of States or Provinces for... just add another ELSE IF to the code.
You will need to modify your theme shopping cart .sst template file, and in the [-- DEFINE Shipping --] section, look for this line:
Code:
- Code: Select all
[-- SC_JAVASCRIPT extras --]
And add this include line right after it:
Code:
- Code: Select all
[-- INCLUDE myCustom.js --]
Then look for these lines:
Code:
- Code: Select all
<body
[-- IF STORE.SC_BackgroundImage --]
background="[-- STORE.SC_BackgroundImage --]"
[-- END_IF --]
And modify it like this with an onLoad:
Code:
- Code: Select all
<body onLoad="myOnLoad();"
[-- IF STORE.SC_BackgroundImage --]
background="[-- STORE.SC_BackgroundImage --]"
[-- END_IF --]
Now here is the myCustom.js file that you need to include:
- Code: Select all
function myOnLoad () {
//////Add onChange function to Country selection drop downs
var _BillState = document.getElementsByName('State'); //Get element
var _BillCountry = document.getElementsByName('Country'); //Get element
var _ShipState = document.getElementsByName('ShipState'); //Get element
var _ShipCountry = document.getElementsByName('ShipCountry'); //Get element
if ( (_BillState.length == 1) && (_BillCountry.length == 1) ) { //Does Billing State/Country exist? Should only be 1 of each!
_BillCountry[0].onchange = function(){myStateChange('bill');}; //Add onChange to Country SELECT (don't forget the [0]!!)
myStateChange('bill'); //Check current country and set states
}
if ( (_ShipState.length == 1) && (_ShipCountry.length == 1) ) { //Does Shipping State/Country exist? Should only be 1 of each!
_ShipCountry[0].onchange = function(){myStateChange('ship');}; //Add onChange to Country SELECT (don't forget the [0]!!)
myStateChange('ship'); //Check current country and set states
}
////// END Add onChange function to Country selection drop downs
} // end myOnLoad
function myStateChange (who) {
//////Change STATE selections based on Country selection
if (who == 'bill') {
_stateName = 'State';
_countryName = 'Country';
} else if (who == 'ship') {
_stateName = 'ShipState';
_countryName = 'ShipCountry';
} else {
_stateName = 'none';
_countryName = 'none';
}
if ( (_stateName != 'none') && (_countryName != 'none') ) {
var _State = document.getElementsByName(_stateName)[0]; //Don't forget the [0]
var _Country = document.getElementsByName(_countryName)[0]; //Don't forget the [0]
var _indexCountry = _Country.selectedIndex;
var _selectedCountry = _Country.options[_indexCountry].value; //Use .text for full name or .value for short form
var _select
try {
_select = document.createElement('<select name="'+_stateName+'">'); //Work around for IE
} catch (e) { }
if (!_select || !_select.name) { // Not in IE, then
_select = document.createElement('select'); //Setup a SELECT tag
_select.name = _stateName;
}
_select.className = 'addr';
var _input
try {
_input = document.createElement('<input name="'+_stateName+'">'); //Work around for IE name issue
} catch (e) { }
if (!_input || !_input.name) { // Not IE, so use proper method
_input = document.createElement('input'); //Setup an INPUT tag
_input.name = _stateName;
}
_input.className = 'addr';
_input.size = '20';
_input.maxLength = '30';
_array = new Array(); //This will contain the States/Provinces for each Country
if (_selectedCountry == 'United States') { //For USA, list States
_select.options[0] = new Option('Select a State', 'n', false, true);
_array = [ ['AL','Alabama'],['AK','Alaska'],['AZ','Arizona'],['AR','Arkansas'],['CA','California'],['CO','Colorado'],['CT','Connecticut'],['DE','Delaware'],['DC','District of Columbia'],['FL','Florida'],['GA','Georgia'],['HI','Hawaii'],['ID','Idaho'],['IL','Illinois'],['IN','Indiana'],['IA','Iowa'],['KS','Kansas'],['KY','Kentucky'],['LA','Louisiana'],['ME','Maine'],['MD','Maryland'],['MA','Massachusetts'],['MI','Michigan'],['MN','Minnesota'],['MS','Mississippi'],['MO','Missouri'],['MT','Montana'],['NE','Nebraska'],['NV','Nevada'],['NH','New Hampshire'],['NJ','New Jersey'],['NM','New Mexico'],['NY','New York'],['NC','North Carolina'],['ND','North Dakota'],['OH','Ohio'],['OK','Oklahoma'],['OR','Oregon'],['PA','Pennsylvania'],['RI','Rhode Island'],['SC','South Carolina'],['SD','South Dakota'],['TN','Tennessee'],['TX','Texas'],['UT','Utah'],['VT','Vermont'],['VA','Virginia'],['WA','Washington'],['WV','West Virginia'],['WI','Wisconsin'],['WY','Wyoming'] ]; //States/Provinces for this country
_array_len = _array.length;
for (_count=0; _count<_array.length; _count++) {
_optionNumber = _count + 1;
_select.options[_optionNumber] = new Option(_array[_count][1], _array[_count][0], false, false);
}
_State.parentNode.replaceChild(_select,_State);
} else if (_selectedCountry == 'Canada') { //For Canada, list Provinces
_select.options[0] = new Option('Select a Province', 'n', false, true);
_array = [ ['AB','Alberta'], ['BC','British Columbia'], ['MB','Manitoba'], ['NB','New Brunswick'], ['NF','Newfoundland'], ['NT','Northwest Territories'], ['NS','Nova Scotia'], ['NU','Nunavut'], ['ON','Ontario'], ['PE','Prince Edward Island'], ['QC','Quebec'], ['SK','Saskatchewan'], ['YT','Yukon'] ]; //States/Provinces for this country
_array_len = _array.length;
for (_count=0; _count<_array.length; _count++) {
_optionNumber = _count + 1;
_select.options[_optionNumber] = new Option(_array[_count][1], _array[_count][0], false, false);
}
_State.parentNode.replaceChild(_select,_State);
} else { //For all other countries create a text box
_State.parentNode.replaceChild(_input,_State);
}
}
////// END Change STATE selections based on Country selection
} // end myStateChange