Товары улетающие в корзину

Сделаем товары woocommerce улетающими в корзину, при нажатии кнопки «В КОРЗИНУ».

Основной скрипт

Включаем jquery функцию

$(document).ready(function(){  
	
$(".ajax_add_to_cart").on("click",function(){
        id = $(this).parent('li').attr("id");
        $("#"+id).find("img")
            .clone()
            .css({'position' : 'absolute', 'z-index' : '11100', top: $(this).offset().top-300, left:$(this).offset().left-100})
            .appendTo("body")
            .animate({opacity: 0.05,
                left: $("#cart-punkt").offset()['left'],
                top: $("#cart-punkt").offset()['top'],
                width: 20}, 1000, function() {
                $(this).remove();
            });

});
		 
});

.ajax_add_to_cart — кнопка, при нажатии на которую срабатывает скрипт
#cart-punkt — id корзины в шапке, куда нужно лететь изображениям товаров
$(«#»+id).find(«img») — воздействуем на изображение товара, добавленного в корзину. Но для этого мы должны вычислить и захватить ID товара (id = $(this).parent(‘li’).attr(«id»);).

Выводим id товара

По-умолчанию у товаров woocommerce прописываются только стили. Добавим id товара. Для этого в шаблоне к раскрывающему тэгу li добавим:

id="<?php echo $product->id; ?>"

Обновление для WC 3.0

В версии 3.0 немного изменились шаблоны, поэтому надо немного подредактировать скрипт:

$(document).ready(function(){  
	
//Товары улетающие  корзину	
	
$(".product_type_simple.add_to_cart_button.ajax_add_to_cart").on("click",function(){
        id = $(this).attr("data-product_id");
		
        $(".post-"+id).find("img")
            .clone()
            .css({'position' : 'absolute', 'z-index' : '11100', top: $(this).offset().top-300, left:$(this).offset().left-100})
            .appendTo("body")
            .animate({opacity: 0.05,
                left: $("#cart-punkt").offset()['left'],
                top: $("#cart-punkt").offset()['top'],
                width: 20}, 1000, function() {
                $(this).remove();
            });

});
});

А так как id в новом шаблоне прописывается в самой кнопке, ничего больше больше редактировать не нужно.

Тэги: корзина