The checkout process in Magento 2 has been redesigned to be faster and easier. However, businesses might need to add custom steps to meet specific requirements.
This blog post will guide you through the steps to add custom checkout steps in Magento 2.
ON THIS PAGE
Guide To Add Custom Checkout Steps in Magento 2
Understand the Default Checkout Flow
Magento 2’s default checkout consists of two main steps:
- Shipping: The user selects a shipping address and method.
- custom steps (Review): The user reviews their order and
- Payments: Select a payment method.
Notes:
Here, we are adding a custom page called Order Summary, where users can review all the order details on this page.
To add custom steps like review, you need to extend and modify this default flow.
1. Create a Custom Module
like app/code/DCKAP/Popup/etc/module.xml and app/code/DCKAP/Popup/registration.php
registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'DCKAP_Popup',
__DIR__
);Module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="DCKAP_Popup" setup_version="1.0.0" />
</config>2. Create checkout_index_index.xml
like app/code/DCKAP/Popup/view/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?>
<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 for last step -->
<item name="reviewstep" xsi:type="array">
<item name="component" xsi:type="string">DCKAP_Popup/js/view/custom-step</item>
<item name="sortOrder" xsi:type="string">1</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>3. Create custom-step.js
Like app/code/DCKAP/Popup/view/frontend/web/js/view/custom-step.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,
* DCKAP_Popup - is the name of your module directory.
*/
return Component.extend({
defaults: {
template: 'DCKAP_Popup/mystep'
},
// add here your logic to display step,
isVisible: ko.observable(true),
/**
* @returns {*}
*/
initialize: function () {
this._super();
// register your step
stepNavigator.registerStep(
'order_summary',
null,
'Order Summary',
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 steps
* during checkout. You can add custom logic, for example some conditions
* for switching to your Order Summary
* When the user navigates to the Order Summary via url anchor or back button we_must show step manually here
*/
navigate: function () {
this.isVisible(true);
},
/**
* @returns void
*/
navigateToNextStep: function () {
stepNavigator.next();
}
});
});4. Create mystep.html
like app/code/DCKAP/Popup/view/frontend/web/template/mystep.html
<!--The 'order_summary' value from the .js file should be used-->
<li id="order_summary" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Order Summary'" data-role="title"></div>
<div id="checkout-step-title"
class="step-content"
data-role="content">
<form data-bind="submit: navigateToNextStep" novalidate="novalidate">
<div class="actions-toolbar">
<div class="primary">
<input type="text" placeholder="Custom Field" class="form-control"/>
<button data-role="opc-continue" type="submit" class="button action continue primary">
<span><!-- ko i18n: 'Next'--><!-- /ko --></span>
</button>
</div>
</div>
</form>
</div>
</li>Output
Add Custom Checkout Steps in Magento 2 with Klizer
Adding a custom checkout step in Magento 2 requires creating a custom module, extending the layout, and defining your step in JavaScript. By following the steps outlined in this blog, you can customize the checkout process to meet your business requirements while maintaining Magento 2’s modularity and flexibility.
Getting started with Klizer can help you upgrade your Magento store with Magento expert advice. Contact us and explore features to grow your business.
