Lập Trình Quick View WooCommerce với AJAX | Xem Nhanh Sản Phẩm Không Reload Trang

Bạn muốn tạo tính năng Quick View (xem nhanh sản phẩm) cho WooCommerce mà không cần plugin? Trong video này, mình sẽ hướng dẫn bạn cách lập trình Quick View bằng AJAX giúp hiển thị thông tin sản phẩm ngay trên modal mà không cần reload trang.

Bước 1: Template HTML cho Modal (Ở đây mình sử dụng của bootstrap):

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
                    </div>
                    <div class="modal-body" id="quickview-content-target">
                       loading...
                    </div>
                </div>
            </div>
        </div> 

Bước 2: Lập trình xử lý modal cho phần quick view để gửi AJAX về cho backend

jQuery(document).ready(function ($) {
    var myModal; // Biến để lưu instance modal

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

        var product_id = $(this).data('product-id');
        var modalElement = document.getElementById('exampleModal');

        // Khởi tạo instance nếu chưa có
        if (!myModal) {
            myModal = new bootstrap.Modal(modalElement);
        }

        $('#quickview-content-target').html('<div class="text-center p-5">Loading...</div>');
        myModal.show();

        $.ajax({
            url: ajaxurl.quickview,
            type: 'POST',
            data: {
                action: 'load_quickview_product',
                product_id: product_id
            },
            success: function (response) {
                $('#quickview-content-target').html(response);

                // Sau khi load AJAX xong, nếu có các thư viện như Slick slider 
                // hay các hàm khởi tạo lại số lượng, hãy gọi ở đây.
            },
            error: function () {
                $('#quickview-content-target').html('Đã có lỗi xảy ra.');
            }
        });
    });

    $(document).on('click', '[data-bs-dismiss="modal"]', function () {
        if (myModal) {
            myModal.hide();
        }
    });

    // Sự kiện khi modal đã đóng hoàn toàn (reset lại nội dung để tránh "rác" dữ liệu)
    $('#exampleModal').on('hidden.bs.modal', function () {
        $('#quickview-content-target').html('');
    });
});

Bước 3: Đọc dữ liệu sản phẩm và trả kết quả về cho front end để hiển thị ra giao diện

add_action('wp_ajax_load_quickview_product', 'load_quickview_product');
add_action('wp_ajax_nopriv_load_quickview_product', 'load_quickview_product');

function load_quickview_product() {
    $product_id = intval($_POST['product_id']);
    $product = wc_get_product($product_id);

    if (!$product) { wp_die(); }

    // Lấy dữ liệu biến thể nếu là sản phẩm có biến thể
    $variations_json = '';
    if ($product->is_type('variable')) {
        $variations_json = htmlspecialchars(json_encode($product->get_available_variations()));
    }


    ?>
    <div class="row" id="quickview-product-container" data-product-id="<?php echo $product_id; ?>">
        <input type="hidden" id="product-variations-data" value="<?php echo $variations_json; ?>">
        <input type="hidden" id="selected-variation-id" value="">

        <div class="col-lg-5 col-md-5">
             <div class="quickview-img">
                <?php echo get_the_post_thumbnail($product_id, 'large', array('id' => 'qv-main-img')); ?>
            </div>
        </div>
        <div class="col-lg-7 col-md-7">
            <div class="product-details-content">
                <h2><?php echo $product->get_name(); ?></h2>
                <div class="pro-details-price mb-3">
                    <span id="qv-price-display"><?php echo $product->get_price_html(); ?></span>
                </div>

                <?php if ($product->is_type('variable')) : 
                    $attributes = $product->get_variation_attributes();
                    foreach ($attributes as $name => $options) : ?>
                        <div class="attribute-group mb-2" data-attribute-name="attribute_<?php echo sanitize_title($name); ?>">
                            <span class="d-block"><strong><?php echo wc_attribute_label($name); ?>:</strong></span>
                            <ul class="list-inline">
                                <?php foreach ($options as $option) : ?>
                                    <li class="list-inline-item">
                                        <a href="#" class="attribute-option border p-2 d-inline-block" data-value="<?php echo esc_attr($option); ?>">
                                            <?php echo esc_html($option); ?>
                                        </a>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    <?php endforeach;
                endif; ?>
                
                <?php if ($product->is_type('variable')) :
                ?>
                <div class="pro-details-quality mt-4">
                    <input class="cart-plus-minus-box form-control w-25 d-inline-block" type="number" value="1" min="1">
                    <button class="btn btn-primary add-to-cart-qv" disabled>CHỌN BIẾN THỂ</button>
                </div>
                <?php else : ?>
                <div class="pro-details-quality mt-4">
                    <input class="cart-plus-minus-box form-control w-25 d-inline-block" type="number" value="1" min="1">
                    <button class="btn btn-primary add-to-cart-qv">Add To Cart</button>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php
    wp_die();
}

Cuối cùng, bấm phím Ctrl + F5 và kiểm thử kết quả nha !