Loqate

How to set up Loqate with Zoey

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

Set up a New Service

Log in to your Loqate account, add a new service, and select the Simple setup style. Paste the URL for your Zoey store checkout into the relevant textbox, and click “Next”.

Enable the New Service

Take a copy of the Loqate code on the second screen, and go to the Admin section of your Zoey store.

Once you’re in the admin section, click “Edit My Design” on the left-hand menu, then click the “Edit My Design” button towards the right of the screen. This will take you to the Zoey design editor. In the top-right of the screen there will be a menu with a cog icon. Click this, then select “CSS/JavaScript/HTML Editor”.

Within the code editor, select the HTML Head tab, and paste in the Loqate code previously copied from your account section. Before the ending </script> tag of the Loqate code, paste the following JavaScript to allow the Loqate service to interact with the Zoey checkout:

;pca.on("ready", function()
{
	var docPca = document.querySelector(".pca");
	if (docPca) {
		docPca.style.display = "block";
	}
});

pca.on('data', function(source, key, address, variations) {
	var countryMapping = "";
	var provinceMapping = "";
	var regionDropdownUsed = false;
	if (pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings.length == 1) {
		for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
			if (pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element.includes('country_id')) {
				countryMapping = pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element;
			}
			if (pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element.includes('region_id')) {
				provinceMapping = pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element;
				regionDropdownUsed = true;
			}
			if (!regionDropdownUsed) {
				if (pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element.includes('region')) {
					provinceMapping = pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element;
					regionDropdownUsed = false;
				}
			}
		}

		var countryDropdown = document.getElementById(countryMapping);
		if (countryDropdown) {
			countryDropdown.value = address.CountryIso2;
			pca.fire(countryDropdown, 'change');
		}
		if (regionDropdownUsed) {
			var regionDropdown = document.getElementById(provinceMapping);
			if (regionDropdown) {
				for (var i = 0; i < regionDropdown.options.length; i++) {
					if (regionDropdown.options[i].text == address.ProvinceName.replace('├®','e')) {
						regionDropdown.value = regionDropdown.options[i].value;
						pca.fire(regionDropdown, 'change');
					}
				}
			}
		} else {
			var txtRegion = document.getElementById(provinceMapping);
			if (txtRegion) {
				txtRegion.value = address.ProvinceName;
				pca.fire(txtRegion, 'change');
			}
		}
	}
});

Click “Save” on the dialogue box when done, then “Publish” in the top right of the screen to deploy the changes to your Zoey store.

Setup Checkout Address Fields

Go back to the page you copied the code from in your Loqate account and click Launch in-page setup. It is not possible to load the Zoey store into a frame for the Loqate setup, so click the option “continue the setup directly on your site”.

Navigate to your store’s checkout page, and ensure the address form fields that Loqate picks up for both Billing and Shipping are correct. Save the configuration, close the tab used to perform the setup, and ensure there are two new services set up on your Loqate account:

Test the Service

To test the service, navigate to your Zoey checkout and start typing an address. Loqate will suggest options as you type. Select the address you were looking for, and ensure the Zoey checkout address fields are populated as expected.

Take a trial - no obligation, full support Get started