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>