Tôi đang làm việc trên một tiện ích mở rộng tùy chỉnh nơi tôi cần gọi cho người quan sát khi bất kỳ phương thức thanh toán nào được chọn từ danh sách phương thức thanh toán có sẵn trên trang thanh toán frontend.
Bất cứ ai có thể cho tôi biết tôi nên sử dụng trình quan sát sự kiện nào cho việc này? Tôi cần gọi một chức năng tùy chỉnh và thêm phí vào tổng phụ của giỏ hàng.
Câu trả lời:
Thật không may, các trình quan sát chỉ hữu ích trong các hàm php. Điều này có nghĩa là để một sự kiện được kích hoạt, nó phải được gửi đi dispatch()bởi một người điều phối sự kiện gốc hoặc tùy chỉnh. Trong trường hợp cụ thể này, hành động được thực hiện là nhấp chuột vào nút phương thức thanh toán. Nhấp chuột này không kích hoạt bất kỳ thực thi mã php nào, chỉ mã Javascript được thực thi.
Vì quá trình thanh toán trong Magento 2 hầu hết được xây dựng xung quanh Knockout JS, hầu hết các hành động xảy ra trên frontend bằng Javascript thay vì phía máy chủ php.
Knockout JS rất linh hoạt và có thể liên kết các sự kiện và quan sát các biến. Mặt khác, nó có thể yêu cầu một đường cong học tập dốc.
Một góc nhìn tốt cho dự án của bạn sẽ là sử dụng bộ điều khiển thay vì người quan sát:
Cấu trúc bộ điều khiển: http://www.example.com/route/controll_folder/action
2.1 Tạo Actionlớp trình điều khiển :
ứng dụng / mã / NameSpace / Module / Trình điều khiển / Kiểm tra / Action.php
namespace NameSpace\Module\Controller\Test;
class Action extends \Magento\Framework\App\Action\Action
{
public function execute()
{
$request = $this->getRequest();
//EXECUTE YOUR LOGIC HERE
}
}2.2 Đăng ký lộ trình cho bộ điều khiển của bạn
ứng dụng / mã / NameSpace / Module / etc / adminhtml / Rout.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="route" frontName="route">
<module name="NameSpace_Module" />
</route>
</router>
</config>2.3 Vì điều này sẽ được sử dụng khi thanh toán, hãy thêm tuyến đường của bạn vào danh sách URL an toàn [EDIT]
ứng dụng / mã / NameSpace / Module / etc / di.xml
<?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\Framework\Url\SecurityInfo">
<arguments>
<argument name="secureUrlList" xsi:type="array">
<item name="route" xsi:type="string">/route/</item>
</argument>
</arguments>
</type>
</config>ứng dụng / mã / NameSpace / Module / view / frontend / layout / checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<link src="NameSpace_Module::js/payment-method-trigger.js"/>
</head>
</page>4. Trong tập lệnh này, bạn có thể chỉ cần thêm một chức năng để gửi yêu cầu bài đăng ajax mỗi khi nhấp vào tab phương thức thanh toán.
Cách tốt nhất để kích hoạt sự kiện nhấp mà không cần mở rộng / ghi đè tập tin lõi hoặc tác động đến chức năng nhấp ban đầu sẽ liên quan đến việc đăng ký một quan sát với sự trợ giúp của Knockout.
Cũng cần có một cách để mở rộng lớp JS ban đầu
define([
'NameSpace_Module/path/to/original/file', //JS FILE TO EXTEND
], function (originalFile) { //PASS AS A PARAMETER
'use strict';
return originalFile.extend({ //EXTEND
//FUNCTIONS ADDED HERE WILL OVERRIDE FUNCTIONS
//FROM ORIGINAL CLASS IF ALREADY EXISTS
someFunction: {
someLogic();
},
});
});Chơi với Knockout JS đôi khi có thể rất tế nhị và vì mục đích của câu trả lời này, chúng tôi sẽ đơn giản ghi đè chức năng chịu trách nhiệm đăng ký phương thức thanh toán trong trích dẫn được kích hoạt bởi hàm selectPaymentMethod. Nó có thể không phải là giải pháp tao nhã nhất so với sử dụng 100% Knockout JS nhưng nó sẽ hoạt động như dự định mà không ảnh hưởng đến bất kỳ chức năng nào trừ khi bản cập nhật Magento trong tương lai sẽ can thiệp bằng cách sửa đổi chức năng ban đầu.
Để hiểu rõ hơn bạn có thể tìm thấy hàm selectPaymentMethodtrên dòng 139 của tệp này:
Magento_Checkout / js / lượt xem / thanh toán / default.js
1. Bây giờ chúng ta phải khai báo chức năng ghi đè của chúng tôi:
ứng dụng / mã / NameSpace / Module / view / frontend / allowjs-config.js
var config = {
map: {
'*': {
'Magento_Checkout/js/action/select-payment-method':
'NameSpace_Module/js/action/payment/select-payment-method'
}
}
};2. Cuối cùng, chúng tôi sử dụng lại chức năng chịu trách nhiệm chọn phương thức thanh toán với một chút bổ sung để thực hiện cuộc gọi ajax của chúng tôi!
ứng dụng / mã / NameSpace / Module / view / frontend / web / js / action / Payment / select-Payment-method.js
define(
[
'jquery',
'uiComponent',
'ko',
'Magento_Checkout/js/model/quote',
], function ($, uiComponent, ko, quote) {
'use strict';
function () {
$.ajax({
showLoader: true,
url: 'http://www.example.com/route/controller_folder/action',
data: { action : 1, param : 2},
type: "POST",
dataType: 'json'
}).done(function (data) {
alert('Request Sent');
});
};
return function (paymentMethod) {
quote.paymentMethod(paymentMethod);
}
});Mỗi khi khách hàng nhấp vào tab phương thức thanh toán, phương thức Javascript của bạn sẽ gửi yêu cầu đăng bài ajax đến bộ điều khiển của bạn để thực thi mã php bằng logic của bạn.
Điều này chạm vào một số khía cạnh Magento 2 khác nhau. Mặc dù tôi muốn cung cấp một giải pháp nhanh chóng và dễ dàng cho câu hỏi của bạn, đó chỉ là cách Magento 2 đã được xây dựng. Bây giờ, một phần lớn của logic được triển khai phía máy khách và thậm chí nhiều hơn khi tiếp cận hệ thống thanh toán.
Hãy nhớ luôn luôn cẩn thận khi giao dịch với hệ thống thanh toán, một lỗi trên trang thanh toán có thể làm tổn thương một cửa hàng rất nặng.
LƯU Ý: Tất cả các mã ở trên chưa được kiểm tra
yêu cầu
'Magento_Checkout/js/model/quote'và quan sát
quote.paymentMethod.subscribe(function(){console.log('yay')}, null, 'change');vì có nhiều thứ để quan sát ở đó
var billingAddress = ko.observable(null);
var shippingAddress = ko.observable(null);
var shippingMethod = ko.observable(null);
var paymentMethod = ko.observable(null);
var totals = ko.observable(totalsData);
var collectedTotals = ko.observable({})quote.paymentMethod.subscribe(function(method){console.log(method);}, null, 'change');
2 bạn có thể thử cho phù hợp
app/code/Magento/Payment/Model/Method/Adapter.php
payment_method_is_active
$this->eventManager->dispatch(
'payment_method_is_active',
[
'result' => $checkResult,
'method_instance' => $this,
'quote' => $quote
]);
Or
app/code/Magento/Payment/Model/Method/Adapter.php
payment_method_assign_data_
$this->eventManager->dispatch(
'payment_method_assign_data_' . $this->getCode(),
[
'method' => $this,
'data' => $data
]);