How to enable checkout-ui extension that targets purchase.address-autocomplete.format-suggestion

Retired Boards Appdev Extensions
1

Hi, there appears to be some lacking documentation on how to enable a checkout-ui extension that targets purchase.address-autocomplete.format-suggestion.

I have created two extensions in my application, they target:

  • purchase.address-autocomplete.suggestion
  • purchase.address-autocomplete.format-suggestion

When running my extensions locally, I can see that when selecting a suggestion, that my format-suggestion extension will run successfully. When I inspect the checkout DOM, I can see that my extension is loaded from extensions.shopifycdn.com. In a local environment, all extensions are enabled by default.

Across my production stores, I have enabled my application to be used for address autocomplete. This is documented here on how to enable this.

It seems however that this does not enable the format-suggestion extension, only the suggestion target extension. I have looked at the checkout DOM in a production store and can see that my format-suggestion extension is not loaded and the following error message appears when the user selects a suggestion:

The address fields could not be auto-populated. Please provide a `formattedAddress` for the selected suggestion or implement the `purchase.address-autocomplete.format-suggestion` extension

The documentation surrounding this target is here. It states that that suggestion extension should not provide a formatted address in order to invoke the format-suggestion extension.

This extension target is only necessary if the corresponding purchase.address-autocomplete.suggest target does not provide a formattedAddress for the suggestions. If a formatted address is provided with each suggestion, then this target will not be called.

Can instruction be provided on how this extension target can be enabled on a production store?

2

I’ve resolved this. Both extensions module targets need to be a part of the same extension. Declaring two extension targets in the same toml file resolved this.

It’s strange how it works in the local environment but that may be a side effect of local environments enabling all extensions.

e.g.

[[extensions.targeting]]
module = "./src/SuggestExtension.jsx"
target = "purchase.address-autocomplete.suggest"

[[extensions.targeting]]
module = "./src/FormatExtension.jsx"
target = "purchase.address-autocomplete.format-suggestion"