Magento2 - How to trigger onchange event on Country/region in Shipping Address

Question

I want to customize checkout page where I can add my jQuery on change event on country, region field,

So Whenever Customer change field like country,region option few rest of fields like city, zip/Post Code, Address and province change.

Answer 1

Create requirejs-config.js in your Namespace/Module/view/frontend

var config = {
    'config': {
        'mixins': {
            'Magento_Checkout/js/action/set-shipping-information': {
                'Namespace_Module/js/action/set-shipping-information-mixin': true
            } 
        }
    }
};

some quote were missing above caused errors

then create set-shipping-information-mixin.js in Namespace/Module/view/frontend/web/js/action/

define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
    'Magento_Checkout/js/model/shipping-rate-processor/new-address',
], function ($, wrapper, quote, shippingService, rateRegistry, customerAddressProcessor, newAddressProcessor) {

    $(document).on('change',"[name='country']",function(){
       //for country
    });

    $(document).on('change',"[name='region_id']",function(){
       //for province or region
    });
});

don't forget to run setup upgrade and static content deploy

Answer 2

I found the solution for mixins JS issue. This worked for me.

Create requirejs-config.js in your Namespace/Module/view/base/requirejs-config.js

var config = {
    'config': {
        'mixins': {
            'Magento_Checkout/js/action/set-shipping-information': {
                'Ktpl_CheckoutWarning/js/hook': true
            }
        }
    }
};

then create set-shipping-information-mixin.js in Namespace/Module/view/base/web/js/hook.js

define([
    'jquery'
], function ($) {
    'use strict';
    console.log("Called this Hook.");

    $(document).ready(function () {
        $(document).on('change', "[name='country_id']", function () {
            alert("Hi");
        });
    });

    return function (targetModule) {
        targetModule.crazyPropertyAddedHere = 'yes';
        return targetModule;
    };
});

Run Setup upgrade and content-deploy command. Let me know if you face any other. To verify this Check-in console it will show "Called this Hook."

Thanks to this blog

Answer 3

First of all you need to add you custom class in the field you want read the event. refer this for adding the custom class/id

1.Change the checkout form field classes and names.

OR

2. Magento 2: How to add Class on Checkout Page?

After that you can write you logic in any of the checkout steps js file (if jQuery).

Answer 4

Actually this should work by default if you have more then one shipping method, if you are using table rates and you want to work by country only using the table rates you can do a trick.

Add the free shipping method in admin, and set the "Minimum Order Amount" with a very large number, ex 9999999.

And now it works!