0

I promise to give someone 50 bounty points if you are able to help me resolve this. (I wills start a bounty when the system allows me to and give the reward then)

Magento 2.4.2-p1 Amasty extensions Smartwave Porto theme

I have a gift shop. All of our customers always order gifts for someone else so it will always be the case that the Shipping address will be different from the Billing address.

I tried to follow (the same) steps in these 2 articles:

https://itecnotes.com/magento/magento-magento-2-uncheck-my-billing-and-shipping-address-are-the-same-checkbox-in-checkout-payment-page-based-on-shipping-method/

Magento 2 : Uncheck My billing and shipping address are the same checkbox in checkout payment page based on shipping method

I followed all the steps of the 'Magento best practices way'. I did not have some of the subdirectories, so I created them. Afterwards, I ran the following:

rm -rf pub/static/frontend
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento indexer:reindex
php bin/magento setup:di:compile 
php bin/magento setup:static-content:deploy -f

I also deleted all browser Cache but the 'My billing and shipping address are the same' option continues to be ticked (checked) by default. What changes do I need to make in order for this to work?


UPDATED on November 18th, 2022:

I have now done it both ways (Magento best practices way and the 'Dirty way') and it still does not work for me (the 'My billing and shipping address are the same' option remains ticked.

Here are my steps:

  • Magento best practices way.

2. /public_html/app/code/Vendor/Module/view/frontend

I've put the requirejs-config.js file with the following content:

var config = {
 map: {
 '*': {
   'Magento_Checkout/js/model/checkout-data-resolver': 'Vendor_Module/js/checkout-data-resolver',
   'Magento_Checkout/js/model/shipping-save-processor/default': 'Vendor_Module/js/shipping-save-processor/default'
  }
}};

3. I copied the file.

4. /public_html/app/code/Vendor/Module/view/frontend/web/js

has

requirejs-config.js with the following content:

    /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    
    /**
     * Checkout adapter for customer data storage
     */
    define([
        'Magento_Customer/js/model/address-list',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/checkout-data',
        'Magento_Checkout/js/action/create-shipping-address',
        'Magento_Checkout/js/action/select-shipping-address',
        'Magento_Checkout/js/action/select-shipping-method',
        'Magento_Checkout/js/model/payment-service',
        'Magento_Checkout/js/action/select-payment-method',
        'Magento_Checkout/js/model/address-converter',
        'Magento_Checkout/js/action/select-billing-address',
        'Magento_Checkout/js/action/create-billing-address',
        'underscore'
    ], function (
        addressList,
        quote,
        checkoutData,
        createShippingAddress,
        selectShippingAddress,
        selectShippingMethodAction,
        paymentService,
        selectPaymentMethodAction,
        addressConverter,
        selectBillingAddress,
        createBillingAddress,
        _
    ) {
        'use strict';
    
        return {
    
            /**
             * Resolve estimation address. Used local storage
             */
            resolveEstimationAddress: function () {
                var address;
    
                if (checkoutData.getShippingAddressFromData()) {
                    address = addressConverter.formAddressDataToQuoteAddress(checkoutData.getShippingAddressFromData());
                    selectShippingAddress(address);
                } else {
                    this.resolveShippingAddress();
                }
    
                if (quote.isVirtual()) {
                    if (checkoutData.getBillingAddressFromData()) {
                        address = addressConverter.formAddressDataToQuoteAddress(
                            checkoutData.getBillingAddressFromData()
                        );
                        selectBillingAddress(address);
                    } else {
                        this.resolveBillingAddress();
                    }
                }
            },
    
            /**
             * Resolve shipping address. Used local storage
             */
            resolveShippingAddress: function () {
                var newCustomerShippingAddress;
    
                if (!checkoutData.getShippingAddressFromData() &&
                    window.checkoutConfig.shippingAddressFromData
                ) {
                    checkoutData.setShippingAddressFromData(window.checkoutConfig.shippingAddressFromData);
                }
    
                newCustomerShippingAddress = checkoutData.getNewCustomerShippingAddress();
    
                if (newCustomerShippingAddress) {
                    createShippingAddress(newCustomerShippingAddress);
                }
                this.applyShippingAddress();
            },
    
            /**
             * Apply resolved estimated address to quote
             *
             * @param {Object} isEstimatedAddress
             */
            applyShippingAddress: function (isEstimatedAddress) {
                var address,
                    shippingAddress,
                    isConvertAddress,
                    addressData,
                    isShippingAddressInitialized;
    
                if (addressList().length === 0) {
                    address = addressConverter.formAddressDataToQuoteAddress(
                        checkoutData.getShippingAddressFromData()
                    );
                    selectShippingAddress(address);
                }
                shippingAddress = quote.shippingAddress();
                isConvertAddress = isEstimatedAddress || false;
    
                if (!shippingAddress) {
                    isShippingAddressInitialized = addressList.some(function (addressFromList) {
                        if (checkoutData.getSelectedShippingAddress() == addressFromList.getKey()) { //eslint-disable-line
                            addressData = isConvertAddress ?
                                addressConverter.addressToEstimationAddress(addressFromList)
                                : addressFromList;
                            selectShippingAddress(addressData);
    
                            return true;
                        }
    
                        return false;
                    });
    
                    if (!isShippingAddressInitialized) {
                        isShippingAddressInitialized = addressList.some(function (addrs) {
                            if (addrs.isDefaultShipping()) {
                                addressData = isConvertAddress ?
                                    addressConverter.addressToEstimationAddress(addrs)
                                    : addrs;
                                selectShippingAddress(addressData);
    
                                return true;
                            }
    
                            return false;
                        });
                    }
    
                    if (!isShippingAddressInitialized && addressList().length === 1) {
                        addressData = isConvertAddress ?
                            addressConverter.addressToEstimationAddress(addressList()[0])
                            : addressList()[0];
                        selectShippingAddress(addressData);
                    }
                }
            },
    
            /**
             * @param {Object} ratesData
             */
            resolveShippingRates: function (ratesData) {
                var selectedShippingRate = checkoutData.getSelectedShippingRate(),
                    availableRate = false;
    
                if (ratesData.length === 1 && !quote.shippingMethod()) {
                    //set shipping rate if we have only one available shipping rate
                    selectShippingMethodAction(ratesData[0]);
    
                    return;
                }
    
                if (quote.shippingMethod()) {
                    availableRate = _.find(ratesData, function (rate) {
                        return rate['carrier_code'] == quote.shippingMethod()['carrier_code'] && //eslint-disable-line
                            rate['method_code'] == quote.shippingMethod()['method_code']; //eslint-disable-line eqeqeq
                    });
                }
    
                if (!availableRate && selectedShippingRate) {
                    availableRate = _.find(ratesData, function (rate) {
                        return rate['carrier_code'] + '_' + rate['method_code'] === selectedShippingRate;
                    });
                }
    
                if (!availableRate && window.checkoutConfig.selectedShippingMethod) {
                    availableRate = _.find(ratesData, function (rate) {
                        var selectedShippingMethod = window.checkoutConfig.selectedShippingMethod;
    
                        return rate['carrier_code'] == selectedShippingMethod['carrier_code'] && //eslint-disable-line
                            rate['method_code'] == selectedShippingMethod['method_code']; //eslint-disable-line eqeqeq
                    });
                }
    
                //Unset selected shipping method if not available
                if (!availableRate) {
                    selectShippingMethodAction(null);
                } else {
                    selectShippingMethodAction(availableRate);
                }
            },
    
            /**
             * Resolve payment method. Used local storage
             */
            resolvePaymentMethod: function () {
                var availablePaymentMethods = paymentService.getAvailablePaymentMethods(),
                    selectedPaymentMethod = checkoutData.getSelectedPaymentMethod();
    
                if (selectedPaymentMethod) {
                    availablePaymentMethods.some(function (payment) {
                        if (payment.method == selectedPaymentMethod) { //eslint-disable-line eqeqeq
                            selectPaymentMethodAction(payment);
                        }
                    });
                }
            },
    
            /**
             * Resolve billing address. Used local storage
             */
            resolveBillingAddress: function () {
                var selectedBillingAddress,
                    newCustomerBillingAddressData;
    
                if (!checkoutData.getBillingAddressFromData() &&
                    window.checkoutConfig.billingAddressFromData
                ) {
                    checkoutData.setBillingAddressFromData(window.checkoutConfig.billingAddressFromData);
                }
    
                selectedBillingAddress = checkoutData.getSelectedBillingAddress();
                newCustomerBillingAddressData = checkoutData.getNewCustomerBillingAddress();
    
                if (selectedBillingAddress) {
                    if (selectedBillingAddress === 'new-customer-billing-address' && newCustomerBillingAddressData) {
                        selectBillingAddress(createBillingAddress(newCustomerBillingAddressData));
                    } else {
                        addressList.some(function (address) {
                            if (selectedBillingAddress === address.getKey()) {
                                selectBillingAddress(address);
                            }
                        });
                    }
                } else {
                    this.applyBillingAddress();
                }
            },
    
            /**
             * Apply resolved billing address to quote
             */
            applyBillingAddress: function () {
                var shippingAddress,
                    isBillingAddressInitialized;
    
                if (quote.billingAddress()) {
                    selectBillingAddress(quote.billingAddress());
    
                    return;
                }
    
                if (quote.isVirtual() || !quote.billingAddress()) {
                    isBillingAddressInitialized = addressList.some(function (addrs) {
                        if (addrs.isDefaultBilling()) {
                            selectBillingAddress(addrs);
    
                            return true;
                        }
    
                        return false;
                    });
                }
    
                shippingAddress = quote.shippingAddress();
    
              /*  if (!isBillingAddressInitialized &&
                    shippingAddress &&
                    shippingAddress.canUseForBilling() &&
                    (shippingAddress.isDefaultShipping() || !quote.isVirtual())
                ) {
                    //set billing address same as shipping by default if it is not empty
                    selectBillingAddress(quote.shippingAddress());
                }  */
            }
        };
    });


**5.** Copied the file as instructed. 
**6.** In: 

/public_html/app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor

I have the default.js file with the following content:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/resource-url-manager',
    'mage/storage',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
    ko,
    quote,
    resourceUrlManager,
    storage,
    paymentService,
    methodConverter,
    errorProcessor,
    fullScreenLoader,
    selectBillingAddressAction,
    payloadExtender
) {
    'use strict';

    return {
        /**
         * @return {jQuery.Deferred}
         */
        saveShippingInformation: function () {
            var payload;

         /*   if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
                selectBillingAddressAction(quote.shippingAddress());
            }      */

            payload = {
                addressInformation: {
                    'shipping_address': quote.shippingAddress(),
                    'billing_address': quote.billingAddress(),
                    'shipping_method_code': quote.shippingMethod()['method_code'],
                    'shipping_carrier_code': quote.shippingMethod()['carrier_code']
                }
            };

            payloadExtender(payload);

            fullScreenLoader.startLoader();

            return storage.post(
                resourceUrlManager.getUrlForSetShippingInformation(quote),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
                    fullScreenLoader.stopLoader();
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                    fullScreenLoader.stopLoader();
                }
            );
        }
    };
});
  1. Copied the file.

  2. In:

