Tôi đang thực hiện Thanh toán tùy chỉnh và đây là những gì tôi đã thực hiện cho đến bây giờ.
Adea là để sử dụng xác thực để khi tôi nhấp vào nút "Tiếp theo", nó sẽ kiểm tra xem hộp kiểm trong "Điều khoản sử dụng", nếu được chọn, thì nó sẽ tự do, nhưng nếu không, thông báo xác thực sẽ xuất hiện.
Đây là mã của tôi, tôi đã chuyển sang github để các bạn có thể dễ dàng xem và làm lại thủ tục:
https://github.com/saxsax1995/MagentoCheckoutCustom
Vì vậy, tôi đã theo dõi devdoc và mageplaza
https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_carrier.html
https://www.mageplaza.com/custom-shipping-carrier-validator-magento -2.html
Nhưng nó vẫn không hoạt động.
Tôi đã cố gắng để console.log()vào C:\xampp\htdocs\magento\app\code\Aht\MagentoCheckoutCustom\view\frontend\web\js\view\custom-validation.jsnhưng nó không chạy đến đó.
Tôi có thiếu một cái gì đó ở đây? Tôi nghĩ rằng tôi đã làm mọi thứ mà devdoc và mageplaza nói.
Vì vậy, đây là mã của tôi:
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 \ custom-Shipping-Rate-verify-Rules.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-verify.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;
}
);
Trong sourceđó, nó thậm chí không được gọi trong mô-đun của tôi.
Dưới đây là hình ảnh mô tả:
Xin vui lòng cho lời khuyên, cảm ơn vì đã đọc :)
EDIT 1:
Sau vài ngày tìm kiếm giải pháp, có vẻ như xác thực tùy chỉnh cho địa chỉ giao hàng không hoạt động theo cách này.
Tôi đã tìm thấy một giải pháp khác, hãy theo dõi sự kiện biểu mẫu gửi khi chúng tôi nhấp vào "Tiếp theo" trong setShippingInformation-> validateShippingInformationchức năng trongshipping.js
C: \ xampp \ htdocs \ magento \ pub \ static \ frontend \ Magento \ luma \ en_US \ Magento_Checkout \ js \ view \ Shipping.js
Những gì tôi đang cố gắng làm là xác nhận "thời hạn sử dụng", và sau đó hiển thị thông báo xác thực sau nó. Ngay bây giờ, nó console.log chính xác khi tôi nhấp vào nút "Tiếp theo", nhưng không hiển thị thông báo chính xác. Nó luôn hiển thị "sai" giống như hình ảnh mô tả của tôi.
Vì vậy, đây là những gì tôi đã làm. (Tôi đã cập nhật trên github nếu các bạn muốn xem mô-đun)
C: \ xampp \ htdocs \ magento \ app \ code \ Aht \ MagentoCheckoutCustom \ view \ frontend \ web \ js \ view \ Shipping.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 \ allowjs-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 \ en_US \ Aht_MagentoCheckoutCustom \ template \ Shipping-Delivery \ Delivery-form.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>