Unable to add form in magento 2 custom checkout stepHow to Add Custom fields to Checkout page in Magento2jQuery returning undefined for value in billing step on checkoutData population in UI formHow to clear billing form validation errors when using Magento UI componentsHow to add a new step in checkoutHow to add input fields in custom checkout step in Magento 2.1?How to add a custom form in a custom payment methodMagento 2.2.0 - checkout_index_index.xml shippingAdditional not workingMagento 2.2.1: Add Custom Upload file attribute in Checkoutmagento 2 custom component at checkout-step-shipping as shipping address childHow to add custom form to custom checkout step in magento2?

What happens when I team swap while I have Pokemon inside a gym?

Is the Malay "garam" (salt) related to the Latin "garum" (fish sauce)?

Manually select/unselect lines before forwarding to stdout

Interviewing with an unmentioned 9 months of sick leave taken during a job

How should the player unlock things?

Why does FFmpeg choose 10+20+20 ms instead of an even 16 ms for 60 fps GIF images?

How do I query for system views in a SQL Server database?

What powers the air required for pneumatic brakes in aircraft?

Sending a photo of my bank account card to the future employer

Cauchy reals and Dedekind reals satisfy "the same mathematical theorems"

Cine footage fron Saturn V launch's

If SWIFT is headquartered in Europe, why does the EU need to create a SWIFT alternative to be able to do transactions with Iran?

Alphanumeric Line and Curve Counting

Why doesn't philosophy have higher standards for its arguments?

Can a pizza stone be fixed after soap has been used to clean it?

A scene of Jimmy diversity

Credit card details stolen every 1-2 years. What am I doing wrong?

Bone Decomposition

What advantages do focused Arrows of Slaying have over more generic ones?

Advice for paying off student loans and auto loans now that I have my first 'real' job

Why alcohol had been selected as fuel for the first American space rockets?

How can I leave a car for someone if we can't meet in person?

What are "full piece" and "half piece" in chess?

Why is Katakana not pronounced Katagana?

Unable to add form in magento 2 custom checkout step

How to Add Custom fields to Checkout page in Magento2jQuery returning undefined for value in billing step on checkoutData population in UI formHow to clear billing form validation errors when using Magento UI componentsHow to add a new step in checkoutHow to add input fields in custom checkout step in Magento 2.1?How to add a custom form in a custom payment methodMagento 2.2.0 - checkout_index_index.xml shippingAdditional not workingMagento 2.2.1: Add Custom Upload file attribute in Checkoutmagento 2 custom component at checkout-step-shipping as shipping address childHow to add custom form to custom checkout step in magento2?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

What I have done so far,

I have added a custom checkout step successfully(wirtten a separate module for it) by following the steps given on http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html

I added the step in between Shipping info and Payment step

Now I am following
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_form.html
to add a form to the newly added custom checkout step.

I have already created a separate module successfully following the docs reference given in last step(
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_form.html), but it shows the form inside the shipping step and I don't want it this way. I want show it in the separate step that I have already created.

Module that I created for the separate step,

app/code/Dgs/DgsDealerStep/view/frontend/layout/checkout_index_index.xml, this is my overridden checkout_index_index.xml, in this i have already added my new custom checkout step and it working fine, i have also added form that i want to display in this step, but it never showed up, no errors in console, see this comment in xml for the form that i want to add and for the new step that i have added

<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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

