Magento2 – Update Customer Billing Address on Place Order Button

billing-addresscheckoutformsmagento2upgrade

I want to remove the "update" button under the customer billing address section and implement the update functionality on the "place order" button in checkout page.

Successfully completed a half portion by combining billing-address.js with default.js and billing-address.html with checkout.html files.

File paths:

_vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js
_vendor/magento/module-checkout/view/frontend/web/js/view/payment/default.js
_vendor/magento/module-checkout/view/frontend/web/template/billing-address.html
_vendor/magento/module-offline-payments/view/frontend/web/template/payment/checkmo.html

The scenario i followed:

First, rewrite the placeOrder databind code for multiple bindings on click event in checkout.html. Copy all code from billing-address.html and pasted into the checkout.html page where the place order button is placed. Erase the update & cancel button code and wrote the placeOrder button code instead of that.

Then wrote the update function in default.js and copy all the codes need to work this from billing-address.js.

Result:

When unchecked the box, a drop-down shows all the current addresses along with a new address option. Now, we can choose any of the address from the list and place the order. The address will be updated.

But when i choose the new address option from the drop-down list it didn't shows the address form.

Best Answer

Solved the above issue. If you want to avoid the update and cancel button under the billing address and implement the update functionality when click on place order button, no need to go through the above way.

File path: _vendor/magento/module-checkout/view/frontend/web/js/view/payment/default.js

First copy this file and place in your theme folder. Then, just replace this below code with the placeOrder function and hide the update and cancel button using css- display:none;

        placeOrder: function (data, event)
        {
            if($('.billing-address-form:visible').length == 0)
            {
                $('.action-update').click();
                var self = this;
                if (event) {
                    event.preventDefault();
                }
                if (this.validate() && additionalValidators.validate()) {
                    this.isPlaceOrderActionAllowed(false);

                    this.getPlaceOrderDeferredObject()
                        .fail(
                            function () {
                                self.isPlaceOrderActionAllowed(true);
                            }
                        ).done(
                            function () {
                                self.afterPlaceOrder();

                                if (self.redirectAfterPlaceOrder) {
                                    redirectOnSuccessAction.execute();
                                }
                            }
                        );

                    return true;
                }

                return false;
            }
            else
            {
                var firstname = $("input[name=firstname]").val();
                var lastname = $("input[name=lastname]").val();
                var street = $("input[name='street[0]']").val();
                var city = $("input[name=city]").val();
                var regionid = $("input[name=region_id]").val();
                var postcode = $("input[name=postcode]").val();
                var countryid = $("input[name=country_id]").val();
                var telephone = $("input[name=telephone]").val();

                if((firstname == '') || (lastname == '') || (street = '') || (city == '') || (regionid = '') || (postcode = '') || (countryid == '') || (telephone = ''))
                {
                    $('.action-update').click();
                }
            }

        },
Related Topic