Анимация добавления товара в корзину, 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
modx.pro
4
2 835
0

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

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

                          на:
                          flyToElement($(flyimg), $('.not_empty .ms2_total_count'));
                          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
        17 декабря 2019, 07:19
        0
        Интересно, а для карточки товара есть такое решение?
          Rrp2010
          17 декабря 2019, 08:38
          0
          А что мешает указать нужные классы для карточки товара?
            Andrew
            17 декабря 2019, 08:45
            0
            А оно так сработает? Попробую. Спасибо.
            Это новый скрипт надо делать, + к предыдущему?
              Andrew
              17 декабря 2019, 19:55
              0
              Попробовал, не хочет работать, поменять классы не достаточно к сожалению
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            19