1

Vendor/Module/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="veratad_custom_step" xsi:type="array">
                                                <item name="component" xsi:type="string">Veratad_AgeVerification/js/view/veratad-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">Veratad_AgeVerification/js/view/custom-checkout-form</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">Veratad_AgeVerification/custom-checkout-form</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.last4</item>
                                                                        <item name="label" xsi:type="string">Last 4 SSN</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 name="tooltip" xsi:type="array">
                                                                            <item name="description" xsi:type="string" translate="true">This information is only used to verify your age. It will not be stored.</item>
                                                                        </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_birth</item>
                                                                        <item name="label" xsi:type="string">Date of Birth</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>

The custom step appears but the form does not appear. What is wrong with this structure?

Here is

Vendor/Module/view/frontend/web/template/veratad_step.html

    <!--The 'step_code' value from the .js file should be used-->
    <li id="veratad_step" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Age Verification'" 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>

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.