Умная кнопка <Оформить заказ>

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #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 можно пропустить.
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

Название раздела: Полезные решения для OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Полезные решения для OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 9 гостей