Hướng dẫn hiệu ứng Fly add cart

Các bạn có thể xem demo ở trang here

Bước 1: Kiểm tra đã có jquery UI chưa nếu chưa hãy thêm vào ( điều này quan trọng)

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>

Bước 2:Thêm button "Add to cart" vào file Snipet product-loop.liquid như sau
                      

<button class="add2cart btn btn-primary btn_buy" data-variantid="{{product.variants.first.id}}" >
         Add to cart
</button>

Bước 3: Các bạn copy nội dung dưới đây vào file js mới hoặc vào file script.js.liquid

        $(document).ready(function(){
	$(".add2cart").on('click', function () {		
        var cart = $('.icon-cart');
        var quantity = 1;
        var variant_id = $(this).attr('data-variantid');
        var imgtodrag = $(this).parent().siblings().find("img").last();
        //Lưu ý do mình làm trên theme default cũ nên các bạn phải tinh chỉnh chỗ này
        //để lấy được đối tượng hình ảnh do mỗi theme khác nhau về cách bố trí hình ảnh sản phẩm
        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
            })
                .appendTo($('body'))
                .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInElastic');
            
            //Chỗ này nếu các bạn muốn icon cart có hiệu ứng thì bỏ dấu /* */ đi nhá
            /*setTimeout(function () {
                cart.effect("shake", {
                    times: 1
                }, 200);
            }, 1500);*/

            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()
            });
        }		
      
        $.ajax({
       		url : "/cart/add.js",
       		type : 'POST',
		data : 'quantity=' + quantity + '&id='+ variant_id,
       		dataType : 'json',
       		success :  function(data) {
			var carCount = parseInt($("span#cart-count").html());
			carCount = carCount + quantity;
			$("span#cart-count").html(carCount);				
		},
		error: function(XMLHttpRequest, textStatus) {
      			Haravan.onError(XMLHttpRequest, textStatus);
    		},
	});
    });
})

Nào bây giờ thì chạy thử và xem kết quả thôi nào. Chúc các bạn thành công.