Показать анимацию до момента отправки заказа
Здравствуйте!
После нажатия на кнопку отправки заказа ([!msOrder?]]) до момента уведомления об успешном заказе ([[!msGetOrder]]) на сайте проходит примерно 2 секунды, подскажите пожалуйста, как добавить в этот промежуток времени показ какой-нибудь анимации (гифки, например), клиенту, чтоб не было возможности нажать кнопку отправки заказа 100500 раз?
Может посоветуете другие варианты решения проблемы? Оптимизация работы дополнения или запрет отправки нескольких заказов в течение 5 секунд?
Вызываю сниппеты в шаблоне корзины.
Чанки:
my.tpl.msCart
После нажатия на кнопку отправки заказа ([!msOrder?]]) до момента уведомления об успешном заказе ([[!msGetOrder]]) на сайте проходит примерно 2 секунды, подскажите пожалуйста, как добавить в этот промежуток времени показ какой-нибудь анимации (гифки, например), клиенту, чтоб не было возможности нажать кнопку отправки заказа 100500 раз?
Может посоветуете другие варианты решения проблемы? Оптимизация работы дополнения или запрет отправки нескольких заказов в течение 5 секунд?
Вызываю сниппеты в шаблоне корзины.
[[!msCart?tpl=`my.tpl.msCart`]]
[[!msOrder?tpl=`my.tpl.msOrder`]]
[[!msGetOrder?tpl=`my.tpl.msGetOrder`]]
Чанки:
my.tpl.msCart
<div id="msCart">
{if !count($products)}
{'ms2_cart_is_empty' | lexicon}
{else}
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Товар</td>
<td class="description"></td>
<td class="price">Цена</td>
<td class="quantity">{'ms2_cart_count' | lexicon}</td>
<td class="total">{'ms2_cart_remove' | lexicon}</td>
</tr>
</thead>
<tbody>
{foreach $products as $product}
<tr id="{$product.key}">
<td class="cart_product">
{if $product.thumb?}
<img src="{$product.thumb}" alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
{else}
<img 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="{$product.pagetitle}" title="{$product.pagetitle}"/>
{/if}
</td>
<td class="cart_description">
{if $product.id?}
<h4><a href="{$product.id | url}">{$product.pagetitle}</a></h4>
<p>Код на сайте: {$product.id}</p>
{else}
{$product.name}
{/if}
{if $product.options?}
<div class="small">
{$product.options | join : '; '}
</div>
{/if}
</td>
<td class="cart_price">
<p>{$product.price} {'ms2_frontend_currency' | lexicon}</p>
</td>
<td class="cart_quantity count">
<form method="post" class="ms2_form form-inline" role="form">
<input type="hidden" name="key" value="{$product.key}"/>
<div class="form-group">
<button class="btn btn-default" type="submit" name="ms2_action" value="cart/change" onClick="jQuery('#qw').val(parseInt(jQuery('#qw').val())-1);">
-
</button>
<input type="number" pattern="^[1-9]+$*" min="1" id="qw" class="cart_quantity_input input-sm form-control" name="count" value="{$product.count}"/>
<button class="btn btn-default" type="submit" name="ms2_action" value="cart/change" onClick="jQuery('#qw').val(parseInt(jQuery('#qw').val())+1);">
+
</button>
</div>
</form>
</td>
<td class="cart_delete">
<form method="post" class="ms2_form">
<input type="hidden" name="key" value="{$product.key}">
<button class="cart_quantity_delete" type="submit" name="ms2_action" value="cart/remove">
<i class="fa fa-times"></i>
</button>
</form>
</td>
</tr>
{/foreach}
<tr class="footer">
<td class="total" colspan="2"><h4>{'ms2_cart_total' | lexicon}:</h4></td>
<td class="total_count">
<span class="cart_total_price ms2_total_cost">{$total.cost}
{'ms2_frontend_currency' | lexicon}</span>
</td>
<td class="total_weight">
<span class="cart_total_price ms2_total_count">{$total.count}
{'ms2_frontend_count_unit' | lexicon}</span>
</td>
<td class="total_cost">
<form method="post">
<button class="btn btn-default" type="submit" name="ms2_action" value="cart/clean">
<i class="glyphicon glyphicon-remove"></i> Очистить
</button>
</form>
</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
{/if}
</div>
my.tpl.msOrder<div class="shopper-informations container">
<div class="row">
<div class="col-md-12">
<div class="shopper-info">
<p>Информация о покупателе</p>
<div class="status alert alert-success" style="display: none"></div>
<form class="ms2_form contact-form row" method="post">
{foreach $deliveries as $delivery index=$index}
{var $checked = !$order.delivery && $index == 0 || $delivery.id == $order.delivery}
<div class="checkbox">
<label class="delivery input-parent">
<input type="hidden" name="delivery" value="{$delivery.id}" id="delivery_{$delivery.id}"
data-payments="{$delivery.payments | json_encode}"
{$checked ? 'checked' : ''}>
</label>
</div>
{/foreach}
{foreach ['receiver','email','phone'] as $field}
<div class="form-group col-md-4">
<input type="text" id="{$field}" placeholder="{('ms2_frontend_' ~ $field) | lexicon}"
name="{$field}" value="{$form[$field]}"
class="form-control{($field in list $errors) ? ' error' : ''}"
required="required">
</div>
{/foreach}
<div class="col-sm-12">
<div class="buy col-sm-6 col-md-offset-6">
<button class="btn btn-fefault cart ms2_link" type="submit" name="ms2_action" value="order/submit">Подтвердить заказ</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
my.tpl.msGetOrder<p class="title text-center">
Спасибо! Ваш заказ на сумму:
{if $total.delivery_cost}
{$total.cart_cost} {'ms2_frontend_currency' | lexicon} + {$total.delivery_cost}
{'ms2_frontend_currency' | lexicon} =
{/if}
<strong>{$total.cost}</strong> {'ms2_frontend_currency' | lexicon}
ПОДТВЕРЖДЕН!
</p>
<p class="title text-center">В ближайшее время с Вами свяжется наш менеджер.</p>
Буду благодарен за любую подсказку! Комментарии: 3
Пока что изыскания привели только к одному способу — калбаки=)
<script>
miniShop2.Callbacks.Order.submit.before = function() {
miniShop2.Message.success('Заказ обрабатывается!');
return true;
}
</script>
В общем, остановился на этом способе, чуточку приукрасил:
В шаблон корзинки добавил в тело странички:
В шаблон корзинки добавил в тело странички:
<div id="before-load">
<!-- Иконка Font Awesome -->
<i class="fa fa-spinner fa-spin"></i>
</div>
Стили для блока:#before-load {
display: none;
position: fixed; /*фиксированное положение блока*/
left: 0; /*положение элемента слева*/
top: 0; /*положение элемента сверху*/
right: 0; /*положение элемента справа*/
bottom: 0; /*положение элемента снизу*/
background: #fff; /*цвет заднего фона блока*/
z-index: 1001; /*располагаем его над всеми элементами на странице*/
}
#before-load i {
font-size: 70px; /*размер иконки*/
position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/
left: 50%; /*слева 50% от ширины родительского блока*/
top: 50%; /*сверху 50% от высоты родительского блока*/
margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/
}
И вызов скрипта после<script>
miniShop2.Callbacks.Order.submit.before = function() {
//miniShop2.Message.info('Заказ обрабатывается!');
$('#before-load').find('i').fadeIn().end().delay(400).fadeIn('slow');
return true;
}
</script>
За лоадер спасибо этому сайту https://itchief.ru/lessons/javascript/preloader-for-site
«И вызов скрипта после...»
тут должен был быть вызов дефолтного скрипта минишоп2, то есть — калбэк вызывать после
тут должен был быть вызов дефолтного скрипта минишоп2, то есть — калбэк вызывать после
<script type="text/javascript" src="/assets/components/minishop2/js/web/default.js?v=******"></script>
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.