Magento – Show Billing Address Form In Checkout First Step In magento 2

magento-2.1magento-2.1.3magento2

Stuck:On when select new address
I want to customize checkout page

Need to show billing with shipping i have done most of part but fields are not showing.

I try Like this.

Create a new region in Magento_Checkout/template/shipping.html

<!-- ko foreach: getRegion('shipping-billing') -->
      <!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->

Add section in checkout_index_index.xml

<item name="shipping-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
    <item name="shippingAddress" xsi:type="array">
        <item name="children" xsi:type="array">
            <item name="shipping-billing" xsi:type="array">
                <item name="component" xsi:type="string">Custom_Checkout/js/view/shipping-billing-address</item>
                <item name="displayArea" xsi:type="string">shipping-billing</item>
            </item>
        </item>
    </item>
</item>

And in Custom_Checkout/template/shipping-billing-address.html

<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-shipping"
               data-bind="checked: isAddressSameAsShipping, click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-billing'  }"/>
        <label data-bind="attr: {for: 'billing-address-same-as-shipping-billing'  }"><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>

How can i load fields ?

Actually inside this file code Magento_Checkout/billing-address/form

<div class="billing-address-form" data-bind="fadeVisible: isAddressFormVisible">
<!-- ko foreach: getRegion('before-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<form data-hasrequired="* Required Fields">
    <fieldset id="billing-new-address-form" class="fieldset address">
        <!-- ko foreach: getRegion('additional-fieldsets') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <!-- ko if: (isCustomerLoggedIn && customerHasAddresses) -->
        <div class="choice field">
            <input type="checkbox" class="checkbox" id="billing-save-in-address-book" data-bind="checked: saveInAddressBook" />
            <label class="label" for="billing-save-in-address-book">
                <span data-bind="i18n: 'Save in address book'"></span>
            </label>
        </div>
        <!-- /ko -->
    </fieldset>
</form>

Not working code

<!-- ko foreach: getRegion('additional-fieldsets') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

Best Answer

The layout nodes for actual fields for the address are added the block methodMagento\Checkout\Block\Checkout\LayoutProcessor::process. In order to move these dynamically added layout nodes, you have to write a plugin. This is well explained in the following Magento StackExchange post:

how to reorder (switch) billing address before shipping address

Related Solutions

Magento – How to show subtotals in first checkout step

All of these solutions imply that you need to copy the abstract-total.js to your own theme, but this is not necessary. Even more so: it might introduce new problems as soon as a Magento update decides to update the original abstract-total.js.

A better (more unobtrusive) solution to this is to make use of a RequireJs mixin. This way you can extend a JavaScript object provided by Magento and only add your own adjustments:

In view/frontend/requirejs-config.js:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/summary/abstract-total': {
                'Vendor_Module/js/abstract-total-mixin': true
            }
        }
    }
};

In view/frontend/web/js/abstract-total-mixin.js:

define([], function () {
    "use strict";

    return function (target) {
        return target.extend({
            /**
             * @return {*}
             */
            isFullMode: function () {
                if (!this.getTotals()) {
                    return false;
                }

                return true;
            }
        });
    }
});

Now you have the same results in an upgrade-safe way ;-)

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!

Best Answer

Related Solutions

Magento – How to show subtotals in first checkout step

Magento2 UI Components – Clear Billing Form Validation Errors

Related Topic