Before you start, make sure you have a Loqate account. If you don’t already have one, you will need to sign up.
In order to set up Loqate for BigCommerce, please follow these steps:
In your Loqate account select "Add service +" in the top banner.
Then select "Start setup".
You will be presented with two options: Website or App. Select "App" - tick “BigCommerce” from the suggested options below, and hit "Next".
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:
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:
If you require any help, please do not hesitate to get in touch with our support teams.