1

I'm using two custom modules which extend the same shipping.js using mixin. The problem is, if I disable one module then the another module is working and vice versa. Even, I tried setting up the dependence in module.xml it didn't solve my problem.

Below module is to move billing address to step 1,

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Module_One" setup_version="2.0.0">
        <sequence>
            <module name="Module_Two"/>
        </sequence>
    </module>
</config>

And the layoutprocessor is,

public function aroundProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        Closure $proceed,
        array $jsLayout
    )

shipping-mixin.js file is

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/action/create-billing-address',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/checkout-data'
], function(
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    createBillingAddress,
    selectBillingAddress,
    setShippingInformationAction,
    stepNavigator,
    checkoutData
) {
    'use strict';

    return function (target) {
        return target.extend({
            defaults: {
                template: 'Module_One/address'
            },
            setShippingInformation: function () {
                if (this.validateShippingInformation() && this.validateBillingInformation()) {
                    setShippingInformationAction().done(
                        function () {
                            setTimeout(function () {
                                if ($("button.action.primary.checkout").length) {
                                    $("#co-payment-form").find(".action.primary.checkout").trigger("click");
                                    return false;
                                }
                            }, 1000);
                        }
                    );
                }
            },
            validateBillingInformation: function() {

                if($('[name="billing-address-same-as-shipping"]').is(":checked")) {
                    if (this.isFormInline) {
                        var shippingAddress = quote.shippingAddress();
                        var addressData = addressConverter.formAddressDataToQuoteAddress(
                            this.source.get('shippingAddress')
                        );
                        //Copy form data to quote shipping address object
                        for (var field in addressData) {

                            if (addressData.hasOwnProperty(field) &&
                                shippingAddress.hasOwnProperty(field) &&
                                typeof addressData[field] != 'function' &&
                                _.isEqual(shippingAddress[field], addressData[field])
                            ) {
                                shippingAddress[field] = addressData[field];
                            } else if (typeof addressData[field] != 'function' &&
                                !_.isEqual(shippingAddress[field], addressData[field])) {
                                shippingAddress = addressData;
                                break;
                            }
                        }

                        if (customer.isLoggedIn()) {
                            shippingAddress.save_in_address_book = 1;
                        }
                        var newBillingAddress = createBillingAddress(shippingAddress);
                        selectBillingAddress(newBillingAddress);
                    } else {
                        selectBillingAddress(quote.shippingAddress());
                    }

                    return true;
                }

                var selectedAddress = $('[name="billing_address_id"]').val();
                if(selectedAddress) {
                    var res = addressList.some(function (addressFromList) {
                        if (selectedAddress == addressFromList.customerAddressId) {
                            selectBillingAddress(addressFromList);
                            return true;
                        }
                        return false;
                    });

                    return res;
                }

                this.source.set('params.invalid', false);
                this.source.trigger('billingAddress.data.validate');

                if (this.source.get('params.invalid')) {
                    return false;
                }

                var addressData = this.source.get('billingAddress'),
                    newBillingAddress;

                if ($('#billing-save-in-address-book').is(":checked")) {
                    addressData.save_in_address_book = 1;
                }

                newBillingAddress = createBillingAddress(addressData);
                selectBillingAddress(newBillingAddress);

                return true;
            }
        });
    }
});

And this module is to add custom form at checkout page and the module xml file is,

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Module_Two" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

and the layoutProcessor is,

public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    )

And this module shipping-mixin.js file is,

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/shipping-rates-validator',
    'Magento_Checkout/js/model/shipping-address/form-popup-state',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/checkout-data',
    'uiRegistry',
    'mage/translate',
    'Magento_Checkout/js/model/shipping-rate-service'
], function (
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    shippingRatesValidator,
    formPopUpState,
    shippingService,
    selectShippingMethodAction,
    rateRegistry,
    setShippingInformationAction,
    stepNavigator,
    modal,
    checkoutDataResolver,
    checkoutData,
    registry,
    $t
) {
    'use strict';

    var mixin = {

        defaults: {
            template: 'Module_Two/shipping'
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});

What I'm missing here, How can I resolve this problem. Thanks is advance.

  • There must be something wrong u r doing can u plz post ur both shipping js file. – Hitesh Agrawal Jun 7 '20 at 4:55
  • @HiteshAgrawal I have updated my code. Please have a look. – TS Guhan Jun 7 '20 at 5:06
1

As i am seen the Module_Two code you used shipping-mixin.js file to just change the template. and you also added Module_Two dependency in Module_One FYI :

  <module name="Module_One" setup_version="2.0.0">
    <sequence>
        <module name="Module_Two"/>
    </sequence>
</module>

so now this is clear the Module_Two always load first then Module_One and so now the copy Module_Two/shipping template into Module_One/address template changed section, assuming only custom code change only copy.

so Module_One/address template will have Module_One + Module_Two custom html code

Save it

Deploy the template (delete Module_One/address.html template form pub/static/frontend/... )

$php bin/magento setup:static-content:deploy -f 

(Note : -f assuming we are working developer mode)

and flush the cache for safely :)

$php bin/magento c:f

then reload the checkout page hope Module_One and Module_Two html code will render together, as you expecting.


And Additional to (optional) if we have controller over future upgrade of Module_Two

then Performance Point of view delete Module_Two -> shipping-mixin.js (not required), shipping.html (code already copied to module one) and

requirejs-config.js : delete mixin code of shipping-mixin example reference.

mixins: {
         'Magento_Checkout/js/view/shipping': {
             'Module_Two/js/shipping-mixin': true
         },  
         ...
}

why remove or delete because to avoid a network request (js and template) :)

Hope this will help to solve your concern.

let us know or share detail, if any further help required.

  • It helped me to resolve the issue. Thank you. – TS Guhan Jun 7 '20 at 16:50

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.