Skip to main content

purchase.address-autocomplete.suggest
Target

Requires access to protected customer data for some properties.

An extension target that provides address autocomplete suggestions for address forms at checkout. Suggestions are presented to customers for delivery, billing, and pickup point addresses.

The extension target must return a list of address suggestions.

If a formatted address is provided with each suggestion, then it will be used to auto-populate the fields in the address form when the customer selects a suggested address.

Optionally, you can implement the purchase.address-autocomplete.format-suggestion extension target to format an address based on the address suggestion selected by the customer.

Note

  • This target does not support rendering UI components.
  • This extension can only be developed as a JavaScript extension using the ui-extensions library.
  • The app extension configuration shopify.extension.toml file is shared between this extension target and purchase.address-autocomplete.format-suggestion. This includes extension settings specified in the configuration file.

Anchor to addressautocompletesuggestapiAddressAutocompleteSuggestApi

The API object provided to the purchase.address-autocomplete.suggest extension target.

AbortSignal
required

The signal that the extension should listen to for cancellation requests.

If the signal is aborted, the extension should cancel any ongoing requests. The signal will be aborted either when the buyer navigates away from the address field or when the debounced query value changes.

Pass this signal to any asynchronous operations that need to be cancelled, like fetch.

required

The current state of the address form that the buyer is interacting with.

Requires access to protected customer data.

Was this section helpful?

Anchor to addressautocompletesuggestoutputAddressAutocompleteSuggestOutput

The object expected to be returned by the purchase.address-autocomplete.suggest extension target.

[]
required

An array of address autocomplete suggestions to show to the buyer.

Note

Only the first five suggestions will be displayed to the buyer.

Was this section helpful?

Anchor to addressautocompletestandardapiAddressAutocompleteStandardApi

The base API object provided to this and other purchase.address-autocomplete extension targets.

required

The methods for interacting with Web Pixels, such as emitting an event.

[]
required

The metafields requested in the shopify.extension.toml file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.

Requires access to protected customer data.

Tip

> Cart metafields are only available on carts created via the Storefront API version 2023-04 or later.*

[] | undefined
required

The custom attributes left by the customer to the merchant, either in their cart or during checkout.

| undefined
required

A stable ID that represents the current checkout.

Matches the token field in the WebPixel checkout payload and the checkout_token field in the REST Admin API Order resource.

<Target>
required

The meta information about the extension.

required

Utilities for translating content and formatting values according to the current localization Type 'RunnableExtensionInstance' is not assignable to type 'ExtensionInstance'.

Refer to localization examples for more information.

required

The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the i18n object instead.

[]
required

The metafields that apply to the current checkout.

Metafields are stored locally on the client and are applied to the order object after the checkout completes. They are shared by all extensions running on checkout, and persist for as long as the customer is working on this checkout.

Once the order is created, you can query these metafields using the GraphQL Admin API

<Data = unknown, Variables = Record<string, unknown>>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }>
required

The method used to query the Storefront GraphQL API with a prefetched token.

Refer to Storefront API access examples for more information.

required

The session token providing a set of claims as a signed JSON Web Token (JWT).

The token has a TTL of 5 minutes.

If the previous token expires, this value will reflect a new session token with a new signature and expiry.

Refer to session token examples for more information.

required

The settings matching the settings definition written in the shopify.extension.toml file.

Refer to settings examples for more information.

Note

The settings are empty when an extension is being installed in the checkout editor.

required

The shop where the checkout is taking place.

required

The key-value storage for the extension.

It uses localStorage and should persist across the customer's current checkout session.

Caution

Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.

Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier, each activated extension target had its own storage.

required

The runner version being used for the extension.

| undefined

The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke.

Requires access to protected customer data.

| undefined

The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke.

Note

An address value is only present if delivery is required. Otherwise, the subscribable value is undefined.

Requires access to protected customer data.

Was this section helpful?

purchase.address-autocomplete.suggest

JavaScript

import {extension} from '@shopify/ui-extensions/checkout';

export default extension(
'purchase.address-autocomplete.suggest',
async ({signal, target}) => {
// 1. Use the query term the buyer entered
const {field, value} = target;

// 2. Fetch address suggestions
const response = await fetch(
`https://myapp.com/api/address-suggestions?query=${value}&field=${field}`,
{signal},
);

// 3. Map response data to expected format
const {data} = await response.json();
const suggestions = data.map((suggestion) => {
return {
id: suggestion.id,
label: suggestion.label,
matchedSubstrings:
suggestion.matchedSubstrings,
formattedAddress: {
address1: suggestion.address1,
address2: suggestion.address2,
city: suggestion.city,
zip: suggestion.zip,
provinceCode: suggestion.provinceCode,
countryCode: suggestion.countryCode,
},
};
});

// 4. Return up to five address suggestions
return {
suggestions: suggestions.slice(0, 5),
};
},
);