Magento 2：支払い方法選択のイベントオブザーバー

13

フロントエンドチェックアウトページの利用可能な支払い方法リストから支払い方法が選択されたときにオブザーバーを呼び出す必要があるカスタム拡張機能に取り組んでいます。

誰がこれにどのイベントオブザーバーを使用すべきか教えてもらえますか？カスタム関数を呼び出して、カートの小計に料金を追加する必要があります。

ここに画像の説明を入力してください

magento2  event-observer  payment-methods 
— ディレン・ヴァソヤ
ソース

回答:

10

残念ながら、オブザーバーはphp関数内でのみ役立ちます。つまり、イベントをトリガーするには、最初にdispatch()ネイティブまたはカスタムイベントディスパッチャーによってディスパッチする必要があります。この特定の場合、実行されるアクションは、支払い方法ボタンをクリックすることです。このクリックはphpコードの実行をトリガーせず、Javascriptコードのみが実行されます。

Magento 2のチェックアウトプロセスは主にKnockout JSを中心に構築されているため、ほとんどのアクションはサーバーサイドphpではなくJavascriptを使用してフロントエンドで発生します。

Knockout JSは非常に柔軟であり、イベントをバインドして変数を監視することができます。一方、急な学習曲線が必要になる場合があります。

あなたのプロジェクトを見るのに良い角度は、オブザーバーの代わりにコントローラーを使用することです：

1.モジュールを作成することから始めましょう...

2.トリガーされたときにロジックを実行するコントローラーを作成する

コントローラー構造： http : //www.example.com/route/controller_folder/action

2.1コントローラーActionクラスを作成します。

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コントローラーのルートを登録する

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これはチェックアウトで使用されるため、安全なURLリストにルートを追加します[編集]

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.次のレイアウトファイルを使用して、チェックアウトページにjavascriptファイルを追加します。

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.このスクリプトでは、支払い方法タブがクリックされるたびにajax投稿リクエストを送信する関数を追加するだけです。

最良の方法-ノックアウト：オブザーバブルへのサブスクライブ

コアファイルを拡張/オーバーライドせずに、または元のクリック機能に影響を与えずにクリックイベントをトリガーする最良の方法は、Knockoutを使用してオブザーバブルをサブスクライブすることです。

方法2-JSクラスの拡張[編集]

初期のJSクラスを拡張する方法も必要です。

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();
        },


    });
});

方法3-select-payment-method.jsのオーバーライド

Knockout JSで遊ぶのは微妙な場合があり、この答えの目的のために、selectPaymentMethod関数によってトリガーされる見積もりに支払い方法を登録する機能をオーバーライドします。100％Knockout JSを使用する場合に比べて最も洗練されたソリューションではないかもしれませんが、将来のMagentoの更新が元の関数の変更によって干渉しない限り、機能に影響を与えることなく意図したとおりに動作します。

理解を深めるために、selectPaymentMethodこのファイルの行139に関数を見つけることができます。

Magento_Checkout / js / view / payment / default.js

1.次に、関数のオーバーライドを宣言する必要があります。

app / code / NameSpace / Module / view / frontend / requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/action/select-payment-method':
                'NameSpace_Module/js/action/payment/select-payment-method'
        }
    }
};

2.最後に、少し追加して支払い方法を選択する関数を再利用して、ajax呼び出しを行います！

app / code / 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);
        }
});

顧客が支払い方法タブをクリックするたびに、Javascriptメソッドはコントローラーにpost ajaxリクエストを送信し、コントローラーはロジックでphpコードを実行します。

これはいくつかの異なるMagento 2の側面に影響を与えます。私はあなたの質問に対する迅速で簡単な解決策を提供したいと思いますが、それがMagento 2の構築方法です。現在、ロジックの大部分はクライアント側で実装されており、チェックアウトシステムに近づくとさらに実装されます。

チェックアウトシステムを扱うときは常に注意することを忘れないでください。チェックアウトページのバグはストアをひどく傷つける可能性があります。

注：上記のすべてのコードはテストされていません

— エルガティト
ソース
本当に良い情報
— パンドゥラン
5

必要とする 

'Magento_Checkout/js/model/quote'

そして観察する 

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

そこに観察することがたくさんあるので 

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({})
— アントンS
ソース
1
ありがとうございました！よく働く！あなたが関数内でのお支払い方法を確認したい場合はまた、あなたが使用することができ、最初の引数：のような、 quote.paymentMethod.subscribe(function(method){console.log(method);}, null, 'change');
— Siarhey Uchukhlebau
0

これら2あなたはそれに応じて試すことができます 

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
        ]);
— スプリヤ・ミシュラ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.