Format address suggestions in checkout

Anchor to Update the address autocomplete ,[object Object], codeUpdate the address autocomplete suggest.js code

Update the suggest.js file in the src directory of your address autocomplete extension that you created in the previous tutorial with this tutorial's suggest.js code.

Anchor to Add the ,[object Object], target to your address autocomplete extensionAdd the format-suggestion target to your address autocomplete extension

1. Create a new file called format-suggestion.js in the src directory of your extension that you created in the previous tutorial.

2. Import the extension function from the @shopify/ui-extensions/checkout library.

3. Set the extension target to purchase.address-autocomplete.format-suggestion.

4. Export this extension so it can be referenced in your configuration.

Anchor to Update the extension configuration fileUpdate the extension configuration file

1. Update the shopify.extension.toml file to include the format-suggestion target.

2. Restart the server to apply the changes:

Anchor to Extract the attribute from the targetExtract the attribute from the target

In the format-suggestion.ts file, extract the selectedSuggestion attribute provided by the target. This is the autocomplete suggestion that the buyer selected during checkout.

Anchor to Fetch an address from an external serviceFetch an address from an external service

Use the selectedSuggestion attribute to fetch the formatted address from the external address service. Return the formatted address to the checkout UI extension.

Anchor to Start your serverStart your server

Run the Shopify CLI dev command to build your app and preview it on your development store.

Make sure that you select a development store that has enabled the developer preview for Checkout and Customer Accounts Extensibility.

1. In a terminal, navigate to your app directory.

2. Either start or restart your server to build and preview your app:

   Terminal

   Copy

   9

   1

   shopify app dev

3. Press p to open the developer console.

4. In the developer console page, click on the preview link for the custom format suggestion extension.

   The checkout opens.

This section describes how to solve some potential errors when you run dev for an app that contains a checkout UI extension.

Anchor to Property token errorProperty token error

If you receive the error ShopifyCLI:AdminAPI requires the property token to be set, then you'll need to use the --checkout-cart-url flag to direct Shopify CLI to open a checkout session for you.

Anchor to Missing checkout linkMissing checkout link

If you don't receive the test checkout URL when you run dev, then verify the following:

• You have a development store populated with products.

• You're logged in to the correct Partners organization and development store. To verify, check your app info using the following command:

  Terminal

  Copy

  $

  $

  shopify app info

Otherwise, you can manually create a checkout with the following steps:

1. From your development store's storefront, add some products to your cart.

2. From the cart, click Checkout.

3. From directory of the app that contains your extension, run dev to preview your app:

   Terminal

   Copy

   $

   $

   shopify app dev

4. On the checkout page for your store, change the URL by appending the ?dev=https://{tunnel_url}/extensions query string and reload the page. The tunnel_url parameter allows your app to be accessed using a unique HTTPS URL.

   You should now see a rendered order note that corresponds to the code in your project template.

Anchor to In the Checkout and Accounts EditorIn the Checkout and Accounts Editor

Preview your extension in the Checkout and Accounts Editor:

1. Navigate to the Address autocompletion section in the Settings tab of the checkout and accounts editor.
2. Select your address autocomplete app.
3. Enter a house number and street name in the address field of the delivery address (for example, "1 White House").
4. Select an address suggestion in the dropdown (for example, “1 White House, Huntington NY 11743”). The delivery address fields are automatically updated.