WooCommerce AJAX เพิ่มในรถเข็น – บทช่วยสอนทีละขั้นตอน

เผยแพร่แล้ว: 2019-11-20

เมื่อหลายสัปดาห์ก่อน เราได้พูดถึงวิธีเพิ่มฟังก์ชันรถเข็นโดยทางโปรแกรมเพื่อเพิ่มยอดขายของคุณ วันนี้ เราจะมาดู วิธีการใช้ AJAX ในปุ่ม Add to cart ในผลิตภัณฑ์ WooCommerce สิ่งนี้จะปรับปรุงประสบการณ์ของผู้ใช้และกระบวนการขายโดยรวม ซึ่งจะช่วยให้คุณเพิ่มประสิทธิภาพร้านค้าและเพิ่มรายได้ของคุณ

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

ในคู่มือนี้ เราจะแสดงวิธีการทีละขั้นตอน

ประโยชน์ของ AJAX ใน WooCommerce

สรุป ประโยชน์ของการใช้ AJAX ในร้านค้าของคุณคือ:

  • ลดภาระของเซิร์ฟเวอร์และแบนด์วิดธ์
  • เร่งกระบวนการซื้อ
  • ปรับปรุงประสบการณ์ของลูกค้า
  • ลดการละทิ้งรถเข็น
  • เพิ่มอัตราการแปลง

บทช่วยสอน: WooCommerce AJAX เพิ่มในรถเข็น

ในการใช้ฟังก์ชัน AJAX add to cart ใน WooCommerce มีสองตัวเลือก:

  1. ด้วยปลั๊กอิน
  2. เข้ารหัสด้วยตัวเอง

มาดูแต่ละวิธีกัน

1) AJAX หยิบใส่ตะกร้าด้วยปลั๊กอิน

หากคุณไม่มีประสบการณ์ในการเขียนโค้ดหรือต้องการวิธีแก้ปัญหาง่ายๆ การใช้ปลั๊กอินเป็นทางเลือกที่ดี เพียงดาวน์โหลดปลั๊กอิน AJAX เพิ่มลงในตะกร้าสินค้า WooCommerce ติดตั้งแล้วซอฟต์แวร์จะจัดการส่วนที่เหลือเอง

Ajax หยิบใส่ตะกร้าสำหรับ WooCommerce

AJAX หยิบใส่ตะกร้า สำหรับ WooCommerce เป็นหนึ่งในปลั๊กอินที่ดีที่สุดในการเพิ่ม AJAX ลงในปุ่ม เพิ่มในรถเข็น ของ WooCommerce เครื่องมือนี้ช่วยให้ผู้ซื้อรวมสินค้ารายการเดียวหรือสินค้าผันแปรในรถเข็นได้โดยไม่ต้องโหลดเว็บไซต์ใหม่ทุกครั้ง ที่ยิ่งไปกว่านั้นคือมันทำงานได้อย่างราบรื่นใน 99% ของธีม WordPress และไม่ต้องตั้งค่าเริ่มต้นใดๆ เมื่อคุณติดตั้งแล้ว ก็พร้อมใช้งานได้เลย

2) รหัสเอง

คุณมีทักษะในการเขียนโปรแกรมและต้องการปรับแต่งปุ่ม เพิ่ม WooCommerce AJAX ในรถเข็น หรือไม่? ในคู่มือนี้ เราจะแสดงวิธีการทีละขั้นตอน

A) ติดตั้งธีมลูก

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

B) รวมไฟล์ JavaScript (JS)

ในไฟล์ functions.php ของธีมลูก ให้รวมไฟล์ JavaScript โดยใช้ wp_enqueue_script hook นี่เป็นหนึ่งในตะขอยอดนิยมที่ WordPress เสนอให้ปรับแต่งเว็บไซต์ มาดูสคริปต์ที่มีไฟล์ ajax_add_to_cart.js ด้านล่างกัน:

 ฟังก์ชัน ql_woocommerce_ajax_add_to_cart_js () {
    if (function_exists('is_product') && is_product()) {  
       wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') '/js/ajax_add_to_cart.js', array('jquery'),'1.0' );
    }
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');

ด้วยเงื่อนไข if (function_exists('is_product') && is_product()) ในบรรทัดที่ 2 คุณต้องแน่ใจว่า JQuery ถูกนำไปใช้กับหน้าผลิตภัณฑ์เท่านั้น

C) สร้างไฟล์ JS

เมื่อคุณทำเสร็จแล้ว ให้สร้างไฟล์ที่คุณรวมไว้ในขั้นตอนก่อนหน้า เพียงไปที่ cPanel ของคุณแล้วไปที่ โฟลเดอร์ธีมลูก หลังจากนั้น ไปตามเส้นทาง wp_content /themes/ folder ที่นั่น ให้สร้างโฟลเดอร์ใหม่ในธีมย่อยที่เรียกว่า js จากนั้นสร้างไฟล์ในนั้นด้วยชื่อเดียวกับที่คุณใช้ใน hook ajax-add-to-cart.js โปรดทราบว่าขั้นตอนนี้ยังใช้ได้แม้ว่าคุณจะใช้ไคลเอนต์ FTP หากธีมลูกของคุณมีโฟลเดอร์ JS อยู่แล้ว คุณสามารถใช้มันได้โดยไม่ต้องสร้างใหม่

D) ไฟล์ JQuery/JS