/public_html/app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor

I have the default.js with the following content:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/resource-url-manager',
    'mage/storage',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
    ko,
    quote,
    resourceUrlManager,
    storage,
    paymentService,
    methodConverter,
    errorProcessor,
    fullScreenLoader,
    selectBillingAddressAction,
    payloadExtender
) {
    'use strict';

    return {
        /**
         * @return {jQuery.Deferred}
         */
        saveShippingInformation: function () {
            var payload;

         /*   if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
                selectBillingAddressAction(quote.shippingAddress());
            }      */

            payload = {
                addressInformation: {
                    'shipping_address': quote.shippingAddress(),
                    'billing_address': quote.billingAddress(),
                    'shipping_method_code': quote.shippingMethod()['method_code'],
                    'shipping_carrier_code': quote.shippingMethod()['carrier_code']
                }
            };

            payloadExtender(payload);

            fullScreenLoader.startLoader();

            return storage.post(
                resourceUrlManager.getUrlForSetShippingInformation(quote),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
                    fullScreenLoader.stopLoader();
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                    fullScreenLoader.stopLoader();
                }
            );
        }
    };
});
  1. I ran:

rm -rf pub/static/frontend

in my public_html (Magento root).

  1. I have also done the following:

php bin/magento cache:clean

php bin/magento cache:flush

