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 ?

Improve this question

1 Answer 1

Reset to default
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
12
  • 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 Commented Jul 25, 2020 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. Commented Jul 25, 2020 at 13:35
  • Thanks for your Help I Have updated my JS Files will you look into this and help me out @JanuszJanczy Commented Jul 25, 2020 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? Commented Jul 25, 2020 at 17:15
  • Thanks for help. I have set these 11,12,13 but it doesn't solve my issue @JanuszJanczy Commented Jul 25, 2020 at 17:34

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.