Shopwired Integration for UK Address Search and Validation

Features

• Address autocompletion on:
  • Checkout (shipping and billing pages)
  • User registration page
  • Account details page
• Checks if the API Key is usable before enabling autocomplete
• Populates organisation name from selected address

info

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

Screenshots

Address Finder

Postcode Lookup

Enable on Checkout

To enable Address Validation on checkout, you will need to use ShopWired's Advanced Customisation.

Access Advanced Customisation

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

Insert Activation Code

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@2">
</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.

Enable on Accounts

To enable Address Validation on user accounts and other pages you will need to update your ShopWired theme template.

Access Theme Templates

From the Administration page sidebar, navigate to Themes → Installed Themes click on Page Editor.

Insert Activation Code

From the Page Editor, click on Views then Templates then master.twig. At the bottom of the editor before </body>, add the same activiation code as the checkout section (above).

Once again update apiKey.

Defaults

The available configuration attributes for the configuration are as follows:

{
   // API Key is not set by default
  apiKey: "",

  // Postcode Lookup is enabled
  postcodeLookup: true,

  // Autocomplete is enabled
  autocomplete: true,

  // Company name field is updated
  populateOrganisation: true,
  // County name field is not updated
  populateCounty: false,
  
  // Advanced configuration
  autocompleteOverride: {},
  postcodeLookupOverride: {}
}

Supported Forms

Support URL Paths:

/business

Address Field Selectors (Supported Fields)

Billing Form

{
  line_1: '[name="billing_address1"]',
  line_2: '[name="billing_address2"]',
  line_3: '[name="billing_address3"]',
  post_town: '[name="billing_city"]',
  postcode: '[name="billing_postcode"]',
  country: '[name="billing_country_id"]',
}

Shipping Form

{
  line_1: '[name="shipping_address1"]',
  line_2: '[name="shipping_address2"]',
  line_3: '[name="shipping_address3"]',
  post_town: '[name="shipping_city"]',
  postcode: '[name="shipping_postcode"]',
  country: '[name="shipping_country_id"]',
}

Customer Form

{
  line_1: '[name="address_line1"]',
  line_2: '[name="address_line2"]',
  line_3: '[name="address_line3"]',
  post_town: '[name="city"]',
  postcode: '[name="postcode"]',
  country: '[name="country_id"]',
}

Billing Edit Form

{
  line_1: '[name="billing_address_line1"]',
  line_2: '[name="billing_address_line2"]',
  line_3: '[name="billing_address_line3"]',
  post_town: '[name="billing_city"]',
  postcode: '[name="billing_postcode"]',
  country: '[name="billing_country_id"]',
}

Shipping Edit Form

{
  line_1: '[name="shipping_address_line1"]',
  line_2: '[name="shipping_address_line2"]',
  line_3: '[name="shipping_address_line3"]',
  post_town: '[name="shipping_city"]',
  postcode: '[name="shipping_postcode"]',
  country: '[name="shipping_country_id"]',
}

Upgrades

This integration will be continually updated without your action. However there will be occassion when a backwards breaking change is introduced. When this happens we will increment the version number at the end of the script src.

Admin Pages

To enable address validation on your admin page, you will need to use our Browser Extension.