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 validator
Objekt eine Mischung Namespace/Modulename/view/frontend/requirejs-config.js
mit 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.js
mit 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.xml
Datei etc/frontend
mit 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.php
Datei app/code/Namespace/Modulename/Plugin/Block/Checkout/LayoutProcessor.php
mit 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
Loading failed for the <script> with source “.../validator-mixin.js"
undScript error for: Namespace_Modulename/js/validator-mixin
.validator-mixin.js
Ort sollte sein:/view/frontend/web/js/validator-mixin.js
Das Original
rules.js
gibt 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 Mixinsquelle
Das gleiche Problem wurde hier beantwortet: Magento 2 fügt eine benutzerdefinierte Validierungsregel hinzu
Eine wirklich gute Quelle für das Verständnis dieses Systems ist hier: https://alanstorm.com/the-curious-case-of-magento-2-mixins/
Und nicht genau das, was Sie versuchen, aber eine sehr gute Quelle hier: https://www.youtube.com/watch?v=0fguDL5iEd0&t=540s
quelle
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:
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:
quelle