Code thêm hiệu ứng bay vào giỏ 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 bay vào giỏ khi thêm sản phẩm trong Flatsome nhé.

Khách bấm Thêm vào giỏ xong mà trang chỉ lặng lẽ tăng con số trên icon giỏ hàng thì nhiều người không chắc mình đã thêm thành công chưa, phải bấm lại lần nữa rồi giỏ lại thừa một cái. Một hiệu ứng nhỏ mà vui mắt: ảnh sản phẩm bay từ nút bấm lên icon giỏ hàng rồi icon nảy nhẹ một cái, khách nhìn là biết chắc sản phẩm đã vào giỏ. Flatsome mặc định không có hiệu ứng này, muốn có thì bạn phải code thêm bằng JavaScript nhé.

Thêm code hiệu ứng bay vào giỏ

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 bay vào giỏ 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,
// ảnh sản phẩm sẽ bay từ nút Thêm vào giỏ lên icon giỏ hàng ở header
add_action('wp_footer', 'nn_bay_vao_gio_flatsome');
function nn_bay_vao_gio_flatsome() {
    if (!is_shop() && !is_product_category() && !is_product_tag() && !is_product()) {
        return;
    }
    echo '<style>.nn-anh-bay { position: fixed; z-index: 9999; pointer-events: none; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: left .7s cubic-bezier(.5,-.1,.3,1), top .7s cubic-bezier(.5,-.1,.3,1), width .7s, height .7s, opacity .7s; } .nn-gio-nay .cart-icon, .cart-icon.nn-gio-nay { animation: nn-nay-gio .45s ease; } @keyframes nn-nay-gio { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }</style>';
    echo '<script>jQuery(function ($) { var $gio = $(".header-cart-link"); if (!$gio.length) { $gio = $(".cart-icon"); } if (!$gio.length) { return; } function bay($anh) { if (!$anh || !$anh.length) { return; } if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { return; } var batDau = $anh[0].getBoundingClientRect(); var dich = $gio[0].getBoundingClientRect(); if (!batDau.width || !dich.width) { return; } var $ban = $anh.clone().addClass("nn-anh-bay").css({ left: batDau.left, top: batDau.top, width: batDau.width, height: batDau.height, opacity: 1 }).appendTo("body"); requestAnimationFrame(function () { $ban.css({ left: dich.left + dich.width / 2 - 22, top: dich.top + dich.height / 2 - 22, width: 44, height: 44, opacity: 0.2 }); }); setTimeout(function () { $ban.remove(); $gio.addClass("nn-gio-nay"); setTimeout(function () { $gio.removeClass("nn-gio-nay"); }, 450); }, 750); } $(document.body).on("added_to_cart", function (e, fragments, cart_hash, $nut) { var $anh = $(""); if ($nut && $nut.length) { $anh = $nut.closest("li.product").find("img").first(); } if (!$anh.length) { $anh = $(".woocommerce-product-gallery__image img, .product-gallery img").first(); } bay($anh); }); $("form.cart").on("submit", function (e) { var $form = $(this); if ($form.hasClass("nn-da-ajax")) { return; } if ($form.find(".quantity").length > 1) { return; } e.preventDefault(); var duLieu = $form.serializeArray(); duLieu.push({ name: "product_id", value: $form.find("input[name=add-to-cart]").val() }); $.post("?wc-ajax=add_to_cart", $.param(duLieu), function (tra) { if (!tra || tra.error) { $form.addClass("nn-da-ajax"); $form.trigger("submit"); return; } $(document.body).trigger("added_to_cart", [tra.fragments, tra.cart_hash, $form.find("button[type=submit]")]); }).fail(function () { $form.addClass("nn-da-ajax"); $form.trigger("submit"); }); }); });</script>';
}

Code trên chạy ở trang cửa hàng, trang danh mục và trang chi tiết sản phẩm. Phần JavaScript nghe sự kiện added_to_cart của WooCommerce, sự kiện này chạy ngay sau khi sản phẩm được thêm vào giỏ thành công bằng AJAX. Khi sự kiện chạy, code lấy ảnh sản phẩm vừa thêm, nhân bản một bản sao rồi dùng CSS transition cho nó bay từ vị trí ảnh gốc lên tới icon giỏ hàng của Flatsome (thẻ .header-cart-link), vừa bay vừa thu nhỏ còn 44px và mờ dần, tới nơi thì icon giỏ nảy nhẹ một cái nhờ animation nn-nay-gio. Riêng trang chi tiết sản phẩm, form Thêm vào giỏ mặc định của WooCommerce sẽ tải lại trang nên code chặn form lại, tự gửi yêu cầu AJAX tới ?wc-ajax=add_to_cart rồi mới kích hoạt hiệu ứng, nhờ vậy hiệu ứng chạy được cả ở trang sản phẩm. Nếu khách bật chế độ giảm chuyển động trong hệ điều hành thì hiệu ứng tự tắt.

Kiểm tra hiệu ứng bay vào giỏ

Bạn mở trang cửa hàng hoặc một danh mục sản phẩm, bấm nút Thêm vào giỏ của một sản phẩm bất kỳ, ảnh sản phẩm sẽ bay lên icon giỏ hàng ở góc phải header rồi icon nảy nhẹ một cái, đồng thời số lượng trên icon tăng lên. Mở trang chi tiết một sản phẩm rồi bấm Thêm vào giỏ thì hiệu ứng cũng chạy tương tự, trang không tải lại. Nhớ bật sẵn tùy chọn WooCommerce → Cài đặt → Sản phẩm → Bật nút thêm vào giỏ bằng AJAX ở trang lưu trữ để hiệu ứng chạy ở trang cửa hàng và danh mục.

Lưu ý khi dùng

Hiệu ứng chỉ chạy với sản phẩm đơn giản và sản phẩm có biến thể, còn sản phẩm nhóm (grouped product) có nhiều ô số lượng thì code để form gửi theo cách mặc định nên không có hiệu ứng bay, khách vẫn mua bình thường. Nếu header của bạn dùng layout không có icon giỏ hàng dạng .header-cart-link thì code tự dừng lại mà không báo lỗi, bạn đổi selector trong code cho khớp với header của mình. Thời gian bay là 0,7 giây, bạn đổi con số này trong CSS và trong hàm setTimeout nếu muốn bay nhanh hay chậm hơn. Tính năng này đi chung với bài code thêm thanh tiến trình miễn phí vận chuyển trong Flatsome là thành combo giỏ hàng sinh động hơn cho shop.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm hiệu ứng bay vào giỏ 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 thanh tiến trình miễn phí vận chuyển trong Flatsome và bài code hiển thị ngày giao hàng dự kiến trên trang sản phẩm trong Flatsome là thành bộ trải nghiệm mua sắm mượt mà hơn cho shop Flatsome.

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