2

I need to change city field as a select field while change country name as India. otherwise, it shows text field.

I follow this link use @Idham Choudry answer, but its throw Uncaught TypeError: mixing is not a function

what I did:

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
            } 
        }
    }
};

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_id']",function(){
           //for country
           alert("country Changed");
           console.log("country Changed");
        });

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

Suggest me,

  1. How Magento 2 did, while country change, then That Country related State is there in directory_country_region table means, its change select field, otherwise, its show text filed and which file handle this functionality, I need to do same thing to in my case.

  2. what's error in my code and how to fix this.

Note: I am using Magento 2.1.7

  • have you found any solution for this? If any, please share here. – Yudi Apr 12 '18 at 7:49
  • Hello @Yudi, I posted an answer for same. – Sarfaraz bheda Jun 1 '18 at 11:35
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).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.

You can check this reference also.

| improve this answer | |
2

You can include the quote as a dependency in your mixin (or new component) and subscribe on the shippingAddress like this:

define([
    'ko',
    'uiElement',
    'jquery',
    'Magento_Checkout/js/model/quote',
    'domReady!',
], function (ko, Component, $, quote) {
    'use strict';

    return Component.extend({

        initialize: function () {
            this._super();
            quote.shippingAddress.subscribe(this.shippingAddressObserver.bind(this));
        },

        shippingAddressObserver: function (address) {
            if(address.countryId == "IN") { //Not sure what the country ID of india is
                // Your logic
            }
        }
    });
| improve this answer | |

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.