Перейти к содержимому


Фотография
* * * * - 4 Голосов

Анимация добавления товара в корзину

рецепт корзина

Сообщений в теме: 78

#1 Cheren-dow

Cheren-dow

Отправлено 07 October 2013 - 09:41

*
Популярное сообщение!

Как и обещал , делаем добавление товара(изображение "летящее" в корзину) как на приведенном примере сайта.

 

1. Добавляем кнопке id нашего item-a

Открываем файл _buttons.php

сайт\media\zoo\applications\jbuniversal\elements\jbpriceadvance\tmpl\_buttons.php

Для ссылки с атрибутом href="#add-to-cart" дописываем id="<?php echo $this->getItem()->id;?>"

d6fc1e_200x0.png

Теперь в исходном коде у кнопки(ссылке) на добавление в корзину мы увидим id которое равно id элементу

e3e946_200x0.png

 

2. Дописываем стиль блоку teaser - a

В jbzoo.css или же в стилях шаблона дописываем:

.jbzoo-item-teaser{
    position: relative;
}

3. Добавляем блок JS кода в head шаблона

Я использую стандартный шаблон joomla

<script>
	jQuery(function($){
		$("a.jsAddToCart").click(function(){

			var itemID          = $(this).attr('id');
			var basketPosition  = $(".jsJBZooModuleBasket").offset();
			var imagePosition   = $('a[rel=jbimage-gallery-'+ itemID +'] .jbimage').offset();
			var image           = $('a[rel=jbimage-gallery-'+ itemID +'] .jbimage');
			var posit           = basketPosition.left - imagePosition.left;
			var top             = basketPosition.top - imagePosition.top;

			$(image).clone().css({
				'top'       : '10px',
				'left'      : '20px',
				'position'  : 'absolute'
			}).prependTo($('a[rel=jbimage-gallery-'+ itemID +']')).animate({
					opacity : 0.6,
					zIndex  : 9999,
					top     : "-100px",
					left    : "50px"
				}, 300).animate({
					width   : "100px",
					height  : "100px",
					left    : posit + "px",
					top     : top + 'px'
				}, 1000).hide(300,function(){jQuery(this).remove();});

		});
	});
</script>

122edf_200x0.png

 

В js коде можно увидеть 2 функции animate() - именно с помощью них происходит анимация "перелета" картинки в корзину.

 

Первая функция animate задет прозрачность и немного поднимает изображение, а вторая функция анимации с помощью переменных posit и top(эти 2 переменные обязательны) перемещает картинку к корзине.

 

Все готово.

 

ВНИМАНИЕ!!!

 

1.   Тестировалось на JBZoo 2.0.2, подойдут так же ранние версии начиная с v 2.0.X.

2.   При следующих обновлениях эти изменения могут пострадать.

3.   При появлении проблем Тех.Поддержка ответственности не несет. 


Сообщение отредактировал SmetDenis: 07 October 2013 - 17:17

  • 12
Изображение
 

#2 i001

i001

Отправлено 07 October 2013 - 10:25

Спасибо, добрый человек!!) Классная фича


  • 0

#3 Cheren-dow

Cheren-dow

Отправлено 07 October 2013 - 10:36

Работает? Ни че не забыл ?


  • 0
Изображение
 

#4 fiction13

fiction13

Отправлено 07 October 2013 - 11:19

Пришлось подогнать под свое изображение (не использую jbimage) и увеличить время полета. А так супер, спасибо!


  • 0

#5 Евген Аватарович

Евген Аватарович

Отправлено 08 October 2013 - 03:18

Здравствуйте.

У Вас, в предоставленном коде, отсутствует одна строка кода

$('.jbprice-selects').attr('size',5);

, которая есть на фотографии - смотрите прилагаемый скрин:1.png

у меня не заработало, даже, когда я её дописал - не появилась анимация


  • 0

#6 Евген Аватарович

Евген Аватарович

Отправлено 08 October 2013 - 04:04

У меня исползуется:

Версия ZOO 3.0.13

Версия JBZOO 2.0.1


  • 0

#7 fiction13

fiction13

Отправлено 08 October 2013 - 04:42

у меня не заработало, даже, когда я её дописал - не появилась анимация

 

Со ссылкой на сайт было бы легче помочь. 


  • 0

#8 Евген Аватарович

Евген Аватарович

Отправлено 08 October 2013 - 05:34

Со ссылкой на сайт было бы легче помочь. 

Ссылку и доступ отправил Вам "Личным сообщением". Буду очень признателен за помощь.


  • 0

#9 Cheren-dow

Cheren-dow

Отправлено 08 October 2013 - 06:26

  1. $('.jbprice-selects').attr('size',5) 
  2. Она ни как не относится к анимации
     

Ссылку и доступ отправил Вам "Личным сообщением". Буду очень признателен за помощь.

Что же все так боятся в теме написать ссылку на сайт?


  • 0
Изображение
 

#10 Евген Аватарович

Евген Аватарович

Отправлено 08 October 2013 - 07:11

Я указал ссылку на тестовый сайт - копию рабочего сайта, который закрыт от публичного входа, чтобы не появилось дублей материалов и войти можно только под администратором... Не хотелось бы, афишировать, хоть и временный, но административый доступ...

Я вам личным сообщением отправил...


  • 0





Темы с аналогичным тегами рецепт, корзина

Click to return to top of page in style!