How to set up Loqate with BigCommerce

Before you start, make sure you have a Loqate account. If you don’t already have one, you will need to sign up.

Set up

In order to set up Loqate for BigCommerce, please follow these steps:

In your Loqate account select "Add service +" in the top banner.

Add service

Then select "Start setup".

Start setup

You will be presented with two options: Website or App. Select "App" - tick “BigCommerce” from the suggested options below, and hit "Next".

Select App

You will be presented with a code snippet. Please ignore this code. We are in the process of updating the code. You will find the updated code later on in this guide.

Click the "Generate my mappings" button at the bottom of the page. This will generate mappings that match the standard BigCommerce field layout.

Next, log in to BigCommerce and go to "Script Manager". You can access this by clicking Sidebar > Storefront > Script Manager.

Once in this section you want to add Script Library, then fill out the checkboxes as follows:

Check boxes

Checkboxes

In the "Script Contents" area paste the below code. You will need to replace [ACCOUNTCODE] with your Loqate account number. Then save and publish the script changes.

<script src="https://unpkg.com/react-trigger-change/dist/react-trigger-change.js"></script>
<script>
(function(n,t,i,r){var u,f;n[i]=n[i]||{},n[i].initial={accountCode:"[ACCOUNTCODE]",host:"[ACCOUNTCODE].pcapredict.com"},n[i].on=n[i].on||function(){(n[i].onq=n[i].onq||[]).push(arguments)},u=t.createElement("script"),u.async=!0,u.src=r,f=t.getElementsByTagName("script")[0],f.parentNode.insertBefore(u,f)})(window,document,"pca","//[ACCOUNTCODE].pcapredict.com/js/sensor.js");

pca.on("ready", function () { pca.sourceString = "BigCommerce-GuideSetup";});
pca.on('data', function(source, key, address, variations) {
if (source === "address" && window.location.href.includes('checkout')) {
  if (pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings.length > 0) {
    for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
      var pcaField = document.getElementById(pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element);
      if (pcaField) {
        pca.fire(pcaField, 'change');
        reactTriggerChange(pcaField);
      }
    }
  }
  var provDrop = document.getElementById('provinceCodeInput');
  if(provDrop) {
    pca.setValue('provinceCodeInput', address.ProvinceName);
    pca.fire(provDrop, 'change');
    reactTriggerChange(provDrop);
  }
  var provInput = document.getElementById('provinceInput');
  if (provInput) {
    pca.setValue('provinceInput', address.ProvinceName);
    pca.fire(provInput, 'change');
    reactTriggerChange(provInput);
  }
  var cityInput = document.getElementById('cityInput');
  if (cityInput) {
    pca.setValue('cityInput', address.City);
    pca.fire(cityInput, 'change');
    reactTriggerChange(cityInput);
  }
  var pcInput = document.getElementById('postCodeInput');
  if (pcInput) {
    pca.setValue('postCodeInput', address.PostalCode);
    pca.fire(pcInput, 'change');
    reactTriggerChange(pcInput);
  }
}
});
</script>

Once this has been done the Loqate functionality will work as follows:

Loqate Address Lookup

Troubleshooting

If you require any help, please do not hesitate to get in touch with our support teams.