20

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

Improve this question
2
  • Hi - did you find a reasonable way of doing this in the end? Thanks
    – Tom Burman
    Commented Nov 20, 2017 at 8:20
  • How did you find success in the checkbox validation of the terms and conditions?
    – Condor
    Commented Apr 13, 2018 at 9:01

4 Answers 4

Reset to default
9

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

Improve this answer
9
  • 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
    Commented Mar 29, 2018 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
    Commented Mar 29, 2018 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
    Commented Mar 29, 2018 at 11:45
  • Can you share your screenshot?
    – Haritha
    Commented Mar 29, 2018 at 12:35
  • nimb.ws/5EdgS2 check screenshot
    – user53816
    Commented Mar 29, 2018 at 12:56
1

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 -->
Improve this answer
0

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

Improve this answer
1
  • thanks, It works for me.
    – Sarvesh Patel
    Commented Dec 30, 2019 at 5:21
0

It's also worth noting that the sidebar is hidden in the mobile view.

To see the sidebar customer need to click on the minicart.

This can confuse the customer when he will not be able to quickly find the Place Order button.

Hiding is implemented in the following file with custom-slide class:

vendor/magento/module-checkout/view/frontend/web/template/sidebar.html

<div id="opc-sidebar"
     data-bind="afterRender:setModalElement, mageInit: {
    'Magento_Ui/js/modal/modal':{
        'type': 'custom',
        'modalClass': 'opc-sidebar opc-summary-wrapper',
        'wrapperClass': 'checkout-container',
        'parentModalClass': '_has-modal-custom',
        'responsive': true,
        'responsiveClass': 'custom-slide',
        'overlayClass': 'modal-custom-overlay',
        'buttons': []
    }}">

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

    <div class="opc-block-shipping-information">
        <!-- ko foreach: getRegion('shipping-information') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
</div>

I made VCT Place Order Sidebar (Button Lösung) module on Magento Marketplace that implements this task for mobile view as well.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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