2

I have moved the billing address after the region customer-email with XML like this:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Mageside. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root" ifconfig="<vendor>_<module>/general/enabled">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="customer-email" xsi:type="array">
                                                            <item name="config" xsi:type="array">
                                                                <item name="template" xsi:type="string"><vendor>_<module>/form/element/email</item>
                                                            </item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="after-place-agreements" xsi:type="array">
                                                                    <item name="component" xsi:type="string">uiComponent</item>
                                                                    <item name="displayArea" xsi:type="string">after-place-agreements</item>
                                                                    <item name="dataScope" xsi:type="string">before-place-order</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
                                                                    </item>
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="agreementss" xsi:type="array">
                                                                            <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
                                                                            <item name="sortOrder" xsi:type="string">100</item>
                                                                            <item name="displayArea" xsi:type="string">after-place-agreements</item>
                                                                            <item name="dataScope" xsi:type="string">checkoutAgreements</item>
                                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                                <item name="billing-address" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/default</item>
                                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/billing-address</item>
                                                                    <item name="displayArea" xsi:type="string">billing-address</item>
                                                                    <item name="dataScope" xsi:type="string">afterMethods</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="template" xsi:type="string">Magento_Checkout/billing-address</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

And added it with knockout.js in the template email.html

Now the checkout page looks like this:

But the following error is in the console:

To dirty fix this error i have commented the following lines in billing-address.html

<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-' + $parent.getCode()}"/>
    <label data-bind="attr: {for: 'billing-address-same-as-shipping-' + $parent.getCode()}"><span data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
</div>

After commenting these lines the checkout page is as follows:

So everything gets loaded now except for the form itself...

  • I don't think it's the cause of your issue but there is a typo in agreementss, I presume that should be agreements – Ben Crook Jun 1 '17 at 13:29
  • 1
    @BenCrook You are right. But the typo didn't affect the results, because it is only the name of the item. The displayArea is the 'attribute code'. – Frank Groot Jun 1 '17 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.