Address 🔍 Validation - ToolStation

Overview

Loqate is a thirdparty service that allows users to look up and validate their addresses with high precision.

Search and AutoFill Demo:

Occurence In WEB

Address Forms:

Checkout > Delivery Address
Checkout > Billing Address
Guest Checkout > Signup
My Account > Address Book
Register > Address Details

Core APIs

Base URL: https://services.postcodeanywhere.co.uk

AutoComplete Search: GET /Capture/Interactive/Find/v1.10/json3.ws?Key={apiKey}&Text={searchText}&Countries=NL&Limit=5&container

Query Parameters:

Key: Loqate API Key
Text: Search Text
Countries: Country Code
Limit: Number of Results

Retrieve Address Details: GET /Capture/Interactive/Retrieve/v1.10/json3.ws?Key={apiKey}&Id={addressId}

Query Parameters:

Key: Loqate API Key
Id: Address ID

Types

// ~/types/ecom/address.type.ts
export type LoqateAutocompletePrediction = {
  Id: string;
  Type: string;
  Text: string;
  Highlight: string;
  Description: string;
};

How does it work?

User types in the address field
Debounced search is triggered

// ~/components/organism/TsFormAddress.vue
const debouncedSearch = useDebounceFn(() => onAddressSearch(), 500);

async function onAddressSearch(container = "") {
  // Do not trigger search for empty query or null value or added special characters
  if (!sanitized_search_input.value) {
    search_input_suggestions.value = [];
    return;
  }

  const query = {
    Key: runtimeConfig.public.loqatePcaKey,
    Text: sanitized_search_input.value,
    Countries: appRegion,
    Limit: 5,
    container,
  };

  const res = await useAjax<{ Items: LoqateAutocompletePrediction[] }>(
    `${runtimeConfig.public.loqateBaseApiUrl}/Capture/Interactive/Find/v1.10/json3.ws`,
    { query }
  );

  if (res && res.Items) {
    // Populate the search prediction results
    search_input_suggestions.value = res.Items.map(
      (item: LoqateAutocompletePrediction) => ({
        ...item,
        description: item.Text + " " + item.Description,
      })
    );
  }
}

Results are displayed in a dropdown
User selects an address
If more addresses are available under the selected locality, search API is re-triggered with the selected locality else Address components are autofilled

// ~/components/organism/TsFormAddress.vue

async function onAddressSelect(val: LoqateAutocompletePrediction) {
  // More addresses are present in the component (e.g Farmsum - 21 Addresses)
  if (val.Description.split(" ").includes("Addresses")) {
    // Retrigger the search with selected locality container
    onAddressSearch(val.Id);
    return false;
  }

  fetchAddressDetail(val);
}

async function fetchAddressDetail(item: LoqateAutocompletePrediction) {
  if (!sanitized_search_input.value) {
    search_input_suggestions.value = [];
    zipCodeSearchLoader.value = false;
    return;
  }

  const query = {
    Key: runtimeConfig.public.loqatePcaKey,
    Id: item.Id,
  };

  const res = await useAjax(
    `${runtimeConfig.public.loqateBaseApiUrl}/Capture/Interactive/Retrieve/v1.10/json3.ws`,
    { query }
  );

  if (res && res.Items && res.Items.length > 0) {
    // Fill form fields accordingly
    addressFormFields.value.line_1 = res.Items[0].BuildingNumber;
    addressFormFields.value.line_2 = res.Items[0].Line2;
    addressFormFields.value.line_3 = res.Items[0].Street;
    addressFormFields.value.county = res.Items[0].Province;
    addressFormFields.value.postcode = res.Items[0].PostalCode;
    addressFormFields.value.town = res.Items[0].City;

    search_input.value = res.Items[0].PostalCode;
    shouldSetInputValueOnSelect.value = true;

    search_input_suggestions.value = [];
  }
}

References

Google Docs Service

PRO Card Feature