13

I want to move the place order button from the payment to sidebar on checkout page.

enter image description here

Anyone can give me a suggestion?

Edit: Is this even possible (with the answer/approach provided)?

From my research every payment method has its own .html template including an own button. This button is not loaded from a knockout.js template. E.g. a part of the "free" payment method:

    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()}
                    ">
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

While the "check / money order" payment method looks like this (only differences are enable: (getCode() == isChecked()) but hey, there still are differences and there is no "1 almighty general place order button":

  <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()},
                    enable: (getCode() == isChecked())
                    "
                    disabled>
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

The answer provided only moves the aggreements which results in something like this:

enter image description here

  • Hi - did you find a reasonable way of doing this in the end? Thanks – Tom Burman Nov 20 '17 at 8:20
  • How did you find success in the checkbox validation of the terms and conditions? – Condor Apr 13 '18 at 9:01
6

I had the similar requirement to change the place order button at the bottom of the summary block. Since there is place order button assigned to each payment method. I have created a custom place order button next to order summary block. While clicking on the button I have triggered the place order button of the selected payment method.

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:

To hide the default place order button use CSS file as follows

app/code/VendorName/PlaceOrder/view/frontend/web/css/place_order_button.css

.payment-method-content .actions-toolbar{
    display: none;
}

Attached is the screenshot!

enter image description here

  • Hello @Haritha, I have tried your solution but it's not working. Button not showing on checkout page. Can you please help me on this.? – user53816 Mar 29 '18 at 5:01
  • Hi Mayank Zalavadia, Can you check if your custom module is loaded after Magento_Checkout Module in app/etc/config.php – Haritha Mar 29 '18 at 11:41
  • I already check that and now it's working but I am not able to add Place Order button as you mention in your screenshot. It displays only in the summary. Can you Please help me to move Place Order button at the same place as you mention in your screenshot. – user53816 Mar 29 '18 at 11:45
  • Can you share your screenshot? – Haritha Mar 29 '18 at 12:35
  • nimb.ws/5EdgS2 check screenshot – user53816 Mar 29 '18 at 12:56
1

All these answer are not complete because missing registration.php file for register module

This is the best answer i found.

https://github.com/davidroberto/magento2-place_order_sidebar

Here is complete module you need only to place under App/code and to run php bin/magento setup:upgrade command

Hope this help!!!

0

at first you need create checkout_index_index.xml in your theme, then need disable item before-place-order in 314 line:

 <item name="before-place-order" xsi:type="array">

with:

<item name="before-place-order" xsi:type="array">
      <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

Then you need re-add that element on the end of your Checkout, after place order button, like this:

<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>

Then copy in your default template(html) after place order:

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.