Подключение в теме
Обновлено
Автоматическое подключение
В теме со стандартным одностраничным оформлением капча подключается автоматически. Место выбирается в настройке «Где показывать». Публичного Smarty-хелпера для ручного вызова у плагина нет. Отдельного шаблона витрины для переопределения также нет: HTML блока формируется в классе shopOrdercaptchaCheckout.
В оформлении виджет SmartCaptcha расположен между итогом заказа и кнопкой «К оплате».
События и обработчики
Плагин подключается к следующим событиям оформления заказа:
| Событие Shop-Script | Метод shopOrdercaptchaPlugin |
Назначение |
|---|---|---|
checkout_render_auth |
checkoutRenderAuth($params, $event_name) |
Блок после контактных данных |
checkout_render_shipping |
checkoutRenderShipping($params, $event_name) |
Блок после выбора доставки |
checkout_render_details |
checkoutRenderDetails($params, $event_name) |
Блок после данных получателя |
checkout_render_payment |
checkoutRenderPayment($params, $event_name) |
Блок после выбора оплаты |
checkout_render_confirm |
checkoutRenderConfirm($params, $event_name) |
Основной либо резервный вывод у кнопки |
checkout_after_confirm |
checkoutAfterConfirm(&$params, $event_name) |
Серверная проверка при создании заказа |
Эти методы вызывает Shop-Script. Не нужно вызывать их вручную из темы.
Пример вывода результата события
В стандартном шаблоне подтверждения Shop-Script вывод результата события расположен внутри формы после кнопки. Если вы разрабатываете собственный шаблон на основе стандартного оформления, сохраните этот участок:
{* @event checkout_render_confirm *}
{foreach $event_hook.confirm as $_}
<div class="wa-plugin-hook">{$_}</div>
{/foreach}Это вывод уже подготовленного Shop-Script результата события, а не вызов хелпера плагина. Пример применим в контексте шаблона оформления, где Shop-Script передаёт $event_hook.
Аналогично стандартные шаблоны шагов используют $event_hook.auth, $event_hook.shipping, $event_hook.details и $event_hook.payment.
Разметка и JavaScript
Скрипт плагина использует jQuery витрины и элементы стандартного оформления:
| Элемент | Для чего используется |
|---|---|
.wa-step-section |
Определение секции шага и её видимости |
.wa-step-confirm-section |
Определение секции подтверждения |
.js-submit-order-button |
Перенос капчи перед кнопкой |
data-action="create" у кнопки |
Определение готовности заказа: до этого блок у кнопки скрыт |
AJAX-запросы с путями /order/calculate и /order/create |
Сохранение и передача ответа, обработка ошибки капчи |
Если выбранный шаг отсутствует, запасной блок поступает через checkout_render_confirm. Если секция существует, но скрыта, JavaScript переносит капчу к кнопке. Поэтому удаление вывода события подтверждения ломает резервный сценарий.
При пересчётах скрипт переносит живое содержимое капчи в новый блок: введённый код, картинку или виджет. CSS подключается при выводе блока, JavaScript встраивается в его разметку автоматически.
Оформление блока
Для собственных стилей темы доступны классы:
.ordercaptcha— общий блок;.ordercaptcha-label— подпись;.ordercaptcha-slot— содержимое системной капчи;.ordercaptcha-error— текст ошибки;.ordercaptcha-has-error— состояние ошибки.
После изменения темы проверьте неверный и правильный ответы, пересчёт доставки, размещение на скрытом шаге и появление капчи перед кнопкой. Картинка плагина использует отдельный ключ сессии, чтобы не пересекаться с картинками других форм магазина на той же странице.
Под виджетом показано сообщение «Неверная капча. Попробуйте ещё раз.».