php bin/magento indexer:reindex

php bin/magento setup:upgrade

php bin/magento setup:di:compile

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

I deleted browser Cache but the option remains ticked!


  • The Dirty way:

In:

/public_html/vendor/magento/module-checkout/view/frontend/web/js/model

I have the 'checkout-data-resolver.js' file with the following content = it won't let me post the whole file due to limit of 30000 characters so here is just the part I edited at the very end:

 if (quote.isVirtual() || !quote.billingAddress()) {
                isBillingAddressInitialized = addressList.some(function (addrs) {
                    if (addrs.isDefaultBilling()) {
                        selectBillingAddress(addrs);

                        return true;
                    }

                    return false;
                });
            }

            shippingAddress = quote.shippingAddress();

       /*     if (!isBillingAddressInitialized &&
                shippingAddress &&
                shippingAddress.canUseForBilling() &&
                (shippingAddress.isDefaultShipping() || !quote.isVirtual())
            ) {
                //set billing address same as shipping by default if it is not empty
                selectBillingAddress(quote.shippingAddress());
            }         */
        }
    };
});

I edited default.js

in:

/public_html/vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/resource-url-manager',
    'mage/storage',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
    ko,
    quote,
    resourceUrlManager,
    storage,
    paymentService,
    methodConverter,
    errorProcessor,
    fullScreenLoader,
    selectBillingAddressAction,
    payloadExtender
) {
    'use strict';

    return {
        /**
         * @return {jQuery.Deferred}
         */
        saveShippingInformation: function () {
            var payload;

       /*     if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
                selectBillingAddressAction(quote.shippingAddress());
            }                  */

            payload = {
                addressInformation: {
                    'shipping_address': quote.shippingAddress(),
                    'billing_address': quote.billingAddress(),
                    'shipping_method_code': quote.shippingMethod()['method_code'],
                    'shipping_carrier_code': quote.shippingMethod()['carrier_code']
                }
            };

            payloadExtender(payload);

            fullScreenLoader.startLoader();

            return storage.post(
                resourceUrlManager.getUrlForSetShippingInformation(quote),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
                    fullScreenLoader.stopLoader();
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                    fullScreenLoader.stopLoader();
                }
            );
        }
    };
});

