Support

This script allows sellers to set up restrictions on a state-by-state basis. This code removes specific states from dropdown menus on the checkout page and the customer account page.

How to implement Javascript to restrict purchases by states

Sellers can add the below Javascript through the Code Editor. After adding the below code, both pages should be tested to ensure the options have been removed successfully. 

Step 1:  In the Merchant Portal, go to Design find the theme you need to edit (or duplicate)  Theme and then click Code. 

Step 2: Go to components, click checkout and then Checkout

Step 3: Next click Add New

Step 4: Name the new file 'component.js' and click Save

Step 5: Add the following code to include/exclude states and countries as desired.

<script>
	{#
	Below is a list of countries and their states. For each country, you may 
    list the states and set it to delete all those states or set it to delete
    all states NOT listed.

	You can list as many countries as you'd like, or just one. In this example,
	I've included the US and Australia.

	For example, if I only serve Texas, I could list 'Texas' and set inclusive as
	true.

	If, however, I want to serve all states except for Texas, I would list 'Texas'
	and inclusive as false.
	#}

	var list = {
		'US': {
			'inclusive': false, {# "false" means only show other states #}
			'states': [
				'American Samoa',
				'Armed Forces Americas',
				'Armed Forces Europe',
				'Armed Forces Pacific',
			],
		},
		'AU': {
			'inclusive': true, {# "true" means only show the listed states. #}
			'states': [
				'Victoria',
				'Queensland',
			],
		},
	}

    {#
	All configuration is done above this line. The code below should not be
	modified unless you're into programming.
	#}
	var remove_states = function() {
		for(country in list) { // remove states from country selector
			var sel = "#country option[value='" + country + "']";
			if(list[country]['inclusive']) {
				console.log("Inclusive remove state data for " + country)
				var states = JSON.parse($(sel).attr("data-states"));
				states = $.grep(states, function(state) {
					return list[country]['states'].indexOf(state["display-state"]) > -1;
				});
				$(sel).attr("data-states", JSON.stringify(states));

				console.log("Inclusive remove state options for " + country)
				if($('select#country option:selected').val() == country || $('select.form-control.state-selector option:selected').val() == country) {
					$('select#state option,select.form-control.state-selector option').each(function(c, op) {
						if (list[country]['states'].indexOf($(op).html().trim()) < 0 ) $(op).remove();
					});
				}
			}
			else {
				console.log("Exclusive remove state data for " + country)
				var states = JSON.parse($(sel).attr("data-states"));
				states = $.grep(states, function(state) {
					return list[country]['states'].indexOf(state["display-state"]) == -1;
				});
				$("#country option[value='" + country + "']").attr("data-states", JSON.stringify(states));

				console.log("Exclusive remove state options for " + country)
				if($('select#country option:selected').val() == country) {
					$('select#state option,select.form-control.state-selector option').each(function(c, op) {
						if (list[country]['states'].indexOf($(op).html().trim()) > -1 ) $(op).remove();
					});
				}
			}
		}
	}

	$( document ).ready( function(){
		remove_states();
	});
</script>

Note

If a theme does not have a components folder, this means it's an old theme. The Javascript you will use is the same as above, you will just need to add it to your `/html/checkout.html` file instead and include `{% block page_javascript %}` on the first line and `{% endblock %}` on the last line.