Magento – Create dynamic form in checkout step magento2

checkoutformsmagento-2.1magento2

Hi i have crated a custom checkout step in magento 2 , now I need to create dynamic from which will analyse cart items and output some form elements to my form. How can I implement that ?

view/fronted/layout/checkout_index_index.xml

<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">Amsi_UserManagement/js/view/select-student</item>
            <item name="sortOrder" xsi:type="string">2</item>
            <item name="children" xsi:type="array">
            </item>
        </item>
    </item>
</item>

view/frontend/web/js/view/select-student.js

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Checkout/js/model/quote',
        'jquery'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator,
        quote,
        $
    ) {
        'use strict';

        function checkVisible() {
            if(quote.isVirtual() && !stepNavigator.stepCodes.length)
                return ko.observable(true);
            else
                return ko.observable(false);
        }

        return Component.extend({
            defaults: {
                template: 'Amsi_UserManagement/checkout/select-student'
            },

            isVisible: checkVisible(),

            initialize: function () {
                this._super();
                stepNavigator.registerStep(
                    'select_student',
                    'select_student',
                    'Select Student',
                    this.isVisible,

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

                return this;
            },

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

My current template is static I need to make it dynamic and also need to validate the fields by clicking the next button in my template

view/frontend/web/template/checkout/select-student.html

<li id="select_student" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Select Student'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">
        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">

            <div class="fieldset"
                 data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
                 <div class="field field-email required">
                    <label class="label" for="save-email"><span data-bind="i18n: 'Email Address'"></span></label>
                    <div class="control">
                        <input type="email"
                               class="input-text"
                               id="save-email"
                               name="email"
                               data-validate="{required:true}" />
                    </div>
                </div>

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

I have researched about it and I got an idea to use layout processor, how can i implement that, any idea ?

Best Answer

If any one looking for the answer, this is how I implemented it.

Changed view/fronted/layout/checkout_index_index.xml to

<item name="select-student" xsi:type="array">
    <item name="component" xsi:type="string">Amsi_UserManagement/js/view/select-student</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Amsi_UserManagement/checkout/select-student</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="select-student-form-fieldset" xsi:type="array">
            <item name="component" xsi:type="string">uiComponent</item>
            <item name="displayArea" xsi:type="string">select-student-form-fields</item>
            <item name="children" xsi:type="array">
            </item>
        </item>
    </item>
</item>

view/frontend/web/template/checkout/select-student.html

<li id="select_student" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Select Student'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">
        <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('select-student-form-fields') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
                <!--/ko-->
            </fieldset>
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" data-bind="click: onSubmit" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

Created new newPlugin/Model/Checkout/LayoutProcessor.php

<?php
namespace Amsi\UserManagement\Plugin\Model\Checkout;

class LayoutProcessor
{  

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {

        $jsLayout['components']['checkout']['children']['steps']['children']['select-student']['children'] ['select-student-form-fieldset']
        ['children']['text-field'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'selectStudentCheckoutForm',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
            ],
            'provider' => 'checkoutProvider',
            'dataScope' => 'selectStudentCheckoutForm.text_field',
            'label' => 'Text Field',
            'sortOrder' => 1,
            'validation' => [
                'required-entry' => true,
            ],
        ];

        return $jsLayout;
    }
}

Crated new etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="pl_student_layout_pl" type="Amsi\UserManagement\Plugin\Model\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

Related Solutions

Magento2 – How to Override Admin JS File

Change requirejs-config.js following way:

Vendor/Module/view/adminhtml/requirejs-config.js

var config = {
    "map": {
        "*": {
            "Magento_ConfigurableProduct/js/variations/steps/summary": "Vendor_Module/js/variations/steps/summary-custom",
        }
    }
}

Now create summary-custom.js file [Vendor/Module/view/adminhtml/web/js/variations/steps/summary-custom.js]

define([
    'uiComponent',
    'jquery',
    'ko',
    'underscore',
    'mage/translate',
    'Magento_ConfigurableProduct/js/variations/steps/summary'
], function (Component, $, ko, _,$t,summary) {
    'use strict';

});

Run following command and clear cache.

php bin/magento setup:static-content:deploy

Magento2 UI Components – Clear Billing Form Validation Errors

You've asked a bit of a mouthful there -- probably too much for a single Stack Exchange question, so I'm going to concentrate on teaching you how to reset the initial state of the form so things no longer appear invalid if there's a blank value. If you're interested in the whys, you'll need to get up to speed on the fundamentals of UI Components and x-magento-init scripts. My Magento 2 UI Components and uiElement Internals series are a good place to start. The following assumes you have some familiarity with these systems -- if there's something confusing below then the above articles (as well as the other Magento 2 articles) will probably have the information you're looking for.

In the Checkout Application, each form field is represented by a view model, and one-or-many view model templates. You can see this in Commerce Bug's KO Scopes tab.

The firstname's view model is an object derived from the constructor function returned by the Magento_Ui/js/form/element/abstract RequireJS module. You can find that model's source code here

vendor/magento//module-ui/view/base/web/js/form/element/abstract.js

The reset method is the one we're interested in. This will reset a field's validation state. You'll need to figure out the full uiRegistry string identifier for the specific model (again, Commerce Bug is useful here), use that string to fetch the instantiated view model, and then call the reset function. For the checkmo form, the following program (easily adapted into a define module if you're going to use it in your application) will do that for the firstname field.

requirejs(['uiRegistry'], function(uiRegistry){
    uiRegistry.get('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields.firstname').reset();
});

Of course, you'll likely want to fetch each view model that's part of a particular form -- the following is a start on that.

uiRegistry.get(function(viewModel){
    var parentName = viewModel['parentName'] ? viewModel['parentName'] : '';
    if(parentName.indexOf('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields') === -1){
        return;
    };       
    console.log(viewModel);
});

This uses the uiRegistry's callback feature to search for all view models with a parent of checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields. Some of these may not be form elements, but we'll leave that problem as an exercise for the questioner.

Hope that helps!

Best Answer

Related Solutions

Magento2 – How to Override Admin JS File

Magento2 UI Components – Clear Billing Form Validation Errors

Related Topic