app/code/Dgs/DgsDealerStep/view/frontend/web/js/view/dealer-checkout-step.js, this is the js file of the new custom checkout step that i have added

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>_<Module> - is the name of the your module directory.
 * 
 */
 return Component.extend(
 defaults: 
 template: 'Dgs_DealerStep/dealer-checkout-step'
 ,

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

 /**
 *
 * @returns *
 */
 initialize: function () 
 this._super();
 // register your step
 stepNavigator.registerStep(
 //step code will be used as step content id in the component template
 'step_code',
 //step alias
 null,
 //step title value
 'Affiliates (for Dealers and Agents Only)',
 //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
 */
 15
 );

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

app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html, this is the html file for the new custom checkout step

<!--The 'step_code' value from the .js file should be used-->
<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/Dgs/DgsDealerStep/view/frontend/web/js/view/dealer.js, this is the js file for the form that i want to display in custom checkout step that i have added

/*global define*/
define([
 'Magento_Ui/js/form/form'
], function(Component) 
 'use strict';
 return Component.extend(
 initialize: function () 
 this._super();
 // component initialization logic
 return this;
 ,

 /**
 * Form submit handler
 *
 * This method can have any name.
 */
 onSubmit: function() 
 // trigger form validation
 this.source.set('params.invalid', false);
 this.source.trigger('customCheckoutForm.data.validate');

 // verify that form data is valid
 if (!this.source.get('params.invalid')) 
 // data is retrieved from data provider by value of the customScope property
 var formData = this.source.get('customCheckoutForm');
 // do something with form data
 console.dir(formData);
 
 
 );
);

app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer.html, it is the html file of the form that i want to display in the step

<div>
 <form id="custom-checkout-form" class="form" data-bind="attr: 'data-hasrequired': $t('* Required Fields')">
 <fieldset class="fieldset">
 <legend data-bind="i18n: 'Custom Checkout Form'"></legend>
 <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </fieldset>
 <button type="reset">
 <span data-bind="i18n: 'Reset'"></span>
 </button>
 <button type="button" data-bind="click: onSubmit" class="action">
 <span data-bind="i18n: 'Submit'"></span>
 </button>
 </form>
</div>

edited Nov 7 '17 at 5:34

Teja Bhagavan Kollepara

3,0144 gold badges21 silver badges51 bronze badges

asked Sep 28 '17 at 16:51

Abdul Moiz

1691 silver badge13 bronze badges

add a comment |

What I have done so far,

I have added a custom checkout step successfully(wirtten a separate module for it) by following the steps given on http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html

I added the step in between Shipping info and Payment step

Now I am following
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_form.html
to add a form to the newly added custom checkout step.

I have already created a separate module successfully following the docs reference given in last step(
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_form.html), but it shows the form inside the shipping step and I don't want it this way. I want show it in the separate step that I have already created.

Module that I created for the separate step,

app/code/Dgs/DgsDealerStep/view/frontend/layout/checkout_index_index.xml, this is my overridden checkout_index_index.xml, in this i have already added my new custom checkout step and it working fine, i have also added form that i want to display in this step, but it never showed up, no errors in console, see this comment in xml for the form that i want to add and for the new step that i have added

<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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

app/code/Dgs/DgsDealerStep/view/frontend/web/js/view/dealer-checkout-step.js, this is the js file of the new custom checkout step that i have added

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>_<Module> - is the name of the your module directory.
 * 
 */
 return Component.extend(
 defaults: 
 template: 'Dgs_DealerStep/dealer-checkout-step'
 ,

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

 /**
 *
 * @returns *
 */
 initialize: function () 
 this._super();
 // register your step
 stepNavigator.registerStep(
 //step code will be used as step content id in the component template
 'step_code',
 //step alias
 null,
 //step title value
 'Affiliates (for Dealers and Agents Only)',
 //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
 */
 15
 );

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

app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html, this is the html file for the new custom checkout step

<!--The 'step_code' value from the .js file should be used-->
<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/Dgs/DgsDealerStep/view/frontend/web/js/view/dealer.js, this is the js file for the form that i want to display in custom checkout step that i have added

/*global define*/
define([
 'Magento_Ui/js/form/form'
], function(Component) 
 'use strict';
 return Component.extend(
 initialize: function () 
 this._super();
 // component initialization logic
 return this;
 ,

 /**
 * Form submit handler
 *
 * This method can have any name.
 */
 onSubmit: function() 
 // trigger form validation
 this.source.set('params.invalid', false);
 this.source.trigger('customCheckoutForm.data.validate');

 // verify that form data is valid
 if (!this.source.get('params.invalid')) 
 // data is retrieved from data provider by value of the customScope property
 var formData = this.source.get('customCheckoutForm');
 // do something with form data
 console.dir(formData);
 
 
 );
);

app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer.html, it is the html file of the form that i want to display in the step

<div>
 <form id="custom-checkout-form" class="form" data-bind="attr: 'data-hasrequired': $t('* Required Fields')">
 <fieldset class="fieldset">
 <legend data-bind="i18n: 'Custom Checkout Form'"></legend>
 <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </fieldset>
 <button type="reset">
 <span data-bind="i18n: 'Reset'"></span>
 </button>
 <button type="button" data-bind="click: onSubmit" class="action">
 <span data-bind="i18n: 'Submit'"></span>
 </button>
 </form>
</div>

edited Nov 7 '17 at 5:34

Teja Bhagavan Kollepara

3,0144 gold badges21 silver badges51 bronze badges

asked Sep 28 '17 at 16:51

Abdul Moiz

1691 silver badge13 bronze badges

add a comment |

What I have done so far,

I have added a custom checkout step successfully(wirtten a separate module for it) by following the steps given on http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html

I added the step in between Shipping info and Payment step

Now I am following
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_form.html
to add a form to the newly added custom checkout step.

I have already created a separate module successfully following the docs reference given in last step(
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_form.html), but it shows the form inside the shipping step and I don't want it this way. I want show it in the separate step that I have already created.

Module that I created for the separate step,

app/code/Dgs/DgsDealerStep/view/frontend/layout/checkout_index_index.xml, this is my overridden checkout_index_index.xml, in this i have already added my new custom checkout step and it working fine, i have also added form that i want to display in this step, but it never showed up, no errors in console, see this comment in xml for the form that i want to add and for the new step that i have added

<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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

app/code/Dgs/DgsDealerStep/view/frontend/web/js/view/dealer-checkout-step.js, this is the js file of the new custom checkout step that i have added

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>_<Module> - is the name of the your module directory.
 * 
 */
 return Component.extend(
 defaults: 
 template: 'Dgs_DealerStep/dealer-checkout-step'
 ,

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

 /**
 *
 * @returns *
 */
 initialize: function () 
 this._super();
 // register your step
 stepNavigator.registerStep(
 //step code will be used as step content id in the component template
 'step_code',
 //step alias
 null,
 //step title value
 'Affiliates (for Dealers and Agents Only)',
 //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
 */
 15
 );

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

app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html, this is the html file for the new custom checkout step

<!--The 'step_code' value from the .js file should be used-->
<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/Dgs/DgsDealerStep/view/frontend/web/js/view/dealer.js, this is the js file for the form that i want to display in custom checkout step that i have added

/*global define*/
define([
 'Magento_Ui/js/form/form'
], function(Component) 
 'use strict';
 return Component.extend(
 initialize: function () 
 this._super();
 // component initialization logic
 return this;
 ,

 /**
 * Form submit handler
 *
 * This method can have any name.
 */
 onSubmit: function() 
 // trigger form validation
 this.source.set('params.invalid', false);
 this.source.trigger('customCheckoutForm.data.validate');

 // verify that form data is valid
 if (!this.source.get('params.invalid')) 
 // data is retrieved from data provider by value of the customScope property
 var formData = this.source.get('customCheckoutForm');
 // do something with form data
 console.dir(formData);
 
 
 );
);

app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer.html, it is the html file of the form that i want to display in the step

<div>
 <form id="custom-checkout-form" class="form" data-bind="attr: 'data-hasrequired': $t('* Required Fields')">
 <fieldset class="fieldset">
 <legend data-bind="i18n: 'Custom Checkout Form'"></legend>
 <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </fieldset>
 <button type="reset">
 <span data-bind="i18n: 'Reset'"></span>
 </button>
 <button type="button" data-bind="click: onSubmit" class="action">
 <span data-bind="i18n: 'Submit'"></span>
 </button>
 </form>
</div>

edited Nov 7 '17 at 5:34

Teja Bhagavan Kollepara

3,0144 gold badges21 silver badges51 bronze badges

asked Sep 28 '17 at 16:51

Abdul Moiz

1691 silver badge13 bronze badges

What I have done so far,

I have added a custom checkout step successfully(wirtten a separate module for it) by following the steps given on http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html

I added the step in between Shipping info and Payment step

Now I am following
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_form.html
to add a form to the newly added custom checkout step.

I have already created a separate module successfully following the docs reference given in last step(
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_form.html), but it shows the form inside the shipping step and I don't want it this way. I want show it in the separate step that I have already created.

Module that I created for the separate step,

app/code/Dgs/DgsDealerStep/view/frontend/layout/checkout_index_index.xml, this is my overridden checkout_index_index.xml, in this i have already added my new custom checkout step and it working fine, i have also added form that i want to display in this step, but it never showed up, no errors in console, see this comment in xml for the form that i want to add and for the new step that i have added

<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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

app/code/Dgs/DgsDealerStep/view/frontend/web/js/view/dealer-checkout-step.js, this is the js file of the new custom checkout step that i have added

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>_<Module> - is the name of the your module directory.
 * 
 */
 return Component.extend(
 defaults: 
 template: 'Dgs_DealerStep/dealer-checkout-step'
 ,

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

 /**
 *
 * @returns *
 */
 initialize: function () 
 this._super();
 // register your step
 stepNavigator.registerStep(
 //step code will be used as step content id in the component template
 'step_code',
 //step alias
 null,
 //step title value
 'Affiliates (for Dealers and Agents Only)',
 //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
 */
 15
 );

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

app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html, this is the html file for the new custom checkout step

<!--The 'step_code' value from the .js file should be used-->
<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/Dgs/DgsDealerStep/view/frontend/web/js/view/dealer.js, this is the js file for the form that i want to display in custom checkout step that i have added

/*global define*/
define([
 'Magento_Ui/js/form/form'
], function(Component) 
 'use strict';
 return Component.extend(
 initialize: function () 
 this._super();
 // component initialization logic
 return this;
 ,

 /**
 * Form submit handler
 *
 * This method can have any name.
 */
 onSubmit: function() 
 // trigger form validation
 this.source.set('params.invalid', false);
 this.source.trigger('customCheckoutForm.data.validate');

 // verify that form data is valid
 if (!this.source.get('params.invalid')) 
 // data is retrieved from data provider by value of the customScope property
 var formData = this.source.get('customCheckoutForm');
 // do something with form data
 console.dir(formData);
 
 
 );
);

app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer.html, it is the html file of the form that i want to display in the step

<div>
 <form id="custom-checkout-form" class="form" data-bind="attr: 'data-hasrequired': $t('* Required Fields')">
 <fieldset class="fieldset">
 <legend data-bind="i18n: 'Custom Checkout Form'"></legend>
 <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </fieldset>
 <button type="reset">
 <span data-bind="i18n: 'Reset'"></span>
 </button>
 <button type="button" data-bind="click: onSubmit" class="action">
 <span data-bind="i18n: 'Submit'"></span>
 </button>
 </form>
</div>

magento-2.1 checkout onepage-checkout checkout-page

edited Nov 7 '17 at 5:34

Teja Bhagavan Kollepara

3,0144 gold badges21 silver badges51 bronze badges

asked Sep 28 '17 at 16:51

Abdul Moiz

1691 silver badge13 bronze badges

edited Nov 7 '17 at 5:34

Teja Bhagavan Kollepara

3,0144 gold badges21 silver badges51 bronze badges

asked Sep 28 '17 at 16:51

Abdul Moiz

1691 silver badge13 bronze badges

edited Nov 7 '17 at 5:34

Teja Bhagavan Kollepara

3,0144 gold badges21 silver badges51 bronze badges

edited Nov 7 '17 at 5:34

Teja Bhagavan Kollepara

3,0144 gold badges21 silver badges51 bronze badges

edited Nov 7 '17 at 5:34

Teja Bhagavan Kollepara

3,0144 gold badges21 silver badges51 bronze badges

asked Sep 28 '17 at 16:51

Abdul Moiz

1691 silver badge13 bronze badges

asked Sep 28 '17 at 16:51

Abdul Moiz

1691 silver badge13 bronze badges

asked Sep 28 '17 at 16:51

Abdul Moiz

1691 silver badge13 bronze badges

add a comment |

1 Answer
1

active

oldest

votes

There is some changes in below 2 files:

File-1: app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html

<!--The 'step_code' value from the .js file should be used-->
<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">
 <!-- ko foreach: getRegion('custom-checkout-form-container') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </div>
</li>

File-2: app/code/Dgs/DgsDealerStep/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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="displayArea" xsi:type="string">custom-checkout-form-container</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

Please Note Atfer This Need to run below commands;

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Hope this helps....!

answered Feb 5 '18 at 10:16

Nilesh Gosai

6975 silver badges11 bronze badges

add a comment |

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f195170%2funable-to-add-form-in-magento-2-custom-checkout-step%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

There is some changes in below 2 files:

File-1: app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html

<!--The 'step_code' value from the .js file should be used-->
<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">
 <!-- ko foreach: getRegion('custom-checkout-form-container') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </div>
</li>

File-2: app/code/Dgs/DgsDealerStep/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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="displayArea" xsi:type="string">custom-checkout-form-container</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

Please Note Atfer This Need to run below commands;

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Hope this helps....!

answered Feb 5 '18 at 10:16

Nilesh Gosai

6975 silver badges11 bronze badges

add a comment |

There is some changes in below 2 files:

File-1: app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html

<!--The 'step_code' value from the .js file should be used-->
<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">
 <!-- ko foreach: getRegion('custom-checkout-form-container') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </div>
</li>

File-2: app/code/Dgs/DgsDealerStep/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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="displayArea" xsi:type="string">custom-checkout-form-container</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

Please Note Atfer This Need to run below commands;

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Hope this helps....!

answered Feb 5 '18 at 10:16

Nilesh Gosai

6975 silver badges11 bronze badges

add a comment |

There is some changes in below 2 files:

File-1: app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html

<!--The 'step_code' value from the .js file should be used-->
<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">
 <!-- ko foreach: getRegion('custom-checkout-form-container') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </div>
</li>

File-2: app/code/Dgs/DgsDealerStep/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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="displayArea" xsi:type="string">custom-checkout-form-container</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

Please Note Atfer This Need to run below commands;

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Hope this helps....!

answered Feb 5 '18 at 10:16

Nilesh Gosai

6975 silver badges11 bronze badges

There is some changes in below 2 files:

File-1: app/code/Dgs/DgsDealerStep/view/frontend/web/template/dealer-checkout-step.html

<!--The 'step_code' value from the .js file should be used-->
<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">
 <!-- ko foreach: getRegion('custom-checkout-form-container') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </div>
</li>

File-2: app/code/Dgs/DgsDealerStep/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">Dgs_DealerStep/js/view/dealer-checkout-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-->




 <!-- This is the form that I want show in my new step -->
 <!-- Your form declaration here -->
 <item name="custom-checkout-form-container" xsi:type="array">
 <item name="component" xsi:type="string">Dgs_DealerStep/js/view/dealer</item>
 <item name="displayArea" xsi:type="string">custom-checkout-form-container</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Dgs_DealerStep/dealer</item>
 </item>
 <item name="children" xsi:type="array">
 <item name="custom-checkout-form-fieldset" xsi:type="array">
 <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
 <item name="component" xsi:type="string">uiComponent</item>
 <!-- the following display area is used in template (see below) -->
 <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
 <item name="children" xsi:type="array">
 <item name="text_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
 <item name="config" xsi:type="array">
 <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
 <item name="label" xsi:type="string">Text Field</item>
 <item name="sortOrder" xsi:type="string">1</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 <item name="checkbox_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
 <item name="label" xsi:type="string">Checkbox Field</item>
 <item name="sortOrder" xsi:type="string">3</item>
 </item>
 <item name="select_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
 </item>
 <item name="options" xsi:type="array">
 <item name="0" xsi:type="array">
 <item name="label" xsi:type="string">Please select value</item>
 <item name="value" xsi:type="string"></item>
 </item>
 <item name="1" xsi:type="array">
 <item name="label" xsi:type="string">Value 1</item>
 <item name="value" xsi:type="string">value_1</item>
 </item>
 <item name="2" xsi:type="array">
 <item name="label" xsi:type="string">Value 2</item>
 <item name="value" xsi:type="string">value_2</item>
 </item>
 </item>
 <!-- value element allows to specify default value of the form field -->
 <item name="value" xsi:type="string">value_2</item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
 <item name="label" xsi:type="string">Select Field</item>
 <item name="sortOrder" xsi:type="string">2</item>
 </item>
 <item name="date_field" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
 <item name="config" xsi:type="array">
 <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
 <item name="customScope" xsi:type="string">customCheckoutForm</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
 </item>
 <item name="provider" xsi:type="string">checkoutProvider</item>
 <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
 <item name="label" xsi:type="string">Date Field</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="string">true</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item> 







 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

Please Note Atfer This Need to run below commands;

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Hope this helps....!

answered Feb 5 '18 at 10:16

Nilesh Gosai

6975 silver badges11 bronze badges

answered Feb 5 '18 at 10:16

Nilesh Gosai

6975 silver badges11 bronze badges

answered Feb 5 '18 at 10:16

Nilesh Gosai

6975 silver badges11 bronze badges

answered Feb 5 '18 at 10:16

Nilesh Gosai

6975 silver badges11 bronze badges

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ttdfjt

1 Answer
1

Your Answer

Post as a guest

1 Answer
1

1 Answer
1

Post as a guest

Popular posts from this blog

Category:9 (number) SubcategoriesMedia in category "9 (number)"Navigation menuUpload mediaGND ID: 4485639-8Library of Congress authority ID: sh85091979ReasonatorScholiaStatistics

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

1 Answer 1

1 Answer 1

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Category:9 (number) SubcategoriesMedia in category "9 (number)"Navigation menuUpload mediaGND ID: 4485639-8Library of Congress authority ID: sh85091979ReasonatorScholiaStatistics

1 Answer
1

1 Answer
1

1 Answer
1