Сделаем товары 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();
Да Вы правы, не хватало. Исправил. Спасибо за замечание!
Спасибо! Очень помог! Добавил в закладки.