I’ve been trying for several hours to do something that should have only taken a few minutes. I need to remove certain provinces after a change event on the country select element. It seems whatever Shopify is doing in the background is keeping me from removing nodes from the DOM even though I can remove any other node I want. Is this something in the constructor for Shopify.CountryProvinceSelector(…)? Either way this is very limiting and it seems this shouldn’t even need Js in the first place, it should be exposed in the admin.
Latest attempt is below, any help is appreciated…
document.querySelector('#AddressCountryNew').addEventListener('change', function() {
new Shopify.CountryProvinceSelector(
'AddressCountryNew',
'AddressProvinceNew',
{
hideElement: 'AddressProvinceContainerNew'
}
);
limitProvinceOptions();
});
function limitProvinceOptions() {
let countrySelect = document.querySelector('#AddressCountryNew');
let countryVal = countrySelect.options[countrySelect.selectedIndex].value;
if(countryVal === 'Canada') {
let provinceSelect = document.querySelector('#AddressProvinceNew');
for(let i = 0; i < provinceSelect.options.length; i++) {
if(provinceSelect.options[i].value !== 'Alberta' ||
provinceSelect.options[i].value !== 'British Columbia') {
provinceSelect.removeChild(provinceSelect.options[i]);
}
}
}
}
So I just thought of a new way to override Shopify’s way of handling this and it seems to work so far. I’m going to leave it here for others who may be in the same boat as I was.
I’m also throwing in a simple method for swapping the innerText of the label for this field as well, place it in a change event for the country selector. If you need more than those two countries I’d suggest using a switch statement and replace the if/elseif.
function setProvinceLabel() {
let countrySelect = document.querySelector('#AddressCountryNew');
let countryVal = countrySelect.options[countrySelect.selectedIndex].value;
let label = document.querySelector('label[for=AddressProvinceNew]');
if(countryVal === 'United States') {
label.innerText = 'State';
} else if (countryVal === 'Canada') {
label.innerText = 'Province';
}
}
function changeProvinceDataset() {
let countryOptions = document.querySelector('#AddressCountryNew').options;
for(let i = 0; i < countryOptions.length; i++) {
if(countryOptions[i].value === 'Canada') {
countryOptions[i].dataset.provinces = '[["Alberta","Alberta"],["British Columbia","British Columbia"]]';
break;
}
}
}
I am trying to remove (or hide) a few provinces, to which my client doesn’t ship. Under Spain there are 52 provinces, but 2 of them are in Morocco, 4 are in the Canary Islands. I did set this up under shipping zones, but at the checkout - those provinces still appear. Meaning, if one choses a province which is not supported (excluded from shipping zone) - they get an error message:
But I want to remove those altogether! Yes, I know it is fetched from the API, but… maybe add some code to exclude those specific stings after fetching the data?
