TransWikia.com

How to add two steps in before Magento 2 Checkout Form?

Magento Asked on December 28, 2021

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 ?

One Answer

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>

Answered by JanuszJanczy on December 28, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP