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.
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!
Recent Answers
- Peter Machado on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Jon Church on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?