78 replies to this topic

[Cheren-dow]

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

 

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;?>"

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

 

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>

 

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

 

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

 

Все готово.

 

ВНИМАНИЕ!!!

 

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

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

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

Edited by SmetDenis, 07 October 2013 - 17:17.

[i001]

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

[Cheren-dow]

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

[fiction13]

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

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

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

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

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

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

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

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

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

Версия ZOO 3.0.13

Версия JBZOO 2.0.1

[fiction13]

Евген, on 08 Oct 2013 - 02:18, said:

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

 

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

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

fiction13, on 08 Oct 2013 - 03:42, said:

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

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

[Cheren-dow]

1. Quote

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

2. Она ни как не относится к анимации
    

Евген, on 08 Oct 2013 - 04:34, said:

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

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

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

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

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