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/Vendor/ModuleName/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="Vendor_ModuleName" setup_version="2.0.1">
<sequence>
<module name="Magento_Checkout" />
</sequence>
</module>
</config>
app/code/Vendor/ModuleName/composer.json
{
"name": "Vendor/ModuleName",
"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@example.com",
"homepage": "http://example.com/",
"role": "Developer"
}
],
"autoload": {
"files": [ "registration.php" ],
"psr-4": {
"Vendor\\ModuleName\\": ""
}
}
}
app/code/Vendor/ModuleName/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,
* Vendor_ModuleName - is the name of your module directory.
*
*/
return Component.extend({
defaults: {
template: 'Vendor_ModuleName/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/Vendor/ModuleName/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/Vendor/ModuleName/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">Vendor/ModuleName/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
