0

I have added a Tab before Magneto 2 Checkout Form and it was successful added. But I want to add another tab So How should i Do that.

I have changed my code in " /var/www/html/reg-dealers/app/code/Reg/Checkout/view/frontend/layout/checkout_index_index.xml " that file

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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">
                                        <item name="mynewstep" xsi:type="array">
                                            <item name="component" xsi:type="string">Module_Checkout/js/view/checkout/my-step-view</item>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                            </item>
                                        </item>
                                        <item name="mysteptwo" xsi:type="array">
                                            <item name="component" xsi:type="string">Module_Checkout/js/view/checkout/my-step-two</item>
                                            <item name="sortOrder" xsi:type="string">3</item>
                                            <item name="children" xsi:type="array">
                                            </item>
                                        </item>
                                        <item name="mystepthree" xsi:type="array">
                                            <item name="component" xsi:type="string">Module_Checkout/js/view/checkout/my-step-three</item>
                                            <item name="sortOrder" xsi:type="string">4</item>
                                            <item name="children" xsi:type="array">
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
    </referenceBlock>
</body>

How to add another tab in this ? I have added 2 other tabs but there order are not proper and on click next It goes " First on 4th Step then on 2nd then 3rd after that Final step "

I want to run like 1-2-3-4-5 Steps. enter image description here

My JS file is my-step-view.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,
    * my_module - is the name of the your module directory.
    *
    */
    return Component.extend({
        defaults: {
            template: 'Module_Checkout/checkout/mystep'
        },

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


        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                //step code will be used as step content id in the component template
                'mynewstep',
                //step alias                    
                'mynewstep',
                //step title value
                'My Step Title',
                //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
                */
                15
            );

            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);
           // });

        },


        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
}
);

My Js file my-step-two.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,
    * my_module - is the name of the your module directory.
    *
    */
    return Component.extend({
        defaults: {
            template: 'Module_Checkout/checkout/mysteptwo'
        },

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


        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                //step code will be used as step content id in the component template
                'mynewsteptwo',
                //step alias                    
                'mynewsteptwo',
                //step title value
                'My Step Two Title',
                //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
                */
                15
            );

            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);
           // });

        },


        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
}
);

My Js FIle for my-step-three.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,
    * my_module - is the name of the your module directory.
    *
    */
    return Component.extend({
        defaults: {
            template: 'Module_Checkout/checkout/mystepthree'
        },

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


        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                //step code will be used as step content id in the component template
                'mystepthree',
                //step alias                    
                'mystepthree',
                //step title value
                'My Step three Title',
                //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
                */
                15
            );

            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);
           // });

        },


        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
}
);

How to add navigation with that ?

1

Your second "step component" should be added one level higher in your xml.

Compare your code example with the one below. I hope you see now the issue. If not let me now so I will add more details.

<item name="steps" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="mynewstep" xsi:type="array">
            <item name="component" xsi:type="string">Module_Checkout/js/view/checkout/my-step-view</item>
            <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 name="mysteptwo" xsi:type="array">
            <item name="component" xsi:type="string">Module_Checkout/js/view/checkout/my-step-two</item>
            <item name="sortOrder" xsi:type="string">3</item>
            <item name="children" xsi:type="array">
                <!--add here child component declaration for your step-->
            </item>
        </item>
    </item>
</item>
| improve this answer | |
  • Updated my file and There is issue with show and and on click next it follows the wrong order.I have added 3 steps and added screenshot of it Please Check. @Janusz – Prits Jul 25 at 6:46
  • You need to analyze how progress bar is generated. Look at vendor/magento/module-checkout/view/frontend/web/template/progress-bar.html and progress-bar.js Also step-navigator.js and shipping.js Do you register steps using step-navigator in your new js files? Check how those files works I think you will be able to resolve your issue with this. – JanuszJanczy Jul 25 at 13:35
  • Thanks for your Help I Have updated my JS Files will you look into this and help me out @JanuszJanczy – Prits Jul 25 at 16:23
  • 1
    I see in your js file you use "15" as sortOrder argument for every step. perhaps you should use 11, 12, 13 ;) Did it fixed your issue with order? – JanuszJanczy Jul 25 at 17:15
  • Thanks for help. I have set these 11,12,13 but it doesn't solve my issue @JanuszJanczy – Prits Jul 25 at 17:34

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.