Magento – How to stop Billing Address being set as shipping by default

checkoutknockoutjsmagento2

I just want the My billing and shipping address are the same checkbox to be unchecked by default and let the customer see the form to enter a new billing address.

I think the answer lies within this file:
Magento_Checkout/web/js/view/billing-address.js

But I've tried an awful lot of things with no success.

I need to set isAddressSameAsShipping to false?

I mean I can just uncheck it using JavaScript, but that just seems like cheating..

Thanks

Best Answer

Override ..vendor/magento/module-payment/view/frontend/web/transparent.js and add this code :

var paymentMethodId = jQuery(".payment-methods input[type='radio']:checked").attr('id');

jQuery("#billing-address-same-as-shipping-"+paymentMethodId).trigger('click');
jQuery(".payment-method").find('select[name="billing_address_id"]  option:last-child').attr('selected','selected');
jQuery(".payment-method").find('.billing-address-form').show();

Override ../magento/module-checkout/view/frontend/web/js/action/set-billing-address.js: (Add code)

jQuery(document).on("click",".payment-method",function(){
         console.log(   jQuery(this).find('input[name="billing-address-same-as-shipping"]').is(":checked") );             
         console.log(jQuery(this).find('select[name="billing_address_id"]  option:last-child'));
         jQuery(this).find('input[name="billing-address-same-as-shipping"]').trigger('click');
         jQuery(this).find('select[name="billing_address_id"]  option:last-child').attr('selected','selected');
         jQuery(this).find('.billing-address-form').show();
    })

Related Solutions

Magento2 UI Components – Clear Billing Form Validation Errors

You've asked a bit of a mouthful there -- probably too much for a single Stack Exchange question, so I'm going to concentrate on teaching you how to reset the initial state of the form so things no longer appear invalid if there's a blank value. If you're interested in the whys, you'll need to get up to speed on the fundamentals of UI Components and x-magento-init scripts. My Magento 2 UI Components and uiElement Internals series are a good place to start. The following assumes you have some familiarity with these systems -- if there's something confusing below then the above articles (as well as the other Magento 2 articles) will probably have the information you're looking for.

In the Checkout Application, each form field is represented by a view model, and one-or-many view model templates. You can see this in Commerce Bug's KO Scopes tab.

The firstname's view model is an object derived from the constructor function returned by the Magento_Ui/js/form/element/abstract RequireJS module. You can find that model's source code here

vendor/magento//module-ui/view/base/web/js/form/element/abstract.js

The reset method is the one we're interested in. This will reset a field's validation state. You'll need to figure out the full uiRegistry string identifier for the specific model (again, Commerce Bug is useful here), use that string to fetch the instantiated view model, and then call the reset function. For the checkmo form, the following program (easily adapted into a define module if you're going to use it in your application) will do that for the firstname field.

requirejs(['uiRegistry'], function(uiRegistry){
    uiRegistry.get('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields.firstname').reset();
});

Of course, you'll likely want to fetch each view model that's part of a particular form -- the following is a start on that.

uiRegistry.get(function(viewModel){
    var parentName = viewModel['parentName'] ? viewModel['parentName'] : '';
    if(parentName.indexOf('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields') === -1){
        return;
    };       
    console.log(viewModel);
});

This uses the uiRegistry's callback feature to search for all view models with a parent of checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields. Some of these may not be form elements, but we'll leave that problem as an exercise for the questioner.

Hope that helps!

Magento – Magento 2 Set “Billing Same as Shipping” default to unchecked

Disclaimer: I am an author of an article at the end of this answer. The following solution tested on M2.1.4

Magento best practices way.

Create a simple Magento 2 extension.

Create a file app/code/Vendor/Module/view/frontend/requirejs-config.js with the 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'
  }
}};

Copy file vendor/magento/module-checkout/view/frontend/web/js/model/checkout-data-resolver.js to app/code/Vendor/Module/view/frontend/web/js/checkout-data-resolver.js.

Edit file app/code/Vendor/Module/view/frontend/web/js/checkout-data-resolver.js and comment out code around line 231:

    applyBillingAddress: function () {
        var shippingAddress;

        if (quote.billingAddress()) {
            selectBillingAddress(quote.billingAddress());

            return;
        }
        shippingAddress = quote.shippingAddress();

        /*if (shippingAddress &&
            shippingAddress.canUseForBilling() &&
            (shippingAddress.isDefaultShipping() || !quote.isVirtual())
        ) {
            selectBillingAddress(quote.shippingAddress());
        }*/
    }
};

Copy file vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor/default.js to app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor/default.js.

In app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor/default.js comment out code around line 34:

saveShippingInformation: function () {
var payload;

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

payload = {

Delete folder pub/static/frontend:
```
 rm -rf pub/static/frontend
```

Regenerate static content:

 php bin/magento setup:static-content:deploy

Clear magento cache and you are all set.

Dirty way

Instead of steps 1 through 6 simply edit the file vendor/magento/module-checkout/view/frontend/web/js/model/checkout-data-resolver.js and comment out code around line 231 as in step 4 and edit the file vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor/default.js and comment code code around line 34 as in step 6.

Repeat steps 7,8,9.

Originally published as https://www.goivvy.com/blog/magento-2-set-billing-shipping-address-unchecked-default-checkout

Best Answer

Related Solutions

Magento2 UI Components – Clear Billing Form Validation Errors

Magento – Magento 2 Set “Billing Same as Shipping” default to unchecked

Related Topic