Tăng tốc WooCommerce: Tự làm Quick View cực nhẹ bằng cách Clone HTML

Bạn muốn thêm tính năng Quick View (Xem nhanh) vào cửa hàng WooCommerce nhưng lo ngại các plugin bên thứ ba sẽ làm chậm website?

Thông thường, Quick View hoạt động bằng cách gửi một yêu cầu AJAX đến server để lấy dữ liệu sản phẩm. Tuy nhiên, nếu danh sách sản phẩm của bạn đã có đủ thông tin cơ bản, chúng ta có thể sử dụng kỹ thuật Clone HTML bằng JavaScript để tạo một bản sao hiển thị tức thì.

Tại sao nên chọn cách Clone HTML?

• Tốc độ siêu nhanh: Không có độ trễ chờ đợi dữ liệu từ Server.
• Cực kỳ nhẹ: Không cần cài đặt Plugin cồng kềnh, giảm thiểu request.
• Tối ưu SEO & UX: Mang lại trải nghiệm mượt mà cho khách hàng.

Bước 1: Chuẩn bị cấu trúc HTML

Đầu tiên, chúng ta cần một “khung” (Modal) trống nằm ở cuối trang để chứa nội dung sẽ được clone vào. Bạn thêm đoạn code này vào file footer.php hoặc dùng hook wp_footer. Ở đây mình sẽ dùng Bootstrap nha.

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 99999;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalBodyContent"></div>
        </div>
    </div>
</div>

Bước 2: Viết mã JavaScript để “Clone”

Ý tưởng ở đây là khi người dùng nhấn vào nút Quick View, JS sẽ tìm vùng chứa thông tin sản phẩm (ví dụ: .product-details), sao chép toàn bộ HTML của nó và dán vào Modal. Ngoài ra các bạn có thể xóa các phần tử không mong muốn trong HTML.

<script>
jQuery(document).ready(function($) {
    // 1. Xử lý Quick View bằng Ủy thác (Event Delegation)
    $(document).on('click', '.btn-quickview-product', function(e) {
        e.preventDefault();
        var $product = $(this).closest('.product');
        if (!$product.length) return;
        //clone HTML cho phần product box để hiển thị ra modal quick view
        var $clone = $product.clone();
        // Xóa các thành phần không muốn hiện trong modal
        $clone.find('.btn-quickview-product').remove();
        $clone.find('.btn-wishlist').remove();
        
        $('#modalBodyContent').html($clone[0].outerHTML);
        $('#dataModal').modal('show');
    });
});
</script>

Bước 3: Thêm CSS để giao diện chuyên nghiệp

Bạn cần một chút CSS để Modal hiện ra giữa màn hình và trông bắt mắt hơn.

display: none;	        Ẩn modal khi chưa kích hoạt
position: fixed;	Cố định modal trên màn hình
z-index: 9999;	        Đảm bảo modal luôn nằm trên cùng
overflow-y: auto;	Cho phép cuộn nếu nội dung quá dài

Một số lưu ý quan trọng (Candor Tip)

Mặc dù kỹ thuật này rất nhanh, nhưng bạn cần lưu ý:

1. Dữ liệu giới hạn: Bạn chỉ có thể clone những gì đang hiển thị trên trang hiện tại. Nếu bạn muốn hiện thêm các thông tin chi tiết sâu hơn (như Gallery ảnh đầy đủ hoặc Tab đánh giá), AJAX vẫn là lựa chọn tốt hơn.
2. Sự kiện JS: Nếu trong vùng được clone có các nút “Add to cart” sử dụng JavaScript, bạn có thể cần khởi tạo lại các sự kiện đó sau khi clone nội dung vào modal.

Kết luận

Kỹ thuật Clone HTML là một phương pháp “nhỏ nhưng có võ” dành cho những ai ưu tiên tốc độ tải trang tuyệt đối. Thay vì bắt máy chủ làm việc thêm, hãy tận dụng ngay những gì trình duyệt đang có sẵn.