Анимация добавления товара в корзину, 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>
26 января 2018, 08:44
Комментарии: 19
Посмотрите рабочий пример https://codepen.io/Rs10Fl/pen/YYmqVN должно получиться
Какую ошибку? Там в примере срабатывает submit формы, поэтому страница перезагружается.
Вот пример codepen.io/Rs10Fl/pen/JjoRzMe без форм.
Вот пример codepen.io/Rs10Fl/pen/JjoRzMe без форм.
Покажите содержимое чанка вывода товара в категорию. Или сами попробуйте отладить в codepen.io/Rs10Fl/pen/JjoRzMe
Вот шаблон категории:
<!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><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>
В вашем случае так будет:
На:
<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');
класс! +тысяча в карму вам и спасибо огромное)
всё заработало.
только первый раз когда добавляешь в корзину, то картинка летит куда-то в бок, а уже затем в корзину, я вот что поменял:
на:
всё заработало.
только первый раз когда добавляешь в корзину, то картинка летит куда-то в бок, а уже затем в корзину, я вот что поменял:
flyToElement($(flyimg), $('.not_empty .glyphicon-shopping-cart'));на:
flyToElement($(flyimg), $('.not_empty .ms2_total_count'));
Наверное более правильнее вешать этот код не на клик по кнопке. Ведь клик не всегда будет означать успешное добавление товара в корзину.
Правильнее на
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 для изображения товара, то найти и анимировать картинку станет легко.
Правильнее на
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 для изображения товара, то найти и анимировать картинку станет легко.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| miniShop2 | 4.4.0-pl от 06.08.2024 | 26 105 |
| Counters | 1.1.0-pl от 02.04.2024 | 461 |
| mSearch2 | 1.14.11-pl от 02.05.2023 | 18 908 |
| pdoTools | 2.13.2-pl от 02.09.2021 | 54 173 |
Вчера в 20:31
Правильный вариант из текущей документации такой:
{set $condition = 1}
{switch $condition}
{case 0, 1, 2}
сработае...
Вчера в 13:39
Моя кофейная гуща говорит о том, что это код html и там есть смайлики, а кодировка бд не utf8mb4.
23 ноября 2024, 11:51
Отличное дополнение, спасибо!
Подскажите, как организовать файл если стоит msOptionsPrice2 привязан к опции size там может быть много позиций с разн...
23 ноября 2024, 00:42
Еще снова вернулась проблемка, после выбора способа доставки почтой РФ — появляется стоимость доставки, но она «прилипает» и не исчезает после переклю...
22 ноября 2024, 21:57
Лучше деинсталировать и установить новую версию. Там полностью переписан JS.
22 ноября 2024, 20:33
Фильтрация как правило предполагает точное совпадения значений, а тебе нужен поиск.
22 ноября 2024, 19:55
Все исправилось, после замены на 'parents' => $_modx->resource.id
