1

I was created module for add step in checkout. In here i want to add one dynamic form using form fields from my database.

My Table structure

--Field Id --Field Name --Field Type

My checkout_index_index.xml file

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

                                        <item name="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">Custommodule_Giftmessage/js/view/checkout/my-checkout-view</item>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">


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

My form_view.phtml file

<div id="block-customer-list" data-bind="scope:'customer-list'" class="block">

  <!-- ko template: getTemplate() --><!-- /ko -->

  <script type="text/x-magento-init">

      {

          "#block-customer-list": {

              "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>

          }

      }

  </script>

My form_view.html file

<li id="step_code" data-bind="fadeVisible: isVisible">
<div id="checkout-step-title" class="step-content" data-role="content">

</div>

My my-checkout-view.js file

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.
    * 
    */
    var listFormFields = ko.observableArray([]);


    return Component.extend({           
        defaults: {
            template: 'Custommodule_Giftmessage/checkout/form_view'
        },

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

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

);

Your Answer

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

Browse other questions tagged or ask your own question.