Thêm Vào Giỏ Hàng Từ Quick View (AJAX) | Chọn Thuộc Tính Ngay Trên Modal WooCommerce

Trong video này, bạn sẽ học cách lập trình tính năng thêm vào giỏ hàng ngay trên Quick View modal trong WooCommerce, bao gồm chọn thuộc tính (variation) như size, màu sắc mà không cần reload trang.

Bước 1: Xử lý Javascript khi chọn thuộc tính trên modal

// 1. Khi chọn thuộc tính
    $(document).on('click', '.attribute-option', function (e) {
        e.preventDefault();
        var $group = $(this).closest('.attribute-group');
        $group.find('.attribute-option').removeClass('active border-dark');
        $(this).addClass('active border-dark');

        checkVariations();
    });

    function checkVariations() {
        var variations = JSON.parse($('#product-variations-data').val() || '[]');
        var selectedAttributes = {};
        var allSelected = true;

        // Lấy tất cả các thuộc tính đã chọn
        $('.attribute-group').each(function () {
            var name = $(this).data('attribute-name'); // pa_color, pa_size, pa_brand
            var value = $(this).find('.attribute-option.active').data('value'); // red
            if (!value) {
                allSelected = false;
            } else {
                selectedAttributes[name] = value;
                // {
                //     "pa_color" = "gray",
                //     "pa_size"  = "large"
                // }
                // ["pa_color","pa_size"]
            }
        });

        if (allSelected && variations.length > 0) {
            // console.log(variations);

            // Tìm biến thể khớp với các thuộc tính đã chọn
            var match = variations.find(function (variation) {
                return Object.keys(selectedAttributes).every(function (key) {
                    return variation.attributes[key] === "" || variation.attributes[key] === selectedAttributes[key];
                });
            });



            if (match) {
                $('#selected-variation-id').val(match.variation_id);
                $('#qv-price-display').html(match.price_html);
                if (match.image.src) $('#qv-main-img').attr('src', match.image.src);
                $('.add-to-cart-qv').prop('disabled', false).text('THÊM VÀO GIỎ');
            } else {
                $('.add-to-cart-qv').prop('disabled', true).text('HẾT HÀNG');
            }
        }
    }

Bước 2: Gửi AJAX về phía backend để thêm vào giỏ hàng và tự động cập nhật vào mini cart.

// 2. Gửi AJAX thêm vào giỏ
    $(document).on('click', '.add-to-cart-qv', function (e) {
        var product_id = $('#quickview-product-container').data('product-id');
        var variation_id = $('#selected-variation-id').val();
        var qty = $('.cart-plus-minus-box').val();

        var $btn = $(this);
        $btn.text('Đang xử lý...');

        $.ajax({
            url: ajaxurl.quickview,
            type: 'POST',
            data: {
                action: 'ajax_add_to_cart_quickview',
                product_id: product_id,
                variation_id: variation_id,
                quantity: qty
            },
            success: function (response) {
                $btn.text('ĐÃ THÊM!').addClass('btn-success');
                if (response.fragments) {
                    // CẬP NHẬT TỰ ĐỘNG: Duyệt qua các fragments và thay thế HTML cũ
                    $.each(response.fragments, function (key, value) {
                        $(key).replaceWith(value);
                    });

                    // Kích hoạt sự kiện để các script khác (như mở Side Cart) biết
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $('.sidebar-cart-active')]);


                }
            }
        });
    });

Bước 3: Logic thêm vào giỏ hàng ở backend:

//handle add to cart with variation
add_action('wp_ajax_ajax_add_to_cart_quickview', 'ajax_add_to_cart_quickview');
add_action('wp_ajax_nopriv_ajax_add_to_cart_quickview', 'ajax_add_to_cart_quickview');

function ajax_add_to_cart_quickview() {
    $product_id = absint($_POST['product_id']);
    $variation_id = absint($_POST['variation_id']);
    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);

    // Nếu có variation_id thì thêm sản phẩm biến thể, nếu không thì thêm sản phẩm đơn giản
    if ($variation_id > 0) {
        WC()->cart->add_to_cart($product_id, $quantity, $variation_id);
    } else {
        WC()->cart->add_to_cart($product_id, $quantity);
    }

    WC_AJAX::get_refreshed_fragments();
    wp_die();
}

Chúc các bạn thực hành thành công nhé !