2

I'm trying to add a new step to the normal workflow of magento 2 checkout, I follow the tutorial on magento dev page (http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html) but I don't get any result or any error.

Here my code:

I created a custom module (it result corretly load on magento) and I add the following file:

in /view/frontend/layout/checkout_index_index.xml

<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" xsi:type="array">
                                        <item name="component" xsi:type="string">Magento_Shipping/js/view/check-login-view</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">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>

then in /view/frontend/web/js/view/checkout/check-login-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,
     * your_module_dir - is the name of the your module directory.
     *
     */
    return Component.extend({
        defaults: {
            template: 'Shipping/checkout/check-login'
        },

        //add here your logic to display step,
        isVisible: ko.observable(true),

        /**
         *
         * @returns {*}
         */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                //step code will be used as step content id in the component template
                'check_login',
                //step alias
                check_login,
                //step title value
                'Login / Registrati',
                //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
                 */
                5
            );

            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();
        }
    });
});

finally in /view/frontend/web/template/checkout/check-login-view.js

<li id="check_login" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Title'" 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">
                <button data-role="opc-continue" type="submit" class="button action continue primary">
                    <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                </button>
            </div>
        </div>
    </form>
</div></li>

The goal is to create a previous step where i check if the user is logged or not and I allow to login if necessary.

Improve this question

3 Answers 3

Reset to default
1

Adding a new step to checkout page.

  • Step 1: Create the .js file implementing the view model.

  • Step 2: Create an .html template for the component.

  • Step 3: Add the new step to the Checkout page layout.

I follow http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html https://www.mageplaza.com/add-custom-checkout-step-magento-2.html

Your module directory structure should be like in Magentodirectory/app/code/ enter image description here

Here's Registration.php file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::MODULE,
        'Lalitmohan_Checkoutstep',
        __DIR__);

Module.xml file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Lalitmohan_Checkoutstep" setup_version="1.0.0" >
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

checkout_index_index.xml file

<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">Lalitmohan_Checkoutstep/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>

checkout-login-step.js file

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: 'Lalitmohan_Checkoutstep/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: 'custom step 2',

            /**
             *
             * @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
                     */
                    21
                );

                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();
            }
        });
    }
);

check-login.html file

<!--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>

Note: please replace Lalitmohan with your Namespace & checkoutstep by moduleName. Result should be like this. enter image description here enter image description here

Don't forget to run from your magento root directory after complete above all steps.

php bin/magento setup:upgrade

php -dmemory_limit=5G bin/magento setup:static-content:deploy

and please check your module is enabled or not or check enter image description here

Improve this answer
2
  • I want to create an account link in your steps and its
    – sky
    Commented Jul 25, 2018 at 9:57
  • @AkashPatel please create new question and link here...
    – lalit mohan
    Commented Jul 25, 2018 at 11:10
0

I think you do wrong over here : you need to write /view/frontend/web/template/checkout/check-login-view.html instead of /view/frontend/web/template/checkout/check-login-view.js

also chagne over here.

          stepNavigator.registerStep(

            'check_login',
            //step alias
            **'check_login'**,//you forgto to add ''(single quote)
            //step title value
            'Login / Registrati',
            //observable property with logic when display step or hide step
            this.isVisible,

            _.bind(this.navigate, this),


        );
Improve this answer
0

I think Actually you made wrong on
template: 'Shipping/checkout/check-login' to template: 'Magento_Shipping/checkout/check-login'

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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