Сообщение #1 makki » 20.12.2017, 13:40
Часто бывает, особенно когда сервер загружен, при нажатии кнопки <Оформить заказ>, появляется небольшая пауза до перехода на следующую страницу с номером оформленного заказа. За это небольшое время покупатель может быть сбит с толку и нередко нажимает еще раз на ту же кнопку <Оформить заказ>. В результате получаем 2 одинаковых заказа. Возможно при включенной капче на этой форме, такого не происходит, я не пробовал. Но мое твердое убеждение, что на странице оформления заказа капчи быть не должно.
Дополнение решает проблему с дублированием заказов и для спокойствия покупателей показывает спинер на кнопке во время паузы отработки сервера.
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 можно пропустить.
Часто бывает, особенно когда сервер загружен, при нажатии кнопки <Оформить заказ>, появляется небольшая пауза до перехода на следующую страницу с номером оформленного заказа. За это небольшое время покупатель может быть сбит с толку и нередко нажимает еще раз на ту же кнопку <Оформить заказ>. В результате получаем 2 одинаковых заказа. Возможно при включенной капче на этой форме, такого не происходит, я не пробовал. Но мое твердое убеждение, что на странице оформления заказа капчи быть не должно.
Дополнение решает проблему с дублированием заказов и для спокойствия покупателей показывает спинер на кнопке во время паузы отработки сервера.
[b]1) В файле design/ваш_шаблон/html/cart.tpl[/b]
вместо
[code] {* Submit button *}
<input class="button fn_checkout" type="submit" name="checkout" data-language="cart_checkout" value="{$lang->cart_checkout}">[/code]
пишем
[code] {* 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>[/code]
[b]2) В файле design/ваш_шаблон/html/scripts.tpl[/b]
Блок
[code]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
}
});
}[/code]
заменяем на
[code] 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();
}
});
}[/code]
[b]3) *В файле design/ваш_шаблон/css/style.css [/b]
добавьте следующие стили:
[code].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;
}[/code]
* Если у вас уже установлено дополнение [url=https://forum.okay-cms.com/viewtopic.php?f=10&t=637]Умная кнопка <В корзину>[/url], пункт 3 можно пропустить.
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)