Magento 2 – Set Default Billing Address via Knockout on Checkout Page

checkoutjavascriptknockoutjsmagento2

The Checkout page is currently loading Shipping address as billing and shipping address. I want to load default billing address on checkbox click and set it to order before save.
I dont know how to do it.

I tried and found a way to get default billing address through 

var defaultBillingAddressese = addressList().filter(function (address) {
            return  address.getType() == 'customer-address' && address.isDefaultBilling();
        });

This line of code returns default billing address now i want to set it to order in billing-address.js.

app/design/frontend/Capitol/luma-child/Magento_Checkout/web/template

    <!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="checkout-billing-address">

    <div class="billing-address-same-as-shipping-block field choice" data-bind="visible: canUseShippingAddress()">
 <input type="checkbox" name="billing-address-same-as-shippings"
                 data-bind="click: updateAddress, attr: {id: 'billing-address-same-as-shippings'}" style="visibility: hidden"/>
        <label data-bind="attr: {for: 'billing-address-same-as-shipping-' + getCode($parent)}" style="visibility: hidden"><span
                data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
    </div>

    <!-- ko template: 'Magento_Checkout/billing-address/details' --><!-- /ko -->
    <fieldset class="fieldset" data-bind="visible: !isAddressDetailsVisible()">
        <!-- ko template: 'Magento_Checkout/billing-address/list' --><!-- /ko -->
        <!-- ko template: 'Magento_Checkout/billing-address/form' --><!-- /ko -->
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action action-update" type="button" data-bind="click: updateAddress">
                    <span data-bind="i18n: 'Update'"></span>
                </button>
                <button class="action action-cancel" type="button" data-bind="click: cancelAddressEdit">
                    <span data-bind="i18n: 'Cancel'"></span>
                </button>
            </div>
        </div>
    </fieldset>

</div>

billing-address.js

updateAddress: function () {
var defaultBillingAddress = addressList().filter(function (address) {
                return  address.getType() == 'customer-address' && address.isDefaultBilling();
            });
           },

Best Answer

You could do the following:

overwrite a default js file checkout-data-resolver.js add extra lines to the applyBillingAddress function to check if default billing address exists and if true to use it.

    var config = {
map: {
    '*': {
        'Magento_Checkout/js/model/checkout-data-resolver': 
    'Vendor_Module/js/model/checkout-data-resolver'        
    }
}

};

in new checkout-data-resolver.js file find applyBillingAddress. Insert following cod after var shippingAddress; and before if (quote.billingAddress())

    ....
var isBillingAddressInitialized;
isBillingAddressInitialized = addressList.some(function (addressFromList) {
  if (addressFromList.isDefaultBilling()) {
     selectBillingAddress(addressFromList);
              return true;
    }

  return false;
 });

if(isBillingAddressInitialized){
                 return;
             }  
....

Reference

Related Topic