เพิ่มกฎไปยัง rules.js Magento2

จะเพิ่มกฎใหม่ใน rules.js ได้อย่างไร? ฉันสร้าง extra-rules.js แล้ว

define(
[
    'jquery',
    'Magento_Ui/js/lib/validation/validator'
], function ($, validator) {
    "use strict";
    return validator.addRule('phoneNO',
        function (value) {
            return value.length > 9 && value.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/);
        },
        $.mage.__('Please specify a valid phone number')
    );
});

จะรวมกฎนี้เข้ากับ rules.js ได้อย่างไร

นี่คือตัวอย่างการทำงานจริงและเต็มรูปแบบเพื่อเพิ่มกฎที่กำหนดเองลงในฟิลด์ป้อนข้อมูลการตรวจสอบอายุขั้นต่ำ:

สร้าง requirejs-config.js ในโมดูลของคุณเพื่อเพิ่มการมิกซ์กับvalidatorวัตถุNamespace/Modulename/view/frontend/requirejs-config.jsด้วยเนื้อหาดังต่อไปนี้:

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/lib/validation/validator': {
                'Namespace_Modulename/js/validator-mixin': true
            }
        }
    }
};

สร้างสคริปต์ js ในโฟลเดอร์โมดูลของคุณNamespace/Modulename/view/frontend/web/js/validator-mixin.jsด้วยเนื้อหาต่อไปนี้:

define([
    'jquery',
    'moment'
], function ($, moment) {
    'use strict';

    return function (validator) {

        validator.addRule(
            'validate-minimum-age',
            function (value, params, additionalParams) {
                return $.mage.isEmptyNoTrim(value) || moment(value, additionalParams.dateFormat).isBefore(moment().subtract(params.minimum_age, 'y'));
            },
            $.mage.__("Sorry, you don't have the age to purchase the current articles.")
        );

        return validator;
    };
});

การใช้งาน

หากคุณต้องการใช้ปลั๊กอิน Magento PHP เพื่อแทรกฟิลด์ป้อนข้อมูลในที่อยู่จัดส่งเช็คเอาต์ของคุณและตรวจสอบเนื้อหาของฟิลด์นี้ด้วยกฎที่กำหนดเองที่คุณเพิ่มไว้ก่อนหน้านี่คือตัวอย่างรหัส:

สร้างdi.xmlไฟล์ลงในetc/frontendโฟลเดอร์ของโมดูลของคุณด้วยเนื้อหาดังต่อไปนี้:

<?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="CheckoutLayoutProcessor" type="Namespace\Modulename\Plugin\Block\Checkout\LayoutProcessor" />
    </type>
</config>

จากนั้นสร้างLayoutProcessor.phpไฟล์app/code/Namespace/Modulename/Plugin/Block/Checkout/LayoutProcessor.phpด้วยเนื้อหาต่อไปนี้โปรดอัปเดตตามความต้องการของคุณ:

<?php
/**
 * diglin GmbH - Switzerland
 *
 * @author      Sylvain Rayé <support **at** diglin.com>
 * @category    diglin
 * @package     diglin
 * @copyright   Copyright (c) diglin (http://www.diglin.com)
 */

namespace MyNamespace\Modulename\Plugin\Block\Checkout;

use MyNamespace\Modulename\Helper\AgeValidation;

/**
 * Class LayoutProcessor
 * @package MyNamespace\Modulename\Plugin\Block\Checkout
 */
class LayoutProcessor
{
    /**
     * @var \MyNamespace\Checkout\Helper\AgeValidation
     */
    private $ageValidation;
    /**
     * @var \Magento\Framework\Stdlib\DateTime\TimezoneInterface
     */
    private $timezone;
    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    private $scopeConfig;

