13

I am trying to add an additional checkout step after "review & payments" section. The requirement is to split the payment and review as a separate steps. Once the after the payment method is selected, it should navigate to the Final step "review" where all the order information has to be shown with "place order" button.

so far i have added custom step after payment step, by following the link below. http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

But the Problem here is the "Place Order" Button is binded with the Payment Step, I need to move the place order button to the Last Step.

Any Help Most Appreciated!!

Improve this question
4
  • have you managed to add a step at last after payment?
    – Ravi Bhalodia
    Commented Jan 7, 2017 at 6:05
  • @rameshpushparaj Have you done this?
    – Arshad Hussain
    Commented Apr 3, 2017 at 11:12
  • Same problem here, some solution?
    – Diego Queiroz
    Commented May 29, 2018 at 12:16
  • A alternative to this is adding a order summary to the success step. The place order button is binded to the payment step because it would be a problem if a customer pays and then doesn't finish the order, then the payment wouldn't belong to any order.
    – Sanne
    Commented Jul 24, 2018 at 8:41

1 Answer 1

Reset to default
1

Below i have add some step. please follow step

1.Create your checkout_index_index.xml file in layout folder

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

<?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="newstep" xsi:type="array">
                                            <item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

2.Create a file newstep.html in template

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

<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order newstep'" 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 -->
  1. Create a file newstep.js in the path

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

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/newstep',
        '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();
            }

        });
    }
);

4.For Add terms & condition checkbox in checkout_index_index.xml :

<?xml version="1.0"?>

    <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="newstep" 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>
Improve this answer
2
  • The place_order_button.css file is missing in this answer
    – Vignesh Bala
    Commented Feb 21, 2019 at 7:15
  • is this solution resolved your problem? actually, I have to do the exact same task
    – Akash Agrawal
    Commented Mar 25, 2020 at 7:50

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.