Regel zu rules.js Magento2 hinzufügen

10

Wie füge ich neue Regeln zu rules.js hinzu? Ich habe extra-rules.js erstellt

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')
    );
});

Wie füge ich diese Regel zu rules.js zusammen?

G Strato
quelle

Antworten:

19

Hier ist ein vollständiges und realistisches Beispiel zum Hinzufügen einer benutzerdefinierten Regel zum Auschecken des Eingabefelds zum Überprüfen des Mindestalters:

Erstellen Sie in Ihrem Modul eine requirejs-config.js, um dem validatorObjekt eine Mischung Namespace/Modulename/view/frontend/requirejs-config.jsmit folgendem Inhalt hinzuzufügen :

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

Erstellen Sie ein js-Skript in Ihrem Modulordner Namespace/Modulename/view/frontend/web/js/validator-mixin.jsmit folgendem Inhalt:

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

VERWENDUNGSZWECK

Wenn Sie ein Magento PHP-Plugin verwenden möchten, um ein Eingabefeld in Ihre Versandadresse für die Kasse einzufügen und den Inhalt dieses Felds mit der zuvor hinzugefügten benutzerdefinierten Regel zu überprüfen, finden Sie hier einen Beispielcode:

Erstellen Sie eine di.xmlDatei etc/frontendmit folgendem Inhalt im Ordner Ihres Moduls:

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

Erstellen Sie dann die LayoutProcessor.phpDatei app/code/Namespace/Modulename/Plugin/Block/Checkout/LayoutProcessor.phpmit dem folgenden Inhalt, und aktualisieren Sie sie für Ihre Anforderungen:

<?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
        );
    }
}

BEARBEITEN

Vielen Dank an @ alan-Storm für Ihre Erklärung hier https://alanstorm.com/the-curious-case-of-magento-2-mixins/ und @ jisse-reitsma bringen die Richtung

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

Sylvain Rayé
quelle
1
Ich bekomme einen Fehler Loading failed for the <script> with source “.../validator-mixin.js"und Script error for: Namespace_Modulename/js/validator-mixin.
Jurģis Toms Liepiņš
1
validator-mixin.jsOrt sollte sein:/view/frontend/web/js/validator-mixin.js
Jurģis Toms Liepiņš
1
Funktioniert nicht, Magento 2 ignoriert dies einfach
Cjohansson
@cjohansson wahrscheinlich, weil es für ein Magento 2.1 und 2.2 Projekt gemacht wurde. Wenn Sie 2.3 verwenden, ist dies möglicherweise nicht mehr möglich. In unserem Fall funktionierte es für die von mir erwähnte Version
Sylvain Rayé
1

Das Original rules.jsgibt ein Objektliteral zurück, das alle Regeln enthält. Sie können dieses Objektliteral ändern, indem Sie dieser Datei ein Mixin hinzufügen. Die Magento-Dokumente enthalten einige Anleitungen dazu: Magento Javascript Mixins

Jisse Reitsma
quelle
0

Es funktioniert für mich:

Erstellen Sie eine requirejs-config.js in Ihrem Modul, um dem Validator-Objekt eine Mischung mit dem folgenden Inhalt zu app / design / frontend / Vendor / Theme / Magento_Ui / requirejs-config.js hinzuzufügen:

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

Erstellen Sie ein JS-Skript in Ihrem Modulordner in App / Design / Frontend / Vendor / Theme / Magento_Ui / Web / JS / Lib / Validation / Rules-Mixin.js mit folgendem Inhalt:

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);
    };
});
m1kash
quelle