Magento2 在下单前添加自定义校验

4.23K 浏览翻译
0 Comments

Magento2 在下单前添加自定义校验

https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_order.html

这篇文章讲述了，在结账页面中，如何添加订单提交前被执行的自定义校验器。也就是说，在购买者点击 ‘Place Order’ 之后，执行这个校验。但本文不包括如何编写校验器的逻辑。

在提交订单之前添加自定义校验，你必须按照以下步骤：
  1. 创建一个校验器；
  2. 添加校验到校验集合（validator pool）中；
  3. 在 Checkout layout 中声明这个校验。


第一步：创建校验器

为了兼容性，可升级性和易维护性，不要编辑 Magento 默认核心代码，在单独的模块中添加你的自定义内容。为了让你的自定义内容正确地应用，你的自定义模块应该依赖于 Magento_Checkout 模块。别用 Ui 作为你的自定义模块的名字，因为当指定路径时需要的这种 %自定义名称%_Ui 符号可以会因为问题。

在你的自定义模块目录中，创建一个执行校验的 a.js 文件。他应该放在<你的模块目录>/view/frontend/web/js/model 目录下。

下面是校验器 js 文件的一个示例。它必须执行 validate() 方法。 
define(
    [],
    function () {
        'use strict';
        return {
            /**
             * Validate something
             *
             * @returns {boolean}
             */
            validate: function() {
                //Put your validation logic here
                return true;
            }
        }
    });

第二步：添加校验器到校验器的集合

你自定义的校验器必须被添加到 ‘可选的校验器’ 的集合中。为了做到这个，用以下内容在 <你的模块的文件夹>/view/frontend/web/js/view 目录下新建一个 <你的校验>.js 文件： 
define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/additional-validators',
        '<your_module>/js/model/your-validator'
    ],
    function (Component, additionalValidators, yourValidator) {
        'use strict';
        additionalValidators.registerValidator(yourValidator);
        return Component.extend({});
    });

第三步：在 checkout  layout 中声明这个校验

在你自定义模块的目录下，新建一个 <your_module_dir>/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">
                                <item name="billing-step" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="payment" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="additional-payment-validators" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <!-- Declare your validation. START -->
                                                        <item name="your-validator" xsi:type="array">
                                                            <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
                                                        </item>
                                                        <!-- Declare your validation. END -->
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments></referenceBlock>
    </body></page>

0