Анимация добавления товара в корзину, 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
Rrp2010
26 января 2018, 08:44
modx.pro
5
3 524
0

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

Andrew
Andrew
15 декабря 2019, 19:28
0
чёт не хочет работать…
    Rrp2010
    Rrp2010
    15 декабря 2019, 20:11
    0
    Посмотрите рабочий пример https://codepen.io/Rs10Fl/pen/YYmqVN должно получиться
      Andrew
      Andrew
      15 декабря 2019, 20:34
      0
      Пробовал этот код на страницу категории, вообще перестает работать, белый экран…
        Rrp2010
        Rrp2010
        15 декабря 2019, 21:04
        0
        У вас наверное включен Fenom, добавьте пробел между фигурной скобкой в этой строке:
        $(flyerClone).css({ ПРОБЕЛ position: 'absolute'…
          Andrew
          Andrew
          15 декабря 2019, 21:25
          0
          точно, с пробелом страница работает, а анимация не хочет..( хм…
          прикольная штука…
            Andrew
            Andrew
            15 декабря 2019, 21:45
            0
            оно и в примере как то через раз выдаёт ошибку…
              Rrp2010
              Rrp2010
              15 декабря 2019, 22:38
              0
              Какую ошибку? Там в примере срабатывает submit формы, поэтому страница перезагружается.
              Вот пример codepen.io/Rs10Fl/pen/JjoRzMe без форм.
                Andrew
                Andrew
                15 декабря 2019, 22:51
                0
                без форм теперь нормально работает в примере, но у меня на странице категории не хочет… как с формами, так и без них…
                  Andrew
                  Andrew
                  15 декабря 2019, 23:14
                  0
                  блин, в примерах работает отлично, а на сайте не хочет…
                  срабатывает только сообщение jGrowl
                    Rrp2010
                    Rrp2010
                    15 декабря 2019, 23:40
                    0
                    Покажите содержимое чанка вывода товара в категорию. Или сами попробуйте отладить в codepen.io/Rs10Fl/pen/JjoRzMe
                      Andrew
                      Andrew
                      16 декабря 2019, 00:12
                      0
                      Вот шаблон категории:
                      <!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
                        Rrp2010
                        16 декабря 2019, 23:49
                        1
                        +1
                        В вашем случае так будет:
                        <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
                          Andrew
                          17 декабря 2019, 05:40
                          0
                          класс! +тысяча в карму вам и спасибо огромное)
                          всё заработало.
                          только первый раз когда добавляешь в корзину, то картинка летит куда-то в бок, а уже затем в корзину, я вот что поменял:
                          flyToElement($(flyimg), $('.not_empty .glyphicon-shopping-cart'));

                          на:
                          flyToElement($(flyimg), $('.not_empty .ms2_total_count'));
                          Andrew
                          Andrew
                          17 декабря 2019, 06:14
                          0
                          всё решил.
                          поменял на:
                          flyToElement($(flyimg), $('.basket .dropdown-toggle'));

                          теперь и первый товар тоже в корзину летит, фух.
      Александр Мельник
      Александр Мельник
      15 декабря 2019, 19:40
      +1
      Наверное более правильнее вешать этот код не на клик по кнопке. Ведь клик не всегда будет означать успешное добавление товара в корзину.
      Правильнее на
      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
        Andrew
        17 декабря 2019, 07:19
        0
        Интересно, а для карточки товара есть такое решение?
          Rrp2010
          Rrp2010
          17 декабря 2019, 08:38
          0
          А что мешает указать нужные классы для карточки товара?
            Andrew
            Andrew
            17 декабря 2019, 08:45
            0
            А оно так сработает? Попробую. Спасибо.
            Это новый скрипт надо делать, + к предыдущему?
              Andrew
              Andrew
              17 декабря 2019, 19:55
              0
              Попробовал, не хочет работать, поменять классы не достаточно к сожалению
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            19