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

Привет всем!
Может кому-то пригодится данное решение. Анимация при добавлении товара в корзину.

На странице каталога подключаем скрипт:

<script type='text/javascript' src="js/fly.js"></script>

скрипт fly.js

И вызов:

<script type="text/javascript"> 
$("button[name='ms2_action']").on('click', function () { 
var btn = $(this).parent('.ms2_form').find('button'); 
var flyimg = $(btn).parents().eq(1).siblings().find('img').eq(0); 
flyToElement($(flyimg), $('.not_empty .glyphicon-shopping-cart')); 

// Анимация кнопки AddCart
//flyToElement($(btn), $('.not_empty .glyphicon-shopping-cart')); 

// Автопрокрутка
$('html, body').animate({ 
'scrollTop' : $("body").position().top 
}); 

}); 

</script>

Можно анимировать кнопку AddCart.
Все настроено под стандартную верстку Minishop2 или можно поправить .eq(1) 1,2,3… в зависимости от вложенности.

var flyimg = $(btn).parents().eq(2).siblings().find('img').eq(0);

Пример

Вариант 2

Просто вставляем на странице каталога:

<script>
$("button[name='ms2_action']").on('click', function () {
        var cart = $('#msMiniCart');
        var btn = $(this).parent('.ms2_form').find('button'); 
        var flyimg = $(btn).parents().eq(1).siblings().find('img').eq(0); 
        
        if (flyimg) {
            var imgclone = flyimg.clone()
                .offset({
                top: flyimg.offset().top,
                left: flyimg.offset().left
            })
                .css({
                'opacity': '0.7',
                    'position': 'absolute',
                   /* 'height': '150px',
                    'width': '150px',*/
                    'z-index': '100'
            })
                .appendTo($('body'))
                .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                   /* 'height': 75*/
            }, 1000, 'easeInOutExpo');
            
             setTimeout(function () {
                 $('html, body').animate({ 'scrollTop' : $("body").position().top }); 
            }, 300);

            setTimeout(function () {
                cart.effect("shake", {
                    times: 2
                }, 200);
            }, 1500);
 
            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()
            });
        }
    });
</script>

Так же, при необходимости указывая нужную вложенность .parents().eq(2), для поиска изображения.

Rrp2010

26 января 2018, 08:44

4 098

Комментарии: 19

Andrew

15 декабря 2019, 19:28

чёт не хочет работать…

Rrp2010

15 декабря 2019, 20:11

Посмотрите рабочий пример https://codepen.io/Rs10Fl/pen/YYmqVN должно получиться

Andrew

15 декабря 2019, 20:34

Пробовал этот код на страницу категории, вообще перестает работать, белый экран…

Rrp2010

15 декабря 2019, 21:04

