ShopWired

Ideal Postcodes provides a ShopWired integration that facilitates UK address search and validation across a ShopWired Store.

This extension is free to download and install. However, our address validation services requires a paid account at ideal-postcodes.co.uk.

This integration works by hooking into the custom scripts enabled for Google Analytics. It waits until a valid address form is present before binding itself.

Contact us if you get stuck. Drop by our developer chat page for in-depth assistance.

Features

• Address autocompletion on checkout shipping and billing pages
• Checks if key is usable before enabling autocomplete
• Populates organisation name from selected address

Screenshots

Address Autocomplete

Activate address autocompletion on your address collection forms.

Postcode Lookup

Enable postcode lookup on your checkout pages.

Links

• Guide
• Changelog
• npm Module
• GitHub Repository
• CDN

Support

If you need support, you can either reach out to us on our support page or drop by our developer chat page.

Installation

This integration is installed via adding our initialisation script via Advanced Customisation.

1. Access Advanced Customisation

From the Administration page sidebar, navigate to Checkout → Platform Checkout and scroll down to Advanced Customisation.

2. Insert Activation Code and Key

In the Script contents editor, insert the below configuration code and click on Save.

  <script>
    window.idpcConfig = {
      apiKey: "Your API Key goes here"
    };
  </script>

  <script async 
    type="text/javascript"
    crossorigin="anonymous"
    src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/shopwired@X.X.X">
  </script>

When inserting the configuration and initialisation codes into the editor, take special care to replace the following:

• The apiKey attribute in the first script tag. This should be replaced with the key on your account
• The version number of the second sript src field. The latter Y.Y.Y in "https://cdn.jsdelivr.net/npm/@ideal-postcodes/shopwired@Y.Y.Y" should be replaced with the relevant version number.

The latest version number is below:

Versions are automatically logged and tracked on our Changelog.

You can also optionally speed up

Optional: Preload Libraries

You can speed up address verification loading by adding our code directly in your Checkout configuration. In the Custom Javascript field, you can add the following to the top of the text box:

    <!-- Load Postcode Lookup (if required) -->
    <script
      type="text/javascript"
      crossorigin="anonymous"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      crossorigin="anonymous"
      integrity="sha256-JZSN3ZEXOFlpSMFjQkHjbKnjHlsFVf8N7p1SbCI0XHI="
      src="https://cdn.jsdelivr.net/npm/jquery-postcodes@3.0.8/dist/postcodes.min.js"
    ></script>

    <!-- Load Autocomplete (if required) -->
    <script
      type="text/javascript"
      crossorigin="anonymous"
      integrity="sha256-lZPaPHBx7V2Gj9iAc8QfVcW02KlWB2gbrqXpGfiEGgo="
      src="https://cdn.jsdelivr.net/npm/ideal-postcodes-autocomplete@0.2.1/dist/ideal-postcodes-autocomplete.min.js"
    ></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ideal-postcodes-autocomplete@0.2.1/css/ideal-postcodes-autocomplete.css"
    />

    <!-- Continue as before -->
    <script>
      window.idpcConfig = {
        apiKey: "Your API Key goes here"
        // etc...
      }
    </script>

Be aware however, that later versions of the ShopWired integration may require later versions of the above script.

3. Testing and Going Live

Your first key on your Ideal Postcodes account will carry a free test balance which you can use to verify and test your integration. When you are ready to go live, you will need to add a live balance to your Key either manually or with automated top-ups.

View our guide on how to create your first Ideal Postcodes API key and enable automated top-ups.

Configuration Options

Within the Configuration script tag, you may make adjustments to alter the behaviour of your integration. These are listed below:

Required

apiKey

string defaults to ""

The API Key is required to verify your account for address validation. This can be found on your account dashboard on ideal-postcodes.co.uk.

autocomplete

boolean defaults to true

Enable or disable autocomplete lookup on the first address line.

autocompleteOverride

object defaults to {}

Manually override the autocompletion plugin configuration.

Pass in a valid configuration object to override specific autocomplete configuration attributes.

postcodeLookup

boolean defaults to true

Enable or disable postcode lookup functionality.

postcodeLookupOverride

object defaults to {}

Manually override the postcode lookup configuraton.

populateOrganisation

boolean defaults to true

Addresses selected which carry an organisation attached will overwrite the value of the Company Name field.

populateCounty

boolean defaults to false

Populates the province or county field of the address form with the county of the address.

Configuration Defaults

{
  apiKey: "",
  autocomplete: true,
  postcodeLookup: true,
  populateCounty: fakse,
  populateOrganisation: true,
  autocompleteOverride: {},
  postcodeLookupOverride: {},
}

Safeguarding Your API Key

For more information on how to protect your API key against potential misuse, please visit our guide on securing your API key.