Сделаем товары 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();
Да Вы правы, не хватало. Исправил. Спасибо за замечание!
Спасибо! Очень помог! Добавил в закладки.
Это ладно вы в скрипте разбираетесь, а можно для чайника, что, куда скопировать, в какой файл, что, куда вставить?
Тут главное принцип понять. Нужно чтобы на товаре по которому нажимаем был уникальный идентификатор ID. Скрипт подключаем куда угодно. Как это сделать описано здесь. Скрипт, при нажатии на товар (с ID), отправляет его изображение в корзину (в блок с идентификатором #cart-punkt).
Сейчас подробно расписать не могу в виду отсутствия времени. Может быть позже.