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

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

HIT

26.10.2016

2926

6

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

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

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

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

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

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

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

/

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

6 комментариев

  1. Дима

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

  2. Дима

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

    1. Alexandr

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

  3. Дмитрий

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

  4. Роман

    Это ладно вы в скрипте разбираетесь, а можно для чайника, что, куда скопировать, в какой файл, что, куда вставить?

    1. Alexandr

      Тут главное принцип понять. Нужно чтобы на товаре по которому нажимаем был уникальный идентификатор ID. Скрипт подключаем куда угодно. Как это сделать описано здесь. Скрипт, при нажатии на товар (с ID), отправляет его изображение в корзину (в блок с идентификатором #cart-punkt).

      Сейчас подробно расписать не могу в виду отсутствия времени. Может быть позже.

Товары улетающие в корзину
Плагин: Миниатюра таксономии
Рекомендации для васПлагин: Миниатюра таксономииOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.