Ich mache Custom Checkout und hier ist, was ich bis jetzt gemacht habe.
Die Adea ist die Verwendung von validate. Wenn ich also auf "Weiter" klicke, wird überprüft, ob das Kontrollkästchen in "Nutzungsbedingungen" aktiviert ist. Wenn es aktiviert ist, kann es losgehen. Wenn dies nicht der Fall ist, wird eine Validierungsnachricht angezeigt.
Hier ist mein Code, den ich an Github gesendet habe, damit ihr ihn einfach ansehen und erneut verarbeiten könnt:
https://github.com/saxsax1995/MagentoCheckoutCustom
Also folge ich devdoc und mageplaza
https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_carrier.html
https://www.mageplaza.com/custom-shipping-carrier-validator-magento -2.html
Aber es funktioniert immer noch nicht.
Ich habe versucht zu console.log()in , C:\xampp\htdocs\magento\app\code\Aht\MagentoCheckoutCustom\view\frontend\web\js\view\custom-validation.jsaber es es nicht läuft.
Vermisse ich hier etwas? Ich glaube, ich habe alles getan, was Devdoc und Mageplaza gesagt haben.
Also hier ist mein Code:
C: \ xampp \ htdocs \ magento \ app \ code \ Aht \ MagentoCheckoutCustom \ view \ frontend \ layout \ checkout_index_index.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Aht_MagentoCheckoutCustom/css/style.css"/>
<!--<script src="Aht_MagentoCheckoutCustom::js/custom-validator.js"></script>-->
</head>
<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="step-config" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-rates-validation" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custom-validator" xsi:type="array">
<item name="component" xsi:type="string">Aht_MagentoCheckoutCustom/js/view/custom-validation</item>
</item>
</item>
</item>
</item>
</item>
<item name="shippingAddress" xsi:type="array">
<!--<item name="config" xsi:type="array">-->
<!--<item name="template" xsi:type="string">Aht_MagentoCheckoutCustom/custom-shipping</item>-->
<!--</item>-->
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="delivery-group" xsi:type="array">
<item name="component" xsi:type="string">Aht_MagentoCheckoutCustom/js/view/custom-shipping</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="sortOrder" xsi:type="string">150</item>
<item name="children" xsi:type="array">
<item name="delivery-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>
<item name="displayArea" xsi:type="string">delivery-fieldsets</item>
<item name="children" xsi:type="array">
<item name="delivery_instruction" 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">deliveryForm</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
</item>
<!-- value element allows to specify default value of the form field -->
<!--<item name="value" xsi:type="string">Yout value here</item>-->
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">deliveryForm.delivery_instruction</item>
<item name="label" xsi:type="string">Delivery Instruction:</item>
<item name="sortOrder" xsi:type="string">1</item>
</item>
<item name="delivery_type" 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">deliveryForm</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">Delivery Type 1</item>
<item name="value" xsi:type="string">delivery_type_1</item>
</item>
<item name="1" xsi:type="array">
<item name="label" xsi:type="string">Delivery Type 2</item>
<item name="value" xsi:type="string">delivery_type_2</item>
</item>
<item name="2" xsi:type="array">
<item name="label" xsi:type="string">Delivery Type 3</item>
<item name="value" xsi:type="string">delivery_type_3</item>
</item>
</item>
<!-- value element allows to specify default value of the form field -->
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">deliveryForm.delivery_type</item>
<item name="label" xsi:type="string">Delivery Type:</item>
<item name="sortOrder" xsi:type="string">2</item>
</item>
<item name="term_of_use" 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">deliveryForm</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">deliveryForm.term_of_use</item>
<item name="description" xsi:type="string">I accept the Terms of Use and Privacy Policy
Sorry, you must accept our Terms of Use and our Privacy Policy before placing your order</item>
<item name="sortOrder" xsi:type="string">3</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
C: \ xampp \ htdocs \ magento \ app \ code \ Aht \ MagentoCheckoutCustom \ view \ frontend \ web \ js \ model \ benutzerdefinierte Versandraten-Validierungsregeln.js
define(
[],
function () {
'use strict';
return {
getRules: function() {
return {
'term_of_use': {
'required': true
}
};
}
};
}
)
C: \ xampp \ htdocs \ magento \ app \ code \ Aht \ MagentoCheckoutCustom \ view \ frontend \ web \ js \ model \ custom-validator.js
define(
[
'jquery',
'mageUtils',
'./custom-shipping-rates-validation-rules',
'mage/translate'
],
function ($, utils, validationRules, $t) {
'use strict';
return {
validationErrors: [],
validate: function (address) {
var self = this;
this.validationErrors = [];
$.each(validationRules.getRules(), function (field, rule) {
if (rule.required && utils.isEmpty(address[field])) {
var message = $t('Field ') + field + $t(' is required.');
self.validationErrors.push(message);
}
});
return !Boolean(this.validationErrors.length);
}
};
});
C: \ xampp \ htdocs \ magento \ app \ code \ Aht \ MagentoCheckoutCustom \ view \ frontend \ web \ js \ view \ custom-validation.js
define(
[
'uiComponent',
'Magento_Checkout/js/model/shipping-rates-validator',
'Magento_Checkout/js/model/shipping-rates-validation-rules',
'Aht_MagentoCheckoutCustom/js/model/custom-validator',
'Aht_MagentoCheckoutCustom/js/model/custom-shipping-rates-validation-rules'
],
function (Component,
defaultShippingRatesValidator,
defaultShippingRatesValidationRules,
shippingRatesValidator,
shippingRatesValidationRules)
{
'use strict';
console.log('123');
defaultShippingRatesValidator.registerValidator('custom-validator', shippingRatesValidator);
defaultShippingRatesValidationRules.registerRules('custom-shipping-rates-validation-rules', shippingRatesValidationRules);
return Component;
}
);
In der sourcewird mein Modul nicht einmal aufgerufen.
Hier ist das Beschreibungsbild:
Bitte geben Sie Ratschläge, danke fürs Lesen :)
BEARBEITEN 1:
Nach einigen Tagen auf der Suche nach einer Lösung sieht es so aus, als würde die benutzerdefinierte Validierung der Lieferadresse auf diese Weise nicht funktionieren.
Ich habe eine andere Lösung gefunden. Folgen Sie dem Ereignis zum Senden des Formulars, wenn Sie in setShippingInformation-> validateShippingInformationFunktion in auf "Weiter" klickenshipping.js
C: \ xampp \ htdocs \ magento \ pub \ static \ frontend \ Magento \ luma \ de_DE \ Magento_Checkout \ js \ view \ transport.js
Ich versuche, die "Nutzungsdauer" zu validieren und anschließend eine Validierungsnachricht anzuzeigen. Im Moment ist es console.log korrekt, wenn ich auf "Weiter" klicke, aber keine korrekte Meldung anzeigt. Es zeigt immer "falsch", genau wie mein Beschreibungsbild.
Also hier ist was ich getan habe. (Ich habe auf Github aktualisiert, wenn ihr das Modul sehen wollt)
C: \ xampp \ htdocs \ magento \ app \ code \ Aht \ MagentoCheckoutCustom \ view \ frontend \ web \ js \ view \ transport.js
define([
'jquery',
'ko'
], function ($, ko) {
'use strict';
return function (Target) {
return Target.extend({
errorDeliveryValidationMessage: ko.observable(false),
validateShippingInformation: function () {
this._super();
if($('[name="term_of_use"]:checked').length > 0) {
console.log('1');
return true;
}
console.log('2');
this.errorDeliveryValidationMessage('Please agree our term of use.');
return false;
}
});
}
});
C: \ xampp \ htdocs \ magento \ app \ code \ Aht \ MagentoCheckoutCustom \ view \ frontend \ requirejs-config.js
var config = {
map: {
'*': {
'Magento_Checkout/js/model/shipping-save-processor/default': 'Aht_MagentoCheckoutCustom/js/model/shipping-save-processor/default'
}
}
,
'config': {
'mixins': {
'Magento_Checkout/js/view/shipping': {
'Aht_MagentoCheckoutCustom/js/view/shipping': true
}
}
}
};
C: \ xampp \ htdocs \ magento \ pub \ static \ frontend \ Magento \ luma \ de_DE \ Aht_MagentoCheckoutCustom \ template \ Versandlieferung \ Lieferformular.html
<form class="form form-shipping-delivery" id="co-shipping-delivery-form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
<div id="shipping-delivery" class="fieldset delivery">
<!-- ko foreach: getRegion('delivery-fieldsets') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
</form>
<div role="alert" class="message notice">
<span text="errorDeliveryValidationMessage()" />
</div>
deps:[ 'Aht_MagentoCheckoutCustom/js/custom-js' ]in requirejs-config.js verwendet, damit es auf jede Seite in Magento 2 importiert werden kann und console.log funktioniert. Das Klickereignis funktioniert jedoch nicht.Sie können
magento-initfür init Ihre benutzerdefinierte Js-Komponente verwenden und laden. Wie folgt:Schritt 1: Entfernen Sie die js-Erweiterung in requirejs-config.js
Schritt 2: Fügen Sie dem Layout checkout_index_index.xml eine Vorlagendatei hinzu (für die init js-Datei verwenden).
Und entfernen Sie import js auf dem Kopf
Schritt 3: Erstellen Sie js.phtml in view / frontend / templates und fügen Sie Inhalte ein
Schritt 4: Ändern Sie den Inhalt Ihrer js-Datei (custom-js.js).
quelle
<referenceContainer name="content">unseren neuen Block und unsere neue Vorlage erstellen? Ich meine es ist schon benutzt?checkout_index_index.xml. Beispiel gist.github.com/bangnguyen47/…Der Grund, warum Ihre
custom-validation.jsDatei nicht geladen wurde, liegt in Ihrer XML-Konfiguration.In dieser Datei haben Sie Ihren Wert hier falsch benannt:
custom-validatorist was falsch ist. Es sollte der folgenden Namenskonvention entsprechen:{shippingMethodCode}-rates-validationErsetzen{shippingMethodCode}durch den genauen Wert, den Sie für Ihre Versandart in deretc/config.xmlDatei Ihres Moduls ausgewählt haben . Zum Beispiel, wenn Sie Folgendes haben:Dann wäre Ihr Layout-XML:
Der Grund hierfür ist in (unter Bezugnahme auf Magento 2.3.2 zum Zeitpunkt des Schreibens) zu finden
Magento\Checkout\Block\Checkout\LayoutProcessor::processShippingChildrenComponents().Hier können wir sehen, dass Magento die aktiven Spediteure mit den UI-Komponenten vergleicht, die über Layout-XML hinzugefügt wurden. Es verwendet den
$carrierName(den Wert aus unserercheckout_index_index.xmlDatei) und entfernt die fest codierte Zeichenfolge von '-rates-validation' vom Namen des from UI-Komponentennamens, um ein zu erhalten$carrierKey. Vergleichen Sie dann den Spediteurschlüssel mit dem Array der aktiven Spediteurcodes (die wir in unserem hinzufügenetc/config.xml), um festzustellen, ob diese Layoutaktualisierungsanweisung entfernt werden soll oder nicht.v2.3 Dev Docs zu diesem Thema: https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_carrier.html
Darüber hinaus
custom-validation.jswürde ich empfehlen, den Inhalt nach dem Laden auf der Seite so zu ändern, dass die Werte wieder mit Ihrem Trägercode übereinstimmen.In diesen Zeilen:
Die Zeichenfolgen, die Sie hier übergeben, verwendet Magento erneut auf ähnliche Weise wie das Layout-XML. Vergleichen aktiver Träger und Bestimmen, ob die Regeln zum Satz "Beobachtbare Felder" hinzugefügt werden sollen. Wir werden das in finden
(Zeilen 52-56 von Magento 2.3.2)
carrierHier ist die Zeichenfolge, in die Sie übergegangen sindregisterValidator(), undactiveCarrierseine Reihe der aktiven Spediteure. Wenn Sie also die von Ihnen definierte Zeichenfolge Ihres Carrier-Codes nicht übergeben, können Sie keine Validierungsregeln hinzufügen.Wir werden dieselbe Logik in der
registerRules()Methode finden.Daher sollten die an
registerRules()undregisterValidator()in Ihrem übergebenen Zeichenfolgencustom-validation.jsgleich sein (was sie nicht sind, sodass mir mindestens eine nicht genau mit Ihrem Trägercode übereinstimmt).quelle