ปลั๊กอิน 2C2P WooCommerce ใช้ไม่ได้ แก้ยังไง [2C2P Redirect API for WooCommerce]

เริ่มจากโจทย์… เชื่อมเว็บขายของ E-Commerce กับ 2c2p

พอดีผมมีงานทำเว็บไซต์ขายของออนไลน์ WooCommerce & WordPress เข้ามางานนึง ซึ่งลูกค้าใช้ Payment Gateway ของ 2C2P ครับ โดยผมได้มีการประสานงานกับทีมไอทีเรียบร้อยครับ

โดยที่ทาง 2C2P ให้แจ้งมาว่า หากใช้ WooCommerce สามารถใช้ Plugin สำเร็จรูปได้เลย โดยใช้ Link นี้ครับ

โดยที่ผมเอามาลงครับ พอทดสอบการใช้งานเท่านั้นแหละครับ พัง!

เอ๊ะ เว็บผมก็ปกตินะ ปลั๊กอินก็ใช้น้อยมาก ทำไมถึงพัง

ผมลองเช็ค Error log จาก console (F12) ดูครับ ว่าเกิดอะไรขึ้น เลยอ๋อเลยครับ

ใน Console แจ้งว่า

Uncaught TypeError: $(…).live is not a function
at HTMLDocument. (wc-2c2p-script.is:4)

ผมเลยเข้าไปเช็คเว็บของ Plugin ครับ ว่าทำไม

Plugin ตัวนี้ UPDATE ครั้งสุดท้าย 5 ปีแล้วครับ (นับจากวันที่เขียนบทความนี้ น่าจะ 2017 ครับ)

ในเมื่อเขาไม่แก้ ผมก็แก้เองครับ

วิธีแก้

หากเข้าแก้ไขไฟล์ 2c2p-redirect-api-for-woocommerce/Includes/wc-2c2p-script.js แล้ว จะสังเกตแถวที่ 4 และ 15 ครับ

ถ้าอ่านตาม Error Log ด้านบนนั่นคือ ในโค้ดมีฟังค์ชั่น .live() ที่เก่าแล้วครับ โดยปัจจุบันฟังค์ชั่นี้ถูกลบไปแล้วใน JQuery เวอร์ชั่นใหม่

โดยปัจจุบันใช้เป็น .on() แทนครับ

โค้ดต้นฉบับ

jQuery(document).ready(function($) {

    //Hide remove button when user select first option from dropdown (l'll use my new card)
    $('#wc_2c2p_stored_card').live('change', function() {
        var value = $('#wc_2c2p_stored_card').val();

        if (value === "0") {
            $('#btn_2c2p_remove').hide();
        } else {
            $('#btn_2c2p_remove').show();
        }
    });

    //Button click event
    $('#btn_2c2p_remove').live('click', function() {
		if($("#wc_2c2p_stored_card").val() === "0"){
			alert("Please select card number to delete.");
			return;
		}

เวอร์ชั่นที่แก้ไขแล้ว

jQuery(document).ready(function($) {

    //Hide remove button when user select first option from dropdown (l'll use my new card)
    $('#wc_2c2p_stored_card').on('change', function() {
        var value = $('#wc_2c2p_stored_card').val();

        if (value === "0") {
            $('#btn_2c2p_remove').hide();
        } else {
            $('#btn_2c2p_remove').show();
        }
    });

    //Button click event
    $('#btn_2c2p_remove').on('click', function() {
		if($("#wc_2c2p_stored_card").val() === "0"){
			alert("Please select card number to delete.");
			return;
		}

เผื่อมือใหม่งง ทำตาม GIF นี้ได้เลยครับ ไม่ต้องกลัวพัง

ทำทั้งหมดเสร็จแล้วกด Save ได้เลยครับ

สุดท้ายนี้ ผมใจลึก ๆ ก็อยากให้ทาง 2C2P เล็งเห็นว่า WooCommerce เป็น E-Commerce System ที่เป็นที่แพร่หลายมาก ๆ ครับ อยากให้ทางผู้พัฒนาแก้ไขปัญหานี้ เพื่อให้ผู้ใช้หรือ Developer ปิดงานได้ง่ายขึ้นครับ ขยายฐานลูกค้าฝั่ง WooCommerce ให้มากขึ้นครับ 😂

เวิร์คหรือไม่เวิร์ค ทิ้งความเห็นไว้ได้เลยนะครับ