У вас наверное включен Fenom, добавьте пробел между фигурной скобкой в этой строке:
$(flyerClone).css({ ПРОБЕЛ position: 'absolute'…

Andrew

15 декабря 2019, 21:25

точно, с пробелом страница работает, а анимация не хочет..( хм…
прикольная штука…

Andrew

15 декабря 2019, 21:45

оно и в примере как то через раз выдаёт ошибку…

Rrp2010

15 декабря 2019, 22:38

Какую ошибку? Там в примере срабатывает submit формы, поэтому страница перезагружается.
Вот пример codepen.io/Rs10Fl/pen/JjoRzMe без форм.

Andrew

15 декабря 2019, 22:51

без форм теперь нормально работает в примере, но у меня на странице категории не хочет… как с формами, так и без них…

Andrew

15 декабря 2019, 23:14

блин, в примерах работает отлично, а на сайте не хочет…
срабатывает только сообщение jGrowl

Rrp2010

15 декабря 2019, 23:40

Покажите содержимое чанка вывода товара в категорию. Или сами попробуйте отладить в codepen.io/Rs10Fl/pen/JjoRzMe

Andrew

16 декабря 2019, 00:12

Вот шаблон категории:

<!DOCTYPE html>
<html lang="ru">
  <head>
	[[$counters]]
	[[$meta]]	
  </head>  
  <body>
	<div class="wrapper">
	  [[$headerInner]]
	  <section id="category-grid">	  
		[[!mFilter2?
		&paginator=`pdoPage`
		&class=`msProduct`
		&element=`msProducts`
		&includeThumbs=`small,medium,big`
		&parents=`[[*id]]`
		&includeTVs=`avaible`
		&processTVs=`1`
		&tplOuter=`mFilter2OuterTpl`
		&tpls=`gridProductTpl,listProductTpl`
		
		&limit=`12`
		&sort=`resource|menuindex:asc`
		&aliases=`
		ms|price==price,
		ms|vendor==vendor,
		msoption|fasovka==fasovka,
		msoption|srok==srok,
		msoption|reprodukcia==reprodukcia
		`
		&filters=`
		ms|price:number,
		ms|vendor:vendors,
		msoption|fasovka:default,
		msoption|srok:default,
		msoption|reprodukcia:default
		`
		&tplFilter.outer.price=`tpl.mFilter2.filter.slider`
		&tplFilter.row.price=`tpl.mFilter2.filter.number`
		
		
		]]
	  </section>	  
	  [[$footer]]
	</div>
	[[$scripts]]	
  </body>
</html>

А вот код чанка gridProductTpl:

<div class="col-xs-12 col-sm-4 no-margin product-item-holder hover ms2_product">
  <div class="product-item">
    <form method="post" class="ms2_form">
	  <input type="hidden" name="id" value="{$id}">
	  <input type="hidden" name="count" value="1">
	  <input type="hidden" name="options" value="[]">
	  <div class="ribbons">
		{if $favorite?}
		<div class="ribbon red"><span>[[%product.skidka1? &namespace=`babel` &topic=`translate`]]</span></div>
		{/if}
		{if $new?}
		<div class="ribbon blue"><span>[[%product.new? &namespace=`babel` &topic=`translate`]]</span></div>
		{/if}
		{if $popular?}
		<div class="ribbon green"><span>[[%product.popular? &namespace=`babel` &topic=`translate`]]</span></div>
		{/if}
	  </div>
	  <div class="image">
		{if $image?}
		<a href="{$id | url}">
		  <img class="lazy" src="[[+medium]]" alt="[[+longtitle:default=`[[+pagetitle]]`]] -фото" title="[[+longtitle:default=`[[+pagetitle]]`]] -изображение"  width="200"/>
		</a>
		{else}
		<img class="lazy" src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
		srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
		alt="[[+longtitle:default=`[[+pagetitle]]`]] -фото" title="[[+longtitle:default=`[[+pagetitle]]`]] -изображение"/>
		{/if}
	  </div>
	  <div class="body">
		[[+old_price:neq=`0`:then=`<div class="label-discount green">-[[percent? &newprice=`[[+price]]` &oldprice=`[[+old_price]]`]]% [[%product.skidka2? &namespace=`babel` &topic=`translate`]]</div>`]]
		<div class="title">
		  <a href="{$id | url}">{$pagetitle}</a>
		</div>
		<div class="brand">{$_pls['vendor.name']}</div>
		<div class="reviews_product">
		  <i class="fa fa-comments-o"> <p>  [[!ecMessagesCount:default=`0` ? &thread=`resource-[[+id]]`]]</p></i>
		</div> 	

		<div class="availability">
		  <label>[[%product.nalichie? &namespace=`babel` &topic=`translate`]]</label>
		  [[+avaible:eq=`1`:then=`<span class="available">[[%product.est? &namespace=`babel` &topic=`translate`]]</span>`]]
		  [[+avaible:eq=`2`:then=`<span class="available">[[%product.zakanchivaetsa? &namespace=`babel` &topic=`translate`]]</span>`]]
		  [[+avaible:eq=`0`:then=`<span class="available">[[%product.net? &namespace=`babel` &topic=`translate`]]</span>`]]
		</div>

	  </div>
	  <div class="prices">
	    {if $old_price?}
		<div class="price-prev">{$old_price} грн</div>
		{/if}
		{if $price?}
		<div class="price-current pull-right">{$price} грн</div>
		{else}
		<div class="price-current pull-right"><p>[[%product.dog.cena? &namespace=`babel` &topic=`translate`]]</p></div>
		{/if}
	  </div>
	  <div class="hover-area">
		[[+avaible:neq=`0`:then=`<div class="add-cart-button">
		<button type="submit" name="ms2_action" value="cart/add" class="le-button">[[%product.in.basket? &namespace=`babel` &topic=`translate`]]</button>
		</div>
		`]]
		<div class="wish-compare">
		  [[!addComparison?
		  &list_id=`[[++sravnenie_tovarov]]`
		  &list=`semena`
		  &id=`[[+id]]`
		  &tpl=`addComparisonTpl`
		  ]]
		</div>
	  </div>
	</form>
  </div>
</div>

Rrp2010

16 декабря 2019, 23:49

В вашем случае так будет:

<script type="text/javascript"> 
$(document).ready(function(){ $('.ms2_form').on('submit', function(){ }); 

$("button[name='ms2_action']").on('click', function () { 
 
var btn = $(this).parent('.add-cart-button').find('button'); 

var flyimg = $(btn).parents().eq(1).siblings().find('img').eq(0); 

flyToElement($(flyimg), $('.not_empty .glyphicon-shopping-cart')); 

// Анимация кнопки AddCart
//flyToElement($(btn), $('.not_empty .glyphicon-shopping-cart')); 

// Автопрокрутка
$('html, body').animate({ 
'scrollTop' : $("body").position().top 
}); 

}); 
}); 
  
  
function flyToElement(flyer, flyingTo) {
	var $func = $(this);
	var divider = 3;
	var flyerClone = $(flyer).clone();
	$(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
	$('body').append($(flyerClone));
	var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
	var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;
	 
	$(flyerClone).animate({
		opacity: 0.4,
		left: gotoX,
		top: gotoY,
		width: $(flyer).width()/divider,
		height: $(flyer).height()/divider
	}, 700,
	function () {
		$(flyingTo).fadeOut('fast', function () {
			$(flyingTo).fadeIn('fast', function () {
				$(flyerClone).fadeOut('fast', function () {
					$(flyerClone).remove();
				});
			});
		});
	});
}
</script>

Исправить нужно было:

var btn = $(this).parent('.ms2_form').find('button');

На:

var btn = $(this).parent('.add-cart-button').find('button');

Andrew

17 декабря 2019, 05:40

класс! +тысяча в карму вам и спасибо огромное)
всё заработало.
только первый раз когда добавляешь в корзину, то картинка летит куда-то в бок, а уже затем в корзину, я вот что поменял:

flyToElement($(flyimg), $('.not_empty .glyphicon-shopping-cart'));

на:

flyToElement($(flyimg), $('.not_empty .ms2_total_count'));

Andrew

17 декабря 2019, 06:14

всё решил.
поменял на:

flyToElement($(flyimg), $('.basket .dropdown-toggle'));

теперь и первый товар тоже в корзину летит, фух.

Александр Мельник

15 декабря 2019, 19:40

Наверное более правильнее вешать этот код не на клик по кнопке. Ведь клик не всегда будет означать успешное добавление товара в корзину.
Правильнее на
miniShop2.Callbacks.add('Cart.add.response.success', 'orders_add_ok', function(response) {
console.log(response);
});
docs.modx.pro/komponentyi/minishop2/razrabotka/skriptyi-i-stili
Так конечно потеряется контекст и найти картинку через this будет невозможно. Зато напрашивается еще более простой путь — response вернет id товара, если в верстке добавить аналогичный id для изображения товара, то найти и анимировать картинку станет легко.

Andrew

17 декабря 2019, 07:19

Интересно, а для карточки товара есть такое решение?

Rrp2010

17 декабря 2019, 08:38

А что мешает указать нужные классы для карточки товара?

Andrew

17 декабря 2019, 08:45

А оно так сработает? Попробую. Спасибо.
Это новый скрипт надо делать, + к предыдущему?

Andrew

17 декабря 2019, 19:55

Попробовал, не хочет работать, поменять классы не достаточно к сожалению

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Здесь упомянуты:

Компонент	Текущая версия	Закачки
miniShop2	4.4.2-pl от 06.10.2025	26 855
Counters	1.1.0-pl от 02.04.2024	497
mSearch2	1.14.12-pl от 09.01.2025	19 567
pdoTools	2.13.2-pl от 02.09.2021	54 541