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

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

HIT

26.10.2016

3061

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

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

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

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

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

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

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

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

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

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

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

  1. Дима

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

  2. Дима

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

    1. Alexandr

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

  3. Дмитрий

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

  4. Роман

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

    1. Alexandr

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

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

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