Today, we’re going to teach you guys how to add a new step in Magento 2 checkout pages.
The default Magento 2 checkout page consists of two steps - Shipping and Payment & Review.
But, many Magento 2 stores require to add some additional logic like separating Payment & Review, displaying checkout summary, or simply create a brand new step for customization.
Although, Magento 2 checkout page customization is bit difficult as developers are required to put in more effort to customize knockout js and other js stuff.
But, we’ve put together an easy-to-follow tutorial that will help you to quickly learn how to add a new step in checkout page in your Magento 2 store.
Step-By-Step Process to Add a New Step in Checkout Pages in Magento 2
In this tutorial, we’ve shared how to add a new step in checkout page that displays logging status in your Magento 2 store.
Step - 1
First of all, you need to create a checkout-login-step.js file in the MageDelight/HelloWorld/view/frontend/web/js/view folder & paste the following code to implement the view model.
define(
[
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Customer/js/model/customer'
],
function (
ko,
Component,
_,
stepNavigator,
customer
) {
'use strict';
/**
* check-login - is the name of the component's .html template
*/
return Component.extend({
defaults: {
template: 'MageDelight_HelloWorld/check-login'
},
//add here your logic to display step,
isVisible: ko.observable(true),
isLogedIn: customer.isLoggedIn(),
//step code will be used as step content id in the component template
stepCode: 'isLogedCheck',
//step title value
stepTitle: 'Logging Status',
/**
*
* @returns {*}
*/
initialize: function () {
this._super();
// register your step
stepNavigator.registerStep(
this.stepCode,
//step alias
null,
this.stepTitle,
//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 () {
},
/**
* @returns void
*/
navigateToNextStep: function () {
stepNavigator.next();
}
});
}
);
Step - 2
After that, you need to create a check-login.html file in the MageDelight/HelloWorld/view/frontend/web/template folder & paste the following code.
<!--Use 'stepCode' as id attribute-->
<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
<div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>
<div id="checkout-step-title"
class="step-content"
data-role="content">
<p>The customer is <span data-bind="if: !isLogedIn">not</span> Logged-in</p>
<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>
Step - 3
Lastly, you need to create a checkout_idex_index.xml file in the MageDelight/HelloWorld/view/frontend/layout/ folder & paste the following code to extend the checkout page’s layout to display the new step.
<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="check-login-step" xsi:type="array"> <item name="component" xsi:type="string">MageDelight_HelloWorld/js/view/checkout-login-step</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>
Step - 4
Finally, clean the cache and check the output.
Ending Note
So, these are the steps you can follow to create a new step in the checkout page of your Magento 2 store.
And if you need our professional assistance, feel free to contact us at any time.