    /**
     * LayoutProcessor constructor.
     *
     * @param \MyNamespace\Checkout\Helper\AgeValidation $ageValidation
     * @param \Magento\Framework\Stdlib\DateTime\TimezoneInterface $timezone
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        AgeValidation $ageValidation,
        \Magento\Framework\Stdlib\DateTime\TimezoneInterface $timezone,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    )
    {
        $this->ageValidation = $ageValidation;
        $this->timezone = $timezone;
        $this->scopeConfig = $scopeConfig;
    }

    /**
     * Checkout LayoutProcessor after process plugin.
     *
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $processor
     * @param array $jsLayout
     *
     * @return array
     */
    public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $processor, $jsLayout)
    {
        $shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

        // Checks if shipping step available.
        if (isset($shippingConfiguration)) {
            $shippingConfiguration = $this->processAddress(
                $shippingConfiguration
            );
        }

        return $jsLayout;
    }

    /**
     * Process provided address to contains checkbox and have trackable address fields.
     *
     * @param $addressFieldset - Address fieldset config.
     *
     * @return array
     */
    private function processAddress($addressFieldset)
    {
        $minimumAge = $this->ageValidation->getMinimumAge();
        if ($minimumAge === null) {
            unset($addressFieldset['my_dob']);
        } else {
            $addressFieldset['my_dob'] = array_merge(
                $addressFieldset['my_dob'],
                [
                    'component' => 'Magento_Ui/js/form/element/date',
                    'config' => array_merge(
                        $addressFieldset['my_dob']['config'],
                        [
                            'elementTmpl' => 'ui/form/element/date',
                            // options of datepicker - see http://api.jqueryui.com/datepicker/
                            'options' => [
                                'dateFormat' => $this->timezone->getDateFormatWithLongYear(),
                                'yearRange' => '-120y:c+nn',
                                'maxDate' => '-1d',
                                'changeMonth' => 'true',
                                'changeYear' => 'true',
                                'showOn' => 'both',
                                'firstDay' => $this->getFirstDay(),
                            ],
                        ]
                    ),
                    'validation' => array_merge($addressFieldset['my_dob']['validation'],
                        [
                            'required-entry' => true,
                            'validate-date' => true,
                            'validate-minimum-age' => $minimumAge, // custom value in year - array('minimum_age' => 16)
                        ]
                    ),
                ]
            );
        }

        return $addressFieldset;
    }

    /**
     * Return first day of the week
     *
     * @return int
     */
    public function getFirstDay()
    {
        return (int)$this->scopeConfig->getValue(
            'general/locale/firstday',
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
    }
}

แก้ไข

ขอบคุณ @ alan-storm สำหรับคำอธิบายของคุณที่นี่https://alanstorm.com/the-curious-case-of-magento-2-mixins/และ @ jisse-reitsma นำหน้า

Plus Magento 2 doc http://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/js_mixins.html

ต้นฉบับrules.jsส่งคืนวัตถุตามตัวอักษรที่มีกฎทั้งหมด คุณสามารถปรับเปลี่ยนวัตถุนี้ตามตัวอักษรโดยการเพิ่มมิกซ์อินลงในไฟล์นี้ เอกสาร Magento ให้คำแนะนำเกี่ยวกับวิธีการทำเช่นนี้: Magento Javascript Mixins

ตอบคำถามเดียวกันที่นี่: Magento 2 เพิ่มกฎการตรวจสอบที่กำหนดเอง

แหล่งข้อมูลที่ดีสำหรับการทำความเข้าใจระบบนี้อยู่ที่นี่: https://alanstorm.com/the-curious-case-of-magento-2-mixins/

และไม่ใช่สิ่งที่คุณพยายามทำ แต่เป็นแหล่งข้อมูลที่ดีมากที่นี่: https://www.youtube.com/watch?v=0fguDL5iEd0&t=540s

มันทำงานให้ฉัน:

สร้าง requirejs-config.js ในโมดูลของคุณเพื่อเพิ่มการมิกซ์ไปยังวัตถุตัวตรวจสอบความถูกต้องของแอพ / ออกแบบ / ส่วนหน้า / ผู้ขาย / ธีม / Magento_Ui / requirejs-config.js ด้วยเนื้อหาต่อไปนี้:

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/lib/validation/rules': {
                'Magento_Ui/js/lib/validation/rules-mixin': true
            }
        }
    }
};

สร้างสคริปต์ js ลงในโฟลเดอร์โมดูลของคุณลงในแอพ / design / frontend / ผู้ขาย / ธีม / Magento_Ui / web / js / lib / การตรวจสอบ / rules-mixin.js ด้วยเนื้อหาดังต่อไปนี้:

define([
    'jquery',
    'underscore',
    'moment',
    'mage/translate'
], function ($, _, moment) {
    'use strict';

    return function (validator) {
        var validators = {
            'letters-spaces-only': [
                function (value) {
                    return /^[a-zA-Z ]*$/i.test(value);
                },
                $.mage.__('Only letters and spaces.')
            ]
        };

        validators = _.mapObject(validators, function (data) {
            return {
                handler: data[0],
                message: data[1]
            };
        });

        return $.extend(validator, validators);
    };
});