0

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.

8

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

3
  • 2
    above code throws an error "mixin is not a function" – Dhaval Solanki Apr 17 '18 at 11:56
  • 1
    @Dsmagento i am also getting same issue have u resolved this? – Nagaraju K Jul 10 '18 at 12:14
  • @NagarajuKasa add quotes around 'config' and 'mixins' – Mage Explorer Sep 20 '19 at 18:51
5

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

2
0

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

  1. 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).

0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.