Умная кнопка <Оформить заказ>
Добавлено: 20.12.2017, 13:40
Часто бывает, особенно когда сервер загружен, при нажатии кнопки <Оформить заказ>, появляется небольшая пауза до перехода на следующую страницу с номером оформленного заказа. За это небольшое время покупатель может быть сбит с толку и нередко нажимает еще раз на ту же кнопку <Оформить заказ>. В результате получаем 2 одинаковых заказа. Возможно при включенной капче на этой форме, такого не происходит, я не пробовал. Но мое твердое убеждение, что на странице оформления заказа капчи быть не должно.
Дополнение решает проблему с дублированием заказов и для спокойствия покупателей показывает спинер на кнопке во время паузы отработки сервера.
1) В файле design/ваш_шаблон/html/cart.tpl
вместо
пишем
2) В файле design/ваш_шаблон/html/scripts.tpl
Блок
заменяем на
3) *В файле design/ваш_шаблон/css/style.css
добавьте следующие стили:
* Если у вас уже установлено дополнение Умная кнопка <В корзину>, пункт 3 можно пропустить.
Дополнение решает проблему с дублированием заказов и для спокойствия покупателей показывает спинер на кнопке во время паузы отработки сервера.
1) В файле design/ваш_шаблон/html/cart.tpl
вместо
Код: Выделить всё
{* Submit button *}
<input class="button fn_checkout" type="submit" name="checkout" data-language="cart_checkout" value="{$lang->cart_checkout}">
пишем
Код: Выделить всё
{* Submit button *}
<input class="button fn_checkout" type="submit" name="checkout" data-language="cart_checkout" value="{$lang->cart_checkout}">
<div class="button hidden spinner" data-language="cart_checkout">{$lang->cart_checkout}</div>
2) В файле design/ваш_шаблон/html/scripts.tpl
Блок
Код: Выделить всё
if($(".fn_validate_cart").size()>0) {
$(".fn_validate_cart").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
captcha_code: "required"
},
messages: {
name: form_enter_name,
email: form_enter_email,
captcha_code: form_error_captcha
}
});
}
заменяем на
Код: Выделить всё
if($(".fn_validate_cart").size()>0) {
$(".fn_validate_cart").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
captcha_code: "required"
},
messages: {
name: form_enter_name,
email: form_enter_email,
captcha_code: form_error_captcha
},
submitHandler: function(form) {
$( '.fn_checkout' ).addClass('hidden');
$( '.fn_checkout' ).next().removeClass('hidden');
form.submit();
}
});
}
3) *В файле design/ваш_шаблон/css/style.css
добавьте следующие стили:
Код: Выделить всё
.spinner {
position: relative;
}
@keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner .6s linear infinite;
}
* Если у вас уже установлено дополнение Умная кнопка <В корзину>, пункт 3 можно пропустить.