Sayangnya, pengamat hanya berguna dalam fungsi php. Ini berarti bahwa untuk suatu peristiwa yang dipicu, itu harus awalnya dikirim dispatch()baik oleh pengirim acara asli atau kustom. Dalam kasus khusus ini, tindakan yang diambil adalah mengklik tombol metode pembayaran. Klik ini tidak memicu eksekusi kode php, hanya kode Javascript yang dieksekusi.
Karena proses checkout di Magento 2 sebagian besar dibangun di sekitar Knockout JS, sebagian besar tindakan terjadi di frontend menggunakan Javascript alih-alih sisi server php.
Knockout JS sangat fleksibel dan dimungkinkan untuk mengikat acara dan mengamati variabel. Di sisi lain, mungkin membutuhkan kurva belajar yang curam.
Sudut pandang yang baik untuk melihat proyek Anda adalah menggunakan pengontrol alih-alih pengamat:
1. Mari kita mulai dengan membuat modul ...
2. Buat pengontrol yang melakukan logika Anda saat dipicu
Struktur pengontrol: http://www.example.com/route/controller_folder/action
2.1 Buat Actionkelas controller :
app / code / NameSpace / Module / Controller / Test / 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 Daftarkan rute untuk pengontrol Anda
app / code / NameSpace / Module / etc / adminhtml / routes.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 Karena ini akan digunakan pada checkout, tambahkan rute Anda ke daftar URL aman [EDIT]
app / code / 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>
3. Tambahkan file javascript pada halaman checkout menggunakan file layout berikut:
app / code / 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. Dalam skrip ini, Anda cukup menambahkan fungsi untuk mengirim permintaan posting ajax setiap kali tab metode pembayaran diklik.
Metode Terbaik - Knockout: Berlangganan dapat diamati
Cara terbaik untuk memicu acara klik tanpa memperpanjang / mengganti file inti atau memengaruhi fungsi klik asli akan melibatkan berlangganan yang dapat diamati dengan bantuan Knockout.
Metode 2 - Perpanjang kelas JS [EDIT]
Seharusnya juga ada cara untuk memperluas kelas JS awal
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();
},
});
});
Metode 3 - Mengganti pilih-pembayaran-metode.js
Bermain dengan Knockout JS kadang-kadang bisa sulit dan untuk tujuan jawaban ini kami hanya akan menimpa fungsi yang bertanggung jawab untuk mendaftarkan metode pembayaran dalam penawaran yang dipicu oleh fungsi selectPaymentMethod. Ini mungkin bukan solusi yang paling elegan dibandingkan dengan menggunakan 100% Knockout JS tetapi itu harus berfungsi sebagaimana dimaksud tanpa mempengaruhi fungsi kecuali jika pembaruan Magento masa depan akan mengganggu dengan memodifikasi fungsi asli.
Untuk lebih memahami Anda mungkin menemukan fungsi selectPaymentMethodpada baris 139 dari file ini:
Magento_Checkout / js / view / payment / default.js
1. Sekarang kita harus mendeklarasikan fungsi kita menimpa:
app / code / NameSpace / Module / view / frontend / requireejs-config.js
var config = {
map: {
'*': {
'Magento_Checkout/js/action/select-payment-method':
'NameSpace_Module/js/action/payment/select-payment-method'
}
}
};
2. Akhirnya, kami menggunakan kembali fungsi yang bertanggung jawab untuk memilih metode pembayaran dengan sedikit tambahan untuk melakukan panggilan ajax kami!
app / code / NameSpace / Module / view / frontend / web / js / action / pembayaran / 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);
}
});
Setiap kali seorang pelanggan akan mengklik pada tab metode pembayaran, metode Javascript Anda akan mengirim permintaan ajax posting ke controller Anda yang akan mengeksekusi kode php dengan logika Anda.
Ini menyentuh beberapa aspek Magento 2 yang berbeda. Meskipun saya ingin memberikan solusi cepat dan mudah untuk pertanyaan Anda, itulah cara Magento 2 dibangun. Sekarang, sebagian besar logika diterapkan sisi klien dan bahkan lebih ketika mendekati sistem checkout.
Ingatlah untuk selalu berhati-hati ketika berhadapan dengan sistem checkout, bug pada halaman checkout dapat sangat merusak toko.
CATATAN: Semua kode di atas tidak diuji
memerlukan
dan amati
karena ada banyak yang bisa diamati di sana
sumber
quote.paymentMethod.subscribe(function(method){console.log(method);}, null, 'change');Ini 2 Anda dapat mencoba sesuai
sumber