How do I limit the delivery area for my online store?

If you’d like to limit the area of delivery to a certain area code, you can copy the code from this article and paste it into your Creator website. You’ll need to make some adjustments to the code for it to fit your needs.

Please note

Paste the code found below into the Head area of your website by opening the menu and going to Settings > Edit Head.

You’ll then need to adjust the following parts of the code:

value: 'Outside of delivery area' (highlighted in red): This is the message that users will see if they type in an area code that’s not within the delivery range. Please note that this message will appear properly in most common browsers, but might revert to the default browser message in Safari and Safari-based browsers.

value: '254[3-6]{2}' (highlighted in green): These values are an example of a range of area codes. In this example, we determine that the first three numbers have to be 254. The following numbers can range from 3 to 6 and only 2 numbers are allowed after the first three.

If you’d like to further limit the delivery area, you could swap these values out for value: '254[1-9]{1}'. Then the range of area codes would go from 2541-2549.

Code

<script type="text/javascript">
// implements some native browser validation logic on ZipCode inputs 
// that are part of the checkout process forms
//<![CDATA[

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}  

docReady(function(){
    if (
        (document.body.className.indexOf('j-shop-special-page') > -1 ) &&
        document.getElementsByClassName('j-checkout__shipping-address-checkbox').length > 0
     ) {
         // initial state
         addZipCodePattern(false);
        
        // if user changes state of "other shipping address" checkbox 
        var otherShippingAdressCheckBox = document.getElementsByClassName('j-checkout-address-checkbox__box')[0];
        otherShippingAdressCheckBox.addEventListener('change', function(){
            addZipCodePattern(otherShippingAdressCheckBox.checked);
        });
    }
});

function addZipCodePattern(shippingPartOnly) {
    var billingZipCodeInput = document.getElementById('id_billing_zip');
    var shippingZipCodeInput = document.getElementById('id_shipping_zip');
    var pattern = {name: 'pattern', value: '254[3-6]{2}'};
    var title = {name: 'title', value: 'Outside of delivery area'};
    
    // exit if one of both isnt found
    if (!billingZipCodeInput || !shippingZipCodeInput) return; 
    
    if (shippingPartOnly) {
        shippingZipCodeInput.setAttribute(pattern.name, pattern.value);
        shippingZipCodeInput.setAttribute(title.name, title.value);
        billingZipCodeInput.removeAttribute(pattern.name);
        billingZipCodeInput.removeAttribute(title.name);
    } else {
        billingZipCodeInput.setAttribute(pattern.name, pattern.value);
        billingZipCodeInput.setAttribute(title.name, title.value);
        shippingZipCodeInput.removeAttribute(pattern.name);
        shippingZipCodeInput.removeAttribute(title.name);
    }
}

//]]>
</script>