I repeated steps 7, 8 and 9.

It still does not work.



I have reverted back both the 'Magento best practices way' and 'Dirty way' from:

https://itecnotes.com/magento/magento-magento-2-uncheck-my-billing-and-shipping-address-are-the-same-checkbox-in-checkout-payment-page-based-on-shipping-method/

As recommended by Tu Van.

I then followed all the steps outlined by Tu Van in his proposed solution with the exception of the bit in Step #3 which says:

Step 3: Create the requirejs-config.js file (remember to change Vendor_Module and Vendor/Module to matching your module).

I am not sure how to do that? (I just put the code from Step3 in the specified directory the way it was)

The solution did not work so I have gone through the additional debugging steps:

Step 2.1: Am I suppose to be looking in the Review & Payments step of the Check-out? (this is where the Card payment and the My billing and 'shipping address are the same' are). My Magento version is 2.4.2-p1 - I have the checkout-data-resolver.js file but not the checkout-data-resolver-ext.js.

enter image description here

When I double click the file, it shows the following URL:

https://www.mywebsite.com/static/frontend/Smartwave/porto_child/en_US/Magento_Checkout/js/model/checkout-data-resolver.js

Here is the content of the checkout-data-resolver.js file:

https://pastecode.io/s/1xtsex1s

STEP 2.2: Yes - the result contains only 1 JS file. When I double clicked on it - it shows the following URL:

https://www.mywebsite.com/static/frontend/Smartwave/porto_child/en_US/Magento_Checkout/js/model/shipping-save-processor/default.js

It has the following content:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/resource-url-manager',
    'mage/storage',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
    ko,
    quote,
    resourceUrlManager,
    storage,
    paymentService,
    methodConverter,
    errorProcessor,
    fullScreenLoader,
    selectBillingAddressAction,
    payloadExtender
) {
    'use strict';

    return {
        /**
         * @return {jQuery.Deferred}
         */
        saveShippingInformation: function () {
            var payload;

            if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
                selectBillingAddressAction(quote.shippingAddress());
            }

            payload = {
                addressInformation: {
                    'shipping_address': quote.shippingAddress(),
                    'billing_address': quote.billingAddress(),
                    'shipping_method_code': quote.shippingMethod()['method_code'],
                    'shipping_carrier_code': quote.shippingMethod()['carrier_code']
                }
            };

            payloadExtender(payload);

            fullScreenLoader.startLoader();

            return storage.post(
                resourceUrlManager.getUrlForSetShippingInformation(quote),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
                    fullScreenLoader.stopLoader();
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                    fullScreenLoader.stopLoader();
                }
            );
        }
    };
});

