Magento 2: Pengamat Acara Untuk Pemilihan Metode Pembayaran

13

Saya sedang mengerjakan ekstensi khusus tempat saya perlu memanggil pengamat ketika metode pembayaran apa pun dipilih dari daftar metode pembayaran yang tersedia di halaman checkout frontend.

Adakah yang bisa memberi tahu saya pengamat acara mana yang harus saya gunakan untuk ini? Saya perlu memanggil fungsi khusus dan menambahkan biaya ke subtotal keranjang.

magento2 event-observer payment-methods

— Dhiren Vasoya
sumber

10

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

— ElGatito
sumber

Informasi yang benar-benar bagus

— Pandurang

5

memerlukan

'Magento_Checkout/js/model/quote'

dan amati

quote.paymentMethod.subscribe(function(){console.log('yay')}, null, 'change');

karena ada banyak yang bisa diamati di sana

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({})

— Anton S
sumber

1

Terima kasih! Bagus sekali! Selain itu, jika Anda ingin memeriksa metode pembayaran di dalam suatu fungsi, Anda dapat menggunakan argumen pertama , seperti: quote.paymentMethod.subscribe(function(method){console.log(method);}, null, 'change');

— Siarhey Uchukhlebau

0

Ini 2 Anda dapat mencoba sesuai

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
        ]);

— supriya mishra
sumber