Magento 2.2.3 Checkout Customization – Move Place Order Button and Terms Checkbox

checkoutcustommagento2magento2.2.3terms and conditions

I've been trying to place the order button and terms and conditions checkbox beneath the payment method section during the checkout procedure. Now, I've followed this:

Magento 2 – move terms and conditions position in checkout

and

http://inchoo.net/magento-2/dont-mess-magento-2-checkout/

But this does not work (for me at least). I don't know how to apply the: 

<!-- ko foreach: getRegion('after-place-agreements') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

and I'm also not sure whether or not I applied the checkout_index_index.xml the right way (it does not change anything on my page): 

<?xml version="1.0"?>
<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">
            <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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="before-place-order" xsi:type="array">
                                            <item name="componentDisabled" xsi:type="boolean">true</item>
                                        </item>
                                        <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="agreements" 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>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Now, if this would work, this would only move the checkbox for the terms and conditions. In this topic, they talk about every 'place order' button to be declared in a different file each:

Magento 2: Move place order button from payment to sidebar on checkout page?

Is there anyone who has a more comprehensive explanation of how to achieve all this?

I'm working on a custom module, so of course I don't want to overwrite any core files because the module has to be used on other Magento 2 instances too.

Much appreciated.

Best Answer

Follow this step :

=> Step 1:

Create a checkout_index_index.xml file in :

app/code/VendorName/PlaceOrder/view/frontend/layout path

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="VendorName_PlaceOrder::css/place_order_button.css"/>
    </head>
    <body>
        <referenceBlock name="checkout.root">
            <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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/summary</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">VendorName_PlaceOrder/summary</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

=> Step 2:

Create a file summary.html in the path

app/code/VendorName/PlaceOrder/view/frontend/web/template

<div class="opc-block-summary" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order Summary'" class="title"></span>
    <!-- ko foreach: elems() -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
    <button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
        <span>Place Order</span>
    </button>
</div>
<!-- /ko -->

=> Step 3:

Create a file summary.js in the path

app/code/VendorName/PlaceOrder/view/frontend/web/js/view

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/summary',
        'Magento_Checkout/js/model/step-navigator',
    ],
    function(
        $,
        ko,
        Component,
        stepNavigator
    ) {
        'use strict';

        return Component.extend({

            isVisible: function () {
                return stepNavigator.isProcessed('shipping');
            },
            initialize: function () {
                $(function() {
                    $('body').on("click", '#place-order-trigger', function () {
                        $(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
                    });
                });
                var self = this;
                this._super();
            }

        });
    }
);

=> Step 4 :

For moving terms & condition checkbox in checkout_index_index.xml :

<?xml version="1.0"?>
    <!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

        <body>
            <referenceBlock name="checkout.root">
                <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="sidebar" xsi:type="array">
                                        <item name="children" xsi:type="array">

                                            <item name="summary" xsi:type="array">
                                                <item name="children" xsi:type="array">

                                                    <item name="agreements" 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">before-place-order</item>
                                                        <item name="dataScope" xsi:type="string">checkoutAgreements</item>
                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                    </item>

                                                    <item name="agreements-validator" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
                                                    </item>

                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </body>
    </page>
Related Topic