I cleared all Cache within Magento Admin panel. Deleted all Cache in the browser and ran the following:

php bin/magento cache:clean

php bin/magento cache:flush

php bin/magento indexer:reindex

php bin/magento setup:upgrade

php bin/magento setup:di:compile

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

The 'My billing and shipping address are the same' is still ticked and has the Shipping Address.

Here are the contents of app/code/Vendor/Module/

enter image description here

1 Answer 1

0

Firstly, the solution "best practice way" in the link you mentioned is not do the best practice because it override whole content of js/model/shipping-save-processor/default.js file in Magento_Checkout module.
That make you hard to update features/fixes from Magento whenever Magento had update that file. So revert all changes you did and apply the best practice bellow.

Back to your requirements:

  • Uncheck 'My billing and shipping address are the same' checkbox by default.
  • Stop set the billing address same as the shipping address automatically by default.

Solution: Assume you named the vendor name Vendor, and the module name Module (you can change the vendor name and the module name as you wish). Take the following steps:

Step 1: Create the registration.php file:

File path: app/code/Vendor/Module/registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__);

Step 2: Create the module.xml file:

File path: app/code/Vendor/Module/etc/module.xml

<?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="Vendor_Module">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Step 3: Create the requirejs-config.js file (remember to change Vendor_Module and Vendor/Module to matching your module).

File path: app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/model/shipping-save-processor/default': 'Vendor_Module/js/model/shipping-save-processor/default'
        }
    },
    config: {
        mixins: {
            'Magento_Checkout/js/model/checkout-data-resolver': {
                'Vendor_Module/js/model/checkout-data-resolver-mixin': true
            }
        }
    }
};

Step 4: Create the default.js file:

File path: app/code/Vendor/Module/view/frontend/web/js/model/shipping-save-processor/default.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * This file override Magento_Checkout::js/model/shipping-save-processor/default.js
 * Customize: Remove feature set billing address same as shipping by default
 * Updated to magento version 2.4.5-p1
 */

define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/resource-url-manager',
    'mage/storage',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
    ko,
    quote,
    resourceUrlManager,
    storage,
    paymentService,
    methodConverter,
    errorProcessor,
    fullScreenLoader,
    selectBillingAddressAction,
    payloadExtender
) {
    'use strict';

    return {
        /**
         * Customize: Remove feature set billing address same as shipping by default
         * @return {jQuery.Deferred}
         */
        saveShippingInformation: function () {
            var payload;

            payload = {
                addressInformation: {
                    'shipping_address': quote.shippingAddress(),
                    'billing_address': quote.billingAddress(),
                    'shipping_method_code': quote.shippingMethod()['method_code'],
                    'shipping_carrier_code': quote.shippingMethod()['carrier_code']
                }
            };

            payloadExtender(payload);

            fullScreenLoader.startLoader();

            return storage.post(
                resourceUrlManager.getUrlForSetShippingInformation(quote),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
                    fullScreenLoader.stopLoader();
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                    fullScreenLoader.stopLoader();
                }
            );
        }
    };
});


Step 5: Create the checkout-data-resolver-mixin file:

File path: app/code/Vendor/Module/view/frontend/web/js/module/checkout-data-resolver-mixin.js

/**
 * This file extend Magento_Checkout::js/model/checkout-data-resolver.js
 * Customize: Remove feature set billing address same as shipping by default
 * Updated to magento version 2.4.5-p1
 */

define([
    'mage/utils/wrapper',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/select-billing-address'
], function (
    wrapper,
    addressList,
    quote,
    selectBillingAddress
) {
    'use strict';

    return function (checkoutDataResolver) {
        // Customize: Remove feature set billing address same as shipping by default
        checkoutDataResolver.applyBillingAddress = wrapper.wrapSuper(
            checkoutDataResolver.applyBillingAddress, function () {
                if (quote.billingAddress()) {
                    selectBillingAddress(quote.billingAddress());

                    return;
                }

                // The below code select default billing address as billing address
                if (quote.isVirtual() || !quote.billingAddress()) {
                    addressList.some(function (addrs) {
                        if (addrs.isDefaultBilling()) {
                            selectBillingAddress(addrs);

                            return true;
                        }

                        return false;
                    });
                }
            }
        );

        return checkoutDataResolver;
    };
});


