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.
Table of Contents
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.
Steps to Add a New Step in Checkout Page 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. Create the Javascript File Implementing the View Model.
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. Create an .html Template for the Component.
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. Add the New Step to the Checkout Page Layout.
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. Clean the cache and check the result.
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.