I'm trying to add a custom checkout step called Gifts and Rewards, where I can list the products and show the option of wrapping the gifts (available already in the cart in commerce version).

so basically this step shows the list of products typically like in the cart.

any recommendations?


Create new module with required files like registration.php and etc/module.xml

Create the .js file implementing the view model.

Create the checkout-login-step.js file under Namespace/Module/view/frontend/web/js/view directory. Basically, we need step_code, step_title, order and the condition that allows to display this step.

Here is the code (Read code comment to get more info)

    function (
    ) {
        'use strict';
        * check-login - is the name of the component's .html template
        return Component.extend({
            defaults: {
                template: 'Namespace_Module/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 () {
                // register your step
                    //step alias
                    //observable property with logic when display step or hide step

                    _.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

                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 () {

Create an .html template for the component.

In the above step, we use Namespace_Module/check-login as our template, let’s create it. Create a new html file named check-login.html under Namespace/Module/view/frontend/web/template directory.

Here is the 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"
         <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>

Add the new step to the Checkout page layout.

We need to extend the checkout page’s layout to be able to display the new step. Add this file in our module: Namespace/Module/view/frontend/layout/checkout_index_index.xml.

The content as follow:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                    <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">Namespace_Module/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-->

Reference link, https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_new_step.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.