Detect shipping country change event on checkout

Retired Boards Appdev Extensions
1

Hi, I have created a checkout extension to add a new custom field on checkout. Now I need to show or hid that field based on shipping country in checkout. How can I detect shipping country change event within new checkout extensibility functions?

2

Try this:

export default extension('your.extension.target', (root, api) => {
  api.shippingAddress.subscribe(() =>
    yourMethodToHandleChange()
  );
});

May I ask how you added the custom field and where exactly you added it?

Do you know how to dynamically update address fields. I have tried this but noting seems to be happening:

await api.applyShippingAddressChange({
  type: 'updateShippingAddress',
  address: {
    zip: myNewZip
  }
});
3

If this is a cart/checkout validation function, you should be able to read the countryCode.

If you’re working with extensions, there’s auseShippingAddress()method that returns the shipping address, with country included.

4

Hi Liam, i’m a little confused, how i can detect when the user write something in the input field, it’s possible in the checkout extensibility api? i been reviewed all the hooks and i can’t found something useful for this case.

5

Did you ever get this figured out?

6

Hi, I am stuck with the same issue. I would like to know if there is an event that triggers when the address changes.
Can you provide a simple example please?

Thanks

7 
export default extension(
    `purchase.checkout.shipping-option-list.render-before`,
    async (root, api) => {
        const {shippingAddress} = api;
        let currentShippingCountry=shippingAddress.current.countryCode;
        shippingAddress.subscribe(async (newShippingAddress) => {
            if (currentShippingCountry !== newShippingAddress.countryCode) {
               currentShippingCountry = newShippingAddress.countryCode;
               // do what you need to do
            }
        });
});
8

Hi, do you have an example for detecting when the “Billing” address changes ?
I tried changing shippingAddress to billingAddress in your code but it’s not working for some reason

thanks for your help

9

Nevermind! It Works!!!

guess I needed to refresh something or the browser had to update.

Anyway, thanks Schmidtc63 !! You Rock!! :slightly_smiling_face:

1 Like