Magento 2: Observer Event สำหรับการเลือกวิธีการชำระเงิน

13

ฉันกำลังทำงานกับส่วนขยายที่กำหนดเองที่ฉันต้องเรียกผู้สังเกตการณ์เมื่อวิธีการชำระเงินใด ๆ ถูกเลือกจากรายการวิธีการชำระเงินที่มีอยู่ในหน้าเช็คเอาต์ส่วนหน้า

มีใครบอกฉันได้ไหมที่ฉันควรใช้ผู้สังเกตการณ์เหตุการณ์นี้ ฉันต้องเรียกใช้ฟังก์ชันที่กำหนดเองและเพิ่มค่าธรรมเนียมในผลรวมย่อยของรถเข็น

magento2 event-observer payment-methods

— Dhiren Vasoya
แหล่งที่มา

10

น่าเสียดายที่ผู้สังเกตการณ์มีประโยชน์เฉพาะในฟังก์ชั่น php เท่านั้น ซึ่งหมายความว่าสำหรับเหตุการณ์ที่จะถูกเรียกมันจะต้องเริ่มต้นdispatch()อย่างใดอย่างหนึ่งโดยผู้มอบหมายเหตุการณ์พื้นเมืองหรือที่กำหนดเอง ในกรณีพิเศษนี้การดำเนินการคือคลิกปุ่มวิธีชำระเงิน การคลิกนี้ไม่เรียกใช้การเรียกใช้โค้ด php ใด ๆ รหัส Javascript เท่านั้นที่จะถูกเรียกใช้งาน

เนื่องจากกระบวนการชำระเงินใน Magento 2 ส่วนใหญ่สร้างขึ้นรอบ ๆ Knockout JS การกระทำส่วนใหญ่เกิดขึ้นที่ส่วนหน้าโดยใช้ Javascript แทนที่จะเป็น php ฝั่งเซิร์ฟเวอร์

สิ่งที่น่าพิศวง JS มีความยืดหยุ่นมากและเป็นไปได้ที่จะผูกเหตุการณ์และสังเกตตัวแปร ในอีกด้านหนึ่งอาจต้องใช้เวลาเรียนรู้ที่สูงชัน

มุมมองที่ดีในการมองหาโครงการของคุณคือใช้ตัวควบคุมแทนผู้สังเกตการณ์:

1. เริ่มต้นด้วยการสร้างโมดูล ...

2. สร้างคอนโทรลเลอร์ที่ใช้งานตรรกะของคุณเมื่อถูกเรียก

โครงสร้างตัวควบคุม: http://www.example.com/route/controller_folder/action

2.1 สร้างActionคลาสตัวควบคุม:

app / รหัส / NameSpace / โมดูล / ควบคุม / ทดสอบ / 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 / รหัส / NameSpace / โมดูล / 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 / รหัส / NameSpace / โมดูล / 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. เพิ่มไฟล์จาวาสคริปต์ในหน้าชำระเงินโดยใช้ไฟล์เลย์เอาต์ต่อไปนี้:

app / รหัส / NameSpace / โมดูล / view / ส่วนหน้า / รูปแบบ / 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 ทุกครั้งที่มีการคลิกแท็บวิธีการชำระเงิน

วิธีที่ดีที่สุด - สิ่งที่น่าพิศวง: การสมัครเป็นสมาชิกที่สามารถสังเกตได้

วิธีที่ดีที่สุดในการทริกเกอร์เหตุการณ์การคลิกโดยไม่ขยาย / ลบล้างไฟล์คอร์หรือส่งผลกระทบต่อฟังก์ชั่นการคลิกแบบดั้งเดิม

วิธีที่ 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 / ชำระเงิน / default.js

1. ตอนนี้เราต้องประกาศการแทนที่ฟังก์ชั่นของเรา:

app / รหัส / NameSpace / โมดูล / view / ส่วนหน้า / requirejs-config.js

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

2. ในที่สุดเราใช้ฟังก์ชั่นที่รับผิดชอบในการเลือกวิธีการชำระเงินอีกเล็กน้อยเพื่อทำการโทร ajax ของเรา!

app / รหัส / NameSpace / โมดูล / view / ส่วนหน้า / เว็บ / js / การกระทำ / ชำระเงิน / เลือกการชำระเงิน-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 ของคุณจะส่งคำขอโพสต์ Ajax ไปยังตัวควบคุมของคุณซึ่งจะรันโค้ด php ด้วยตรรกะของคุณ

นี่เป็นการสัมผัสกับ Magento 2 ที่แตกต่างกันหลายประการ แม้ว่าฉันจะต้องการให้คำตอบที่รวดเร็วและง่ายดายสำหรับคำถามของคุณนั่นเป็นเพียงวิธีที่ Magento 2 ถูกสร้างขึ้น ตอนนี้ส่วนใหญ่ของตรรกะจะดำเนินการด้านลูกค้าและมากยิ่งขึ้นเมื่อเข้าใกล้ระบบชำระเงิน

โปรดระมัดระวังเสมอเมื่อจัดการกับระบบการชำระเงินข้อผิดพลาดในหน้าเช็คเอาต์อาจทำให้ร้านค้าเสียหายอย่างมาก

หมายเหตุ: รหัสข้างต้นทั้งหมดยังไม่ได้ทดสอบ

— ElGatito
แหล่งที่มา

อ่านข้อมูลที่ดีอีกครั้ง

— Pandurang

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

— แอนตัน
แหล่งที่มา

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

— สุริยา mishra
แหล่งที่มา