Note:: The code from line 30 to line 41 responsible for select default billing address as billing address.

In case the customer has only one address in address book, that equal to the default billing address is same as shipping address, then that code will select the default billing address as billing address and the check box 'My billing and shipping address are the same' will be checked.

If you want to stop that behavior, comment out from line 30 to line 41.

Step 6: Finally, run the setup:upgrade command to make your new module active, and then compile code, deploy static content:

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f

Done.

If you have done that changes, it does not work as expected, let's debugging.

Step 1: Go to the storefront, and add a product to cart.

Step 2: Open the Browser Developer Tool > go to the checkout page > choose the Network tab.

2.1: In the Network tab, enter checkout-data-resolver to filter.

Wait for the page loading finished, you will see a filtered result. In Magento default version >= 2.4.0, the result contains 2 JS files: checkout-data-resolver.js and checkout-data-resolver-ext.js.

2.1.1: If you get the same result as I said above, copy file path and content of checkout-data-resolver.js to your original question for debugging purpose. File path should like this: app/design/..... or vendor/vendorname/....

You can get the file content by click to a file name, then switch from the Headers tab to Response tab.

2.1.2: If you get a different result, that means some modules/themes files overriden checkout-data-resolver.js from Magento default.

Copy all files with their file paths, content to your original question for debugging purpose. For file content, if it is a large file you can paste code in some sites like pastecode.io then add the link to your original question.

2.2: In the Network tab, enter shipping-save-processor/default to filter.

You will see a filtered result. In Magento default, the result contains only 1 JS file: shipping-save-processor/default.js.

2.2.1: If you get the same result as Magento default (contains only 1 JS file: shipping-save-processor/default.js), copy file path and file content to your original question. File path should like this: app/design/..... or vendor/vendorname/....

2.2.2: If you get a different result, that means some modules/themes files overriden shipping-save-processor/default.js from Magento default.

Copy all files with their file paths, content to your original question.

For file content, if it is a large file you can paste code in a website like pastecode.io then add the link to your original question.

8
  • Thank you for putting this together. I'm really sorry for getting back to you this late - I just get really flustered with Magento sometimes. I have gone through all the steps and have updated my original post (past the double lines). I think I have done Step 3 wrong where you said: Remember to change Vendor_Module and Vendor/Module to matching your module. I really don't know what that means? How do I change that? Thank you. PS: I am counting on awarding you the 50 bounty points as promised on this as well!
    – Allysin
    Commented Nov 23, 2022 at 21:23
  • For Step 3. In my example code the vendor name Vendor and module name is Module, assume you change the vendor name to TuVan and module name to Checkout, so you should change Vendor_Module to TuVan_Checkout. Is it clear now? If not, where you put my code in app/code directory? I confirm your files which I requested for debugging indicate you are still using default JS files from Magento_Checkout module, so if you apply my solution correctly, it will work as expected.
    – Tu Van
    Commented Nov 23, 2022 at 21:42
  • I've put the files in the exact directories you mentioned = in Step1: app/code/Vendor/Module/registration.php In Step 2: app/code/Vendor/Module/etc/module.xml In Step 3: app/code/Vendor/Module/view/frontend/requirejs-config.js In Step 4: app/code/Vendor/Module/view/frontend/web/js/model/shipping-save-processor/default.js In step 5: app/code/Vendor/Module/view/frontend/web/js/module/checkout-data-resolver-mixin.js I didn't rename any directories or files. In cases where the folders where missing, I just created them. How do I need to modify that 'requirejs-config.js' file then?
    – Allysin
    Commented Nov 23, 2022 at 22:17
  • No, using Vendor/Module is fine. Please hard reload the checkout page to check the result again. If it still does not work, do step 6 and check the result again. In case it still does not work, please take a screenshot of the Vendor/Module directory to allow me to know if you create the module correctly.
    – Tu Van
    Commented Nov 23, 2022 at 22:22
  • I deleted every Cache everywhere and it still shows up as ticked and with the Shipping address. I posted more details into my Original Post. Do I need to run: rm -rf pub/static/frontend ?
    – Allysin
    Commented Nov 23, 2022 at 22:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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