Анимация добавления товара в корзину, Minishop2
Привет всем!
Может кому-то пригодится данное решение. Анимация при добавлении товара в корзину.
На странице каталога подключаем скрипт:
И вызов:
Можно анимировать кнопку AddCart.
Все настроено под стандартную верстку Minishop2 или можно поправить .eq(1) 1,2,3… в зависимости от вложенности.
Пример
Вариант 2
Просто вставляем на странице каталога:
Может кому-то пригодится данное решение. Анимация при добавлении товара в корзину.
На странице каталога подключаем скрипт:
<script type='text/javascript' src="js/fly.js"></script>И вызов:
<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>
Комментарии: 19
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
$(flyerClone).css({ ПРОБЕЛ position: 'absolute'…
прикольная штука…
Вот пример codepen.io/Rs10Fl/pen/JjoRzMe без форм.
срабатывает только сообщение jGrowl
А вот код чанка gridProductTpl:
Исправить нужно было:
На:
всё заработало.
только первый раз когда добавляешь в корзину, то картинка летит куда-то в бок, а уже затем в корзину, я вот что поменял:
на:
поменял на:
теперь и первый товар тоже в корзину летит, фух.
Правильнее на
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 для изображения товара, то найти и анимировать картинку станет легко.
Это новый скрипт надо делать, + к предыдущему?