Postcode delivery

The postcode delivery extension allows you to create delivery rates which are only applicable to particular postcodes that you specify (specified when creating the delivery rate).

At checkout, the customer is asked to enter their postcode and the system will only show delivery rates that match that postcode - as shown on the example below.

Installing the extension means that you'll need to make some changes to your shopping basket page (to allow the customer to enter their postcode) and then also change your delivery rates so that you specify which postcodes are applicable to them.


Installing the extension

Warning!

We recommend that as soon as you install the extension you follow the instructions at the bottom of this article and add 'ALL' to all of your delivery rates so that users can continue to checkout as normal until the extension is installed on your website and you've had chance to properly configure your delivery rates. Please contact us should you need assistance.

Select 'apps and extensions' from the left menu and then 'available extensions'. Find the 'postcode shipping' extension and click to activate it on your account.

Once the extension is activated you'll then need to add the relevant code to your website's files (described below). Adding the code will place the postcode form on your website. To add the relevant code you'll need to use the page editor, alternatively you can click the 'request installation' button and we'll install the code for you (a small charge will be made for the installation, which is listed on the extension page).

Self-installation

1. Locate the plugins.js file in the page editor (located in /scripts/plugins.js). Replace the contents with the latest version which you can download by clicking here.

Please note, you may not have a plugins.js file in your theme. If you don't you can skip this step (newer versions of our themes don't have one).

2. Save your changes.

3. Locate the checkout_basket.twig file (located in /views/checkout pages/checkout_basket.twig).

4. Add the code shown below. The code should be added beneath the code that outputs the country/delivery zone selection drop down but above the delivery rate drop down. The exact appearance/location of this code will change depending on the theme you are using.

<div class="postcode-container">
    <input type="text" class="postcode" value="{{ global.basket.postcode }}">
    <button class="postcode-validate"></button>
</div>

For example

5. It's important that you move this section of code (from the country/delivery zone drop down to the end of the delivery rate drop down) outside of any <form> tag. Depending on your theme an opening <form> tag may be present above the delivery rate selection area, in which case you'll need to move this opening <form> tag to beneath the delivery rate selection area (in an appropriate standards compliant place).

Click to save the changes to the file.

Please Note: The code for the above comes with no styling, so it will need to be styled (with CSS or inline styles) to display nicely.

Warning!

Its important that as soon as you add this code to your website that you then enter postcodes for each of your delivery rates as soon as possible.

Customising the platform messages (advanced users only)

The platform will respond with messages if the postcode entered is valid (or not valid). Postcode validation is performed via AJAX. Your Javascript file will send an AJAX request to the platform with the postcode entered and receives a response with two variables:

invalidPostcode
rates

The invalidPostcode variable will return true if the postcode entered is not valid (i.e. not in the expected format for a UK postcode).

The rates variable will return true if the postcode entered has returned at least one delivery rate that can be selected by the user.


Adding postcodes to your delivery rates

When adding or editing delivery rates you'll notice that there is a new field at the top labelled 'postcodes'. As shown in the example below.

In this field, you should enter the postcodes that are applicable to this delivery rate, i.e. what postcode can a customer enter to match with it.

Multiple postcodes can be entered, separated with a comma. (So after entering the postcode you should enter a comma).


Postcode Formats

Postcodes come in a range of formats, e.g. AA99 9AA (where A is a letter and 9 is a number). You can read more about the available postcode formats here.

The postcode extension looks at the 'outward code' entered by the customer, e.g. AA99.

The postcodes that you enter for your delivery rates should therefore only contain the outward code.

You can either enter a whole outward code, e.g. BB1 (known as the postcode district) or only the letters of the outward code (known as the postcode area), e.g. BB.

A list of postcode areas is available here. A list of postcode districts is available here.


An Example

Here's an example of a delivery rate that covers quite a few postcodes:

Customers that enter a postcode of SY99 1AA will match with this delivery rate because it's configured for SY99.

Customers that enter a postcode of SY98 1AA will not match (it's not configured for SY98).

A customer could enter any postcode which starts with DG.


ALL and ALLEXCEPT

There are also two special text strings you can use to save you entering every available postcode district/area.

You can enter ALL and any postcode entered by the customer will match with that delivery rate.

You can enter ALLEXCEPT and the delivery rate will be applicable to any postcode that isn't already configured in another delivery rate.