ขั้นตอนต่อไปคือการทำงานกับไฟล์ JQuery ที่คุณได้อัปโหลดในธีมย่อยของคุณ ไฟล์นั้นว่างเปล่า ดังนั้นคุณต้องเพิ่มสคริปต์ ขั้นแรก ป้องกันไม่ให้ปุ่ม เพิ่มในรถเข็น โหลดหน้าเว็บใหม่ด้วยสคริปต์ต่อไปนี้:

 $('.single_add_to_cart_button').on('click', function(e) { 
    e.preventDefault();
});

โปรดทราบว่าเราใช้ตัวเลือก $('.single_add_to_cart_button') เพื่อทริกเกอร์การโทร AJAX เมื่อมีการคลิกปุ่ม คุณต้องเข้าใจสิ่งนี้เพราะสคริปต์ต่อไปนี้ทั้งหมดจะเข้าไปอยู่ในฟังก์ชันนี้

E) JQuery WooCommerce AJAX เพิ่มในรถเข็นสำหรับผลิตภัณฑ์เดียว

ดังนั้นสคริปต์ JQuery แบบเต็มสำหรับ AJAX ที่เพิ่มในรถเข็นในผลิตภัณฑ์เดียวคือ:

 jQuery (เอกสาร). พร้อม (ฟังก์ชั่น ($) {
    $('.single_add_to_cart_button').on('คลิก', ฟังก์ชัน (e){ 
    e.preventDefault();
    $thisbutton = $(นี่)
                $form = $thisbutton.closest('form.cart'),
                id = $ thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || ผลิตภัณฑ์ 1,
                product_id = $form.find('input[name=product_id]').val() || รหัส,
                รูปแบบ_id = $form.find('input[name=variation_id]').val() || 0;
    ข้อมูล var = {
            การกระทำ: 'ql_woocommerce_ajax_add_to_cart',
            product_id: ผลิตภัณฑ์_id,
            product_sku: '',
            ปริมาณ: product_qty,
            รูปแบบ_id: รูปแบบ_id,
        };
    $.ajax({
            ประเภท: 'โพสต์',
            URL: wc_add_to_cart_params.ajax_url,
            ข้อมูล: ข้อมูล
            beforeSend: ฟังก์ชัน (ตอบกลับ) {
                $thisbutton.removeClass('added').addClass('กำลังโหลด');
            },
            สมบูรณ์: ฟังก์ชั่น (ตอบสนอง) {
                $thisbutton.addClass('added').removeClass('กำลังโหลด');
            }, 
            ความสำเร็จ: ฟังก์ชัน (การตอบสนอง) { 
                ถ้า (response.error & response.product_url) {
                    window.location = response.product_url;
                    กลับ;
                } อื่น { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) สคริปต์ PHP

หลังจากนั้น คุณต้องมีตัวจัดการ PHP วิธีที่ดีที่สุดคือการใช้ WooCommerce filter hooks เพื่อสร้างฟังก์ชัน add to cart คราวนี้คุณจะทำได้โดยใช้ AJAX เพียงคัดลอกและวางสคริปต์ต่อไปนี้ในไฟล์ functions.php ของธีมย่อยด้านล่างสคริปต์ก่อนหน้าที่เราใช้ในการรวมไฟล์ JS

 add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'); 
add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');          
ฟังก์ชัน ql_woocommerce_ajax_add_to_cart () {  
    $product_id = Apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantity = ว่างเปล่า($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
    $variation_id = แอ็บซินท์($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', จริง, $product_id, $quantity);
    $product_status = get_post_status($product_id); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'เผยแพร่' === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            ถ้า ('ใช่' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $quantity), true); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } อื่น { 
                $data = อาร์เรย์ ( 
                    'ผิดพลาด' => จริง
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                เสียงสะท้อน wp_send_json($data);
            }
            wp_die();
        }

แค่นั้นแหละ! คุณเพิ่งสร้าง ปุ่ม เพิ่มในรถเข็น WooCommerce AJAX ของคุณ! แต่คุณรู้ได้อย่างไรว่าคุณทำทุกอย่างถูกต้องแล้ว? คุณสามารถตรวจสอบได้อย่างง่ายดาย เมื่อคุณคลิกที่ปุ่มหยิบสินค้า ควร เพิ่ม สินค้าลงในตะกร้าโดยไม่ต้องโหลดหน้าซ้ำ

บทสรุป

โดยรวมแล้ว หากคุณต้องการเพิ่มประสิทธิภาพร้านค้าของคุณ ฟังก์ชัน WooCommerce AJAX เพิ่มในรถเข็น เป็นสิ่งจำเป็น วิธีง่ายๆ ในการใช้งานคือการใช้ปลั๊กอิน AJAX add to cart WooCommerce อย่างไรก็ตาม หากคุณมีทักษะในการเขียนโค้ด คุณสามารถเขียนโค้ด AJAX ลงในรถเข็น ด้วยธีมย่อยและ PHP เล็กน้อยตามที่อธิบายไว้ข้างต้น

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

สุดท้าย สำหรับคำแนะนำเพิ่มเติมเกี่ยวกับ WooCommerce เราขอแนะนำให้คุณดูคำแนะนำเกี่ยวกับวิธีการเพิ่มผลิตภัณฑ์ WooCommerce และวิธีสร้างคุณลักษณะผลิตภัณฑ์เริ่มต้นใน WooCommerce