1

I have create an extra step in magento 2 checkout page and put custom step after "Review & Payments" step.

enter image description here

Now as you can see there is "Next" button on my custom step. I want here "Place Order" button instead of "Next" button.

And on "Review & Payments" step, I want "Next" button instead of "Place Order" button.

Here is my code to create custom step:

SDbullion/Nfusions/view/frontend/web/js/view/my-order-review.js

    define(
        [
            'ko',
            'uiComponent',
            'underscore',
            'Magento_Checkout/js/model/step-navigator'
        ],
        function (
            ko,
            Component,
            _,
            stepNavigator
        ) {
            'use strict';
            /**
            *
            * mystep - is the name of the component's .html template, 
            * SDbullion_Nfusions  - is the name of your module directory.
            * 
            */
            return Component.extend({
                defaults: {
                    template: 'SDbullion_Nfusions/myorder'
                },

                //add here your logic to display step,
                isVisible: ko.observable(false),

                /**
                *
                * @returns {*}
                */
                initialize: function () {
                    this._super();
                    // register your step
                    stepNavigator.registerStep(
                        //review will be used as step content id in the component template
                        'review',
                        //review alias
                        null,
                        //review value
                        'Review',
                        //observable property with logic when display step or hide step
                        this.isVisible,

                        _.bind(this.navigate, this),

                        /**
                        * sort order value
                        * 'sort order value' < 10: step displays before shipping step;
                        * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                        * 'sort order value' > 20 : step displays after payment step
                        */
                        21
                    );

                    return this;
                },

                /**
                * The navigate() method is responsible for navigation between checkout step
                * during checkout. You can add custom logic, for example some conditions
                * for switching to your custom step 
                */
                navigate: function () {
                    var self = this;
                    //getPaymentInformation().done(function () {
                        self.isVisible(true);
                   // }); 
                },

                /**
                * @returns void
                */
                navigateToNextStep: function () {
                    stepNavigator.next();
                }
            });
        }
    );

SDbullion/Nfusions/view/frontend/web/template/myorder.html

<!--The 'step_code' value from the .js file should be used-->
<li id="review" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'review'" data-role="title"></div>
    <div id="checkout-step-title" class="step-content" data-role="content">
        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

SDbullion/Nfusions/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <!-- The new step you add -->
                                        <item name="review" xsi:type="array">
                                            <item name="component" xsi:type="string">SDbullion_Nfusions/js/view/my-order-review</item>
                                                <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                                <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                                <!--To display step content after payment step "sortOrder" > 2 -->
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
    </referenceBlock>
</body>
</page>

I want "Place Order" button in my last custom step and "Next" button on second step (Review & Payments).

  • Have you got solution for above issue? please if find solution share. – Rakesh Jesadiya Apr 10 '17 at 8:34
  • @arshad did you find a solution for this? – Thomas C Sep 26 '18 at 20:42

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.