Skip to main content

Ideal Postcodes ShopWired Integration

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#

Shopwired Demo

Address Finder#

Activate Address Finder on your address collection forms-screenshot

Postcode Lookup#

Enable Postcode Lookup on your checkout pages-screenshot

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.

Go to theme template-screenshot

Access Theme Templates#

From the Administration page sidebar, navigate to Themes โ†’ Installed Themes click on Page Editor.

Access the page editor-screenshot

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).

Insert configuration code-screenshot

Once again update apiKey.

Configuration#

The minimum configuration is as follows:

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

See our integration configuration guide to understand how to customise this.

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: {}}

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.

Browser Extension-screenshot