Code thêm hiệu ứng rung giỏ hàng khi thêm sản phẩm trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách thêm hiệu ứng rung giỏ hàng khi thêm sản phẩm trong Flatsome nhé.

Khách bấm Thêm vào giỏ ở giữa trang cửa hàng, giỏ hàng nằm tít trên header nên khách không biết chắc sản phẩm đã vào giỏ chưa, nhiều người bấm thêm lần nữa rồi giỏ thừa 2 cái. Một cái rung nhẹ của icon giỏ hàng ngay lúc thêm xong là tín hiệu rõ ràng nhất mà không cần hiện popup che màn hình. Flatsome mặc định chỉ cập nhật số lượng trên icon giỏ hàng, không có hiệu ứng rung hay nhấp nháy nào cả, nên muốn có thì bạn phải code thêm bằng PHP và JavaScript nhé.

Thêm code hiệu ứng rung giỏ hàng

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme Flatsome nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
// Hiệu ứng rung icon giỏ hàng khi thêm sản phẩm trong Flatsome
// Cách dùng: dán code này vào cuối file functions.php của child theme Flatsome.
// Mỗi lần khách bấm Thêm vào giỏ, icon giỏ hàng trên header rung nhẹ để khách
// biết chắc sản phẩm đã vào giỏ, không cần cuộn lên đầu trang kiểm tra.
add_action( 'wp_footer', 'nn_rung_gio_hang_flatsome' );
function nn_rung_gio_hang_flatsome() {
    if ( ! function_exists( 'is_shop' ) ) {
        return;
    }
    if ( ! is_shop() && ! is_product_category() && ! is_product_tag() && ! is_product() && ! is_search() ) {
        return;
    }
    echo '<style>@keyframes nn-rung-gio { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } } .header-cart-link.nn-gio-rung { animation: nn-rung-gio 0.5s ease; }</style>';
    echo '<script>jQuery( document.body ).on( "added_to_cart", function() { var gio = jQuery( ".header-cart-link" ); if ( ! gio.length ) { return; } gio.removeClass( "nn-gio-rung" ); void gio.get( 0 ).offsetWidth; gio.addClass( "nn-gio-rung" ); } );</script>';
}

Code trên móc vào wp_footer để in CSS và JavaScript ở cuối trang, chỉ nạp ở trang cửa hàng, danh mục, thẻ, trang chi tiết sản phẩm và trang tìm kiếm nhờ kiểm tra is_shop(), is_product_category(), is_product_tag(), is_product() và is_search(). CSS định nghĩa keyframes nn-rung-gio xoay icon qua lại vài độ trong 0,5 giây, class nn-gio-rung gắn animation này vào link giỏ hàng .header-cart-link của Flatsome. JavaScript lắng nghe sự kiện added_to_cart của WooCommerce, sự kiện này WooCommerce tự bắn ra mỗi khi thêm sản phẩm thành công bằng AJAX; khi sự kiện chạy, script gỡ class cũ rồi gắn lại để hiệu ứng chạy lại từ đầu mỗi lần thêm, kể cả khi khách thêm 2 sản phẩm liên tiếp.

Kiểm tra hiệu ứng rung giỏ hàng

Bạn mở trang cửa hàng, bấm Thêm vào giỏ ở một sản phẩm, icon giỏ hàng trên header rung nhẹ rồi dừng, số lượng trên huy hiệu đỏ tăng thêm 1. Bấm thêm sản phẩm nữa thì icon rung lại từ đầu. Nếu icon không rung, bạn kiểm tra xem nút Thêm vào giỏ có chạy bằng AJAX không — vào WooCommerce → Cài đặt → Sản phẩm, phải bật tùy chọn thêm vào giỏ bằng AJAX ở trang lưu trữ thì sự kiện added_to_cart mới chạy.

Lưu ý khi dùng

Hiệu ứng chỉ chạy khi thêm sản phẩm bằng AJAX ở trang lưu trữ; ở trang chi tiết sản phẩm, nút thêm vào giỏ mặc định tải lại trang nên không có rung — đó là đúng cách hoạt động của WooCommerce chứ không phải lỗi code. Muốn rung mạnh hay nhẹ hơn thì đổi các góc xoay trong keyframes, ví dụ -12deg thành -18deg, hoặc đổi 0.5s thành 0.8s cho rung lâu hơn. Tính năng này đi chung với bài code thêm hiệu ứng bay vào giỏ khi thêm sản phẩm trong Flatsome: hiệu ứng bay cho thấy sản phẩm bay vào giỏ, hiệu ứng rung xác nhận giỏ đã nhận hàng — dùng cả hai thì phản hồi rõ ràng nhất.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm hiệu ứng rung giỏ hàng khi thêm sản phẩm trong Flatsome mà không cần cài thêm plugin rồi nhé. Tính năng này đi chung với bài code thêm hiệu ứng bay vào giỏ khi thêm sản phẩm trong Flatsome và bài code thêm badge Hàng mới cho sản phẩm mới đăng trong Flatsome là thành bộ phản hồi trực quan cho khách mua hàng trên shop Flatsome.

Nếu cần mình kèm 1-1 về Flatsome thì cứ liên hệ mình nhé.