如何在Magento 2中为结帐添加新的输入表单

本主题介绍了如何一个新的输入形式添加结帐页面
Magento提供了向任何结帐步骤添加自定义表格的功能:运输信息,查看和付款信息或自定义。
在本文中,我们将在“收货地址”表单之前添加新表单。

相关文章

  • Magento 2自定义结帐
  • 在Magento 2中添加自定义结帐字段
  • Magento 2优化结帐页面
  • 如何自定义结帐步骤
  • Magento 2一页结帐
  • 如何在结帐页面中添加新步骤

向结帐页面添加新的输入表单

  • 步骤1:创建表单UI组件。
  • 第2步:创建表单模板。
  • 步骤3:在结帐页面布局中注册表单。

您应该知道如何创建基本的Magento 2模块。所有自定义文件都将在此模块内。

让我们开始。

步骤1:创建表单UI组件。

custom-checkout-formMageplaza/HelloWorld/view/frontend/web/js/view目录中创建。

/*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);
            }
        }
    });
});

步骤2:创建表单模板。

在目录下为表单组件添加kickout.js HTML模板。custom-checkout-form.htmlMageplaza/HelloWorld/view/frontend/web/template

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

步骤3:在结帐页面布局中注册表单。

我们将在运输表格之前添加新表格。
与我们上一个“新闻简报”组件相比,这种形式非常相似

除了模板和整个表单都在xml本身(子节点)中这一事实之外。
我们不编写普通的html表单的原因是因为它(表单)的声明方式。普通的html表单不知道如何与表单组件(js文件)进行通信。

<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">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="before-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <!-- newsletter component -->
                                                                    <item name="newsletter" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Mageplaza_HelloWorld/js/view/newsletter</item>
                                                                        <item name="config" xsi:type="array">
                                                                            <item name="componentDisabled" xsi:type="boolean">true</item>
                                                                        </item>
                                                                    </item>
                                                                    <!-- new form -->
                                                                    <item name="custom-checkout-form-container" xsi:type="array">
                                                                        <!--links to our js file in step 1-->
                                                                        <item name="component" xsi:type="string">Mageplaza_HelloWorld/js/view/custom-checkout-form</item>
                                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                        <item name="config" xsi:type="array">
                                                                            <!--links to our html file in step 2-->
                                                                            <item name="template" xsi:type="string">Mageplaza_HelloWorld/custom-checkout-form</item>
                                                                        </item>
                                                                        <!-- new element -->
                                                                        <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>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

现在该刷新缓存并测试结果了。如果您有任何问题,请随时在下面发表评论,Mageplaza和Magento社区愿意提供帮助

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论