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

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

HIT

26.10.2016

2816

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Настраиваем woocommerce

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

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

/
Мини-корзина сбоку

Мини-корзина сбоку

Ранее описывал функционал мини-корзины в Header’е, теперь реализуем данное решение в виде боковой кнопки, если нужно разгрузить шапку, либо интернет-магазин добавился после создания основной верстки сайта, либо нужно внедрить ИМ Читать далее »

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

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

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

/

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

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

  1. Аватар
    Дима

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

  2. Аватар
    Дима

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

    1. Alexandr
      Alexandr

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

  3. Аватар
    Дмитрий

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

  4. Аватар
    Роман

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

    1. Alexandr
      Alexandr

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

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

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