0

I am trying to add extra step in Magento checkout but it is not working at all. I don't know what the wrong I am doing.

Here is what I have done so far.

app/code/SDbullion/Nfusions/etc/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="SDbullion_Nfusions" setup_version="2.0.1">
    <sequence>
        <module name="Magento_Checkout" />
    </sequence>
</module>
</config>

app/code/SDbullion/Nfusions/composer.json

{
"name": "SDbullion/Nfusions",
"description": "my description.",
"type": "magento2-module",
"version": "2.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
 ],
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/framework": "~100.0.4",
"magento/module-checkout": "~2.0.0"
 },
 "authors": [
 {
  "name": "nFusion Solutions",
  "email": "support@nfusionsolutions.com",
  "homepage": "http://nfusion.com/",
  "role": "Developer"
 }
],
"autoload": {
"files": [ "registration.php" ],
"psr-4": {
  "SDbullion\\Nfusions\\": ""
  }
}
}

app/code/SDbullion/Nfusions/view/frontend/web/js/view/my-step-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, 
    * SDbullion_Nfusions  - is the name of your module directory.
    * 
    */
    return Component.extend({
        defaults: {
            template: 'SDbullion_Nfusions/mystep'
        },

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

        /**
        *
        * @returns {*}
        */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                'step_code',
                //step alias
                null,
                //step title value
                'Step Title',
                this.isVisible,

                _.bind(this.navigate, this),
                15
            );

            return this;
        },
        navigate: function () {

        },
        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
}
);

app/code/SDbullion/Nfusions/view/frontend/web/template/mystep.html

  <li id="step_code" 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>

app/code/SDbullion/Nfusions/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="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">SDbullion/Nfusions/view/frontend/web/js/view/my-step-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">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>

I tried above code but extra step is not adding. What I am doing wrong? I am using Magento 2.0.5 version

1

Check your file app/code/SDbullion/Nfusions/view/frontend/layout/checkout_index_index.xml

 <item name="component" xsi:type="string">SDbullion/Nfusions/view/frontend/web/js/view/my-step-view</item>

This should be like below

 <item name="component" xsi:type="string">SDbullion_Nfusions/js/view/my-step-view</item>

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.