Ajax là một trong những thủ thuật để biến website wordpress của bạn được trãi nghiệm tốt hơn. Tuy nhiên hiện tại một số bạn cài plugin hỗ trợ ajax nhiều dẫn đến tốc độ website bị giảm. Hôm nay THCmedia xin được chia sẻ cho các bạn các để làm nút thêm vào giỏ hàng hoặc mua ngay,… bằng Ajax một cách dễ dàng và nhanh chóng.

*Lưu ý: Cách này còn có thể giúp bạn làm Ajax cho tất cả các nút mà bạn muốn trên WordPress

1. Xác định nút làm Ajax và mục tiêu sau khi thực hiện Ajax thành công:

Ở đây mình có một đoạn code dùng để bắt sự kiện click vào nút và gọi ajax bằng jQuery:

$(document).on('click', '.thcmedia_btn', function (e) {
    e.preventDefault();

    var $thisbutton = $(this),
        $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,
        variation_id = $form.find('input[name=variation_id]').val() || 0;

    var data = {
        action: 'woocommerce_ajax_add_to_cart',
        product_id: product_id,
        product_sku: '',
        quantity: product_qty,
        variation_id: variation_id,
    };

    $(document.body).trigger('adding_to_cart', [$thisbutton, data]);
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/wp-admin/admin-ajax.php',
        data: data,
        beforeSend: function (response) {
            $thisbutton.html('Loading...')
        },
        complete: function (response) {
            $thisbutton.html('Mua ngay')
        },
        success: function (response) {

            if (response.error && response.product_url) {
                window.location = response.product_url;
                return;
            } else {
                $(document.body).trigger('added_to_cart', 
                    [response.fragments, response.cart_hash, $thisbutton]);
            }
        },
    });

    return false;
});

Lấy những thông số cần thiết để đưa vào biến sử dụng để gọi dữ liệu:

var $thisbutton = $(this), 
    $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, 
    variation_id = $form.find('input[name=variation_id]').val() || 0;

Lưu ý: Trong mục data gửi đến cho server ta cần phải truyền tham số action là hành động được tạo ra để gọi dữ liệu “action: ‘woocommerce_ajax_add_to_cart'”

2. Tiếp theo tạo hàm thực thi Ajax trong function.php hoặc file nào bạn define các hàm cho WordPress

Dưới đây là đoạn code để thêm thông tin vào Giỏ hàng của Woocommer. Các thông số chính sẽ được đưa vào thực thi như sau:

  1. Số lượng sản phẩm.
  2. ID sản phẩm
  3. Trạng thái sản phẩm và các biến thể.
add_action('wp_ajax_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');
add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');

function woocommerce_ajax_add_to_cart()
{

    $product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity);
    $product_status = get_post_status($product_id);

    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) {

        do_action('woocommerce_ajax_added_to_cart', $product_id);

        if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
            wc_add_to_cart_message(array($product_id => $quantity), true);
        }

        WC_AJAX:: get_refreshed_fragments();
    } else {

        $data = array(
            'error' => true,
            'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));

        echo wp_send_json($data);
    }

    wp_die();
}

Sau khi thực thi việc thêm sản phẩm vào Giỏ hàng ta tiến hành update lại tổng của giỏ hàng và cập nhật trạng thái của giỏ hàng.

Lúc này giỏ hàng của chúng ta sẽ được cập nhật tuy nhiên ở Front End lúc này vẫn chưa có gì thay đổi. Chúng ta cần trả dữ liệu về cho Front End để thể hiện sự thay đổi. Phương thức truyền ở đây THCmedia dùng đến là phương thức Json nên dữ liệu ở Front End chúng ta sẽ đọc thông qua định dạng này.

Quay ngược lại phía trên hàm Ajax cung cấp cho chúng ta các option beforeSend, complete, success để lắng nghe các thông số từ Back End trả về.

Dựa vào các tham số trả về để thực thi các hành động tương ứng như THCmedia đã share ở trên.

3. Nâng cao: Update các thông tin liên quan đến giỏ hàng nếu thêm thành công sản phẩm vào giỏ.

Đối với việc thực thi Ajax ở trang single product thì ta có thể hoàn toàn kiểm soát được giỏ hàng và cập nhật chúng mà không cần load lại trang tuy nhiên với những trang khác khi cập nhật sản phẩm vào giỏ hàng ta có thể tự động thay đổi số lượng giỏ hàng mà không cần phải load lại trang thông qua filter hook: woocommerce_add_to_cart_fragments

add_filter(‘woocommerce_add_to_cart_fragments’, ‘cart_info_modal_wc’);

Demo đoạn code cập nhật giỏ hàng:

add_filter('woocommerce_add_to_cart_fragments', 'cart_info_modal_wc');
function cart_info_modal_wc($fragments)
{
    ob_start();
    ?>
    <?php get_template_part('template-parts/cart-info'); ?>
    <?php
    $fragments['div.cartInfo'] = ob_get_clean();
    return $fragments;
}

Trong đó phần thực thi việc thay đổi ở đây mình đặt trong một cái template part để dễ quản lý.

 

Trên đây là chia sẻ của THCmedia để các bạn có thể thực hiện việc thêm tính năng Ajax cho website của mình. Chúc các bạn thành công!