Сделаем товары 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»);).
Чтобы скрипт работал только при нажатии на кнопку В корзину у одиночных товары (не вариаций) с наличием и с ценой (не подробнее), нужно изменить класс назначения на .product_type_simple.add_to_cart_button.ajax_add_to_cart
Выводим 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 в новом шаблоне прописывается в самой кнопке, ничего больше больше редактировать не нужно.
Тэги: корзина
Спасибо за красивую и полезную «плюшку»…там ошибочка с=>в конце не хватает ещё «троицы» такой » }); «Ещё раз спасибо
Первый }); для закрытия $(document).ready(function(){
Второй }): для закрытия …on(«click»,function(){
Третий }); не хватает для function() { $(this).remove();
Да Вы правы, не хватало. Исправил. Спасибо за замечание!
Спасибо! Очень помог! Добавил в закладки.