/ Сайтостроение / Scripts & jquery / Товары улетающие в корзину

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

HIT

26.10.2016

1611

4

Сделаем товары 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 в новом шаблоне прописывается в самой кнопке, ничего больше больше редактировать не нужно.

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Мини-корзина в Header

Мини-корзина в Header

Мини-корзина обязательно должна быть на сайте интернет-магазина. После установки плагина woocommerce нам надо чтобы в HEADER была небольшая иконка корзины с указанием количества закинутого в нее товара и общей суммой Читать далее »

/
Доработка функционала Woocommerce

Доработка функционала Woocommerce

Продолжаем дорабатывать различные аспекты модуля Woocommerce. Общий вес заказа Чтобы выводить общий вес заказа, нужно в шаблонах cart-totals.php (в корзине) и/или review-order.php (в заказе) добавить следующий код (перед закрывающим тегом таблицы Читать далее »

/ /
Настраиваем woocommerce

Настраиваем woocommerce

Настраиваем различные аспекты плагина woocommerce, под текущие задачи. Ваша корзина пуста Шаблон для настроек страницы корзины (когда она пуста) находится здесь: woocommerce (локализованная в теме)/cart/cart-empty.php Можно отцентрировать и добавить какое-либо Читать далее »

/

Добавить комментарий

4 комментария

  1. Дима

    Спасибо за красивую и полезную «плюшку»…там ошибочка с=>в конце не хватает ещё «троицы» такой » }); «Ещё раз спасибо

  2. Дима

    Первый  }); для закрытия $(document).ready(function(){ 
    Второй }): для закрытия …on(«click»,function(){
    Третий }); не хватает для function() { $(this).remove();
     

    1. Alexandr
      Alexandr

      Да Вы правы, не хватало. Исправил. Спасибо за замечание!

  3. Дмитрий

    Спасибо! Очень помог! Добавил в закладки.

Товары улетающие в корзину
Галерея + Hover эффект
Рекомендации для васГалерея + Hover эффектOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.