Оформление заказа в корзине: адаптация тем дизайна

В Shop-Script 8 появился ещё один способ оформления заказа — на одной странице с корзиной. Расскажем, как адаптировать темы дизайна для поддержки нового режима, а также о возможностях для работы с корзиной и оформлением заказа.

Подключение оформления заказа в корзине

Создайте файл order.html в теме дизайна для приложения Shop-Script и объявите его в theme.xml. Пример файла можно посмотрить в исходном коде темы дизайна «Дефолт».

В настройках витрины для настройки «Вид оформления заказа» выберите «Оформление заказа в корзине».

Витрина должна уметь поддерживать и пошаговое оформление заказа. Для формирования актуальных ссылок на корзину или страницу оформления используйте методы шаблонов Webasyst:

{$wa->shop->checkout()->cartUrl( $absolute = false )} {* ссылка на корзину *} 
{$wa->shop->checkout()->url( $absolute = false )} {* ссылка на страницу оформления заказа *}

Оформление

Файл order.html решает две задачи:

1. Отображение пустой корзины, когда покупатель ещё не выбрал товары для покупки.
2. Отображение корзины и формы оформления заказа с помощью методов шаблонов:
   • Блок корзины

     <div id="js-order-cart">
         {$wa->shop->checkout()->cart([
            "wrapper" => "#js-order-cart"
         ])}
     </div>
     

   • Блок оформления заказа

     <div id="js-order-form">
         {$wa->shop->checkout()->form([
            "wrapper" => "#js-order-form"
         ])}
     </div>
     

Допустимые параметры для этих методов:

• wrapper string Обязательный параметр, содержащий селектор контейнера блока. На этот элемент будут ссылаться события и ему будут присваиваться data-атрибуты, необходимые для оформления заказа.
• DEBUG bool Выводит в консоли браузера информацию о ходе работы. Значение по умолчанию — false.
• adaptive bool Включает применение внутренних адаптивных стилей к элементам блока. По умолчанию — true.

При успешном оформлении заказа пользователь автоматически перенаправляется на страницу с адресом checkout/success/.

Доступные события JavaScript

Корзина

• wa_order_cart_ready: корзина загрузилась, контроллер инициировался. В параметрах передается ссылка на контроллер.
• wa_order_cart_changed: содержимое корзины было изменено на сервере. В параметрах передаются обновлённые данные с сервера.
• wa_order_cart_rendered: корзина визуально обновлена на основе данных с сервера. В параметрах передаются обновлённые данные с сервера.
• wa_order_cart_cleared: корзина очищена. В параметрах передаются обновлённые данные с сервера.
• wa_order_cart_reloaded: DOM корзины перезаписан. В параметрах передается ссылка на новый контроллер.

Форма оформления заказа

• wa_order_form_ready: форма загрузилась, контроллер инициировался. В параметрах передается ссылка на контроллер.
• wa_order_form_changed: DOM некоторых блоков формы перезаписан. В параметрах передаются обновлённые данные с сервера.
• wa_order_form_(auth | region | shipping | details | payment | confirm)_changed: DOM соответствующего блока формы перезаписан. В параметрах передаются обновлённые данные с сервера.
• wa_order_form_reloaded: DOM формы перезаписан. В параметрах передается ссылка на новый контроллер.
• wa_order_form_created: в параметрах передаются обновлённые данные с сервера.

Если вам требуются дополнительные события, напишите о них в комментариях.

Особенности и рекомендации

Версии браузеров

Страница оформления заказа в корзине работает в большинстве последних версий браузеров Chrome, Firefox, Safari и Edge и Internet Explorer не ниже 11-й версии.

Рекомендации по оформлению

• В файле order.html реализуйте вёрстку контейнеров для корзины и формы заказа. Важно предусмотреть их адаптивность для мобильных устройств и других устройств с малой шириной экрана.
• Ширина каждого блока не менее 375px.
• При ширине экрана свыше 900px блоки выравниваются по горизонтали.
• Каждый блок содержит стандартные адаптивные стили. Если разработчику требуется написание собственных стилей адаптации, передайте параметр "adaptive" => false при формировании HTML-кода блока.
• Рекомендуется не делать серьёзных структурных изменений в стилях CSS в оформлении элементов. Некоторые JavaScript-скрипты зависят от свойств элементов (пример: слайдер с фото).
• Рекомендуется не изменять JavaScript-логику внутренних контроллеров и взаимодействовать посредством событий, которые выполняются на "wrapper", указанный при формировании HTML-кода блока.

График работы магазина

В Shop-Script 8 график работы магазина настраивается более гибко, чем раньше, поэтому тема дизайна теперь должна уметь обработать массив данных о днях и часах работы магазина и показать результат посетителям сайта. Информацию о графике работы возвращает метод

{$wa->shop->schedule()}

В возвращаемом массиве элемент с ключом current_week содержит подмассив элементов, которые соответствуют дням недели. Каждый день недели здесь — массив со следующими ключами:

• name string: название дня недели
• work bool: флаг, обозначающий рабочий день
• start_work string: время начала работы
• end_work string: время окончания работы
• end_processing string: время окончания обработки заказов

В этом массиве учитываются настройки для дней недели и дополнительных рабочих и выходных дней.

Массив, возвращаемый методом {$wa->shop->schedule()}, содержит, кроме current_week, также следующие элементы:

• mode string: значение 'default' (используется общий график работы магазина) или 'custom' (используется собственный график работы в настройках оформления заказа в корзине для этой витрины)
• timezone string: Идентификатор временной зоны, выбранной в настройках графика работы
• week array: массив настроек для каждого из дней недели без учёта дополнительных рабочих и выходных дней
• extra_workdays array: массив информации о дополнительных рабочих днях — каждый в виде массива с ключами
  • date: дата в формате DATE SQL
  • start_work
  • end_work
  • end_processing
• extra_weekends array: массив дат дополнительных выходных дней в формате DATE SQL

Пример использования данных графика работы есть в исходном коде темы дизайна «Дефолт».

Формы авторизации, регистрации и восстановления пароля

Расширены возможности системных методов, которые формируют HTML-код форм авторизации, регистрации и восстановления пароля. Например, чтобы показать рядом с формой авторизации или регистрации иконки настроенных адаптеров соцсетей, достаточно передать в метод параметр show_oauth_adapters.

{* Авторизация *}
{$wa->loginForm($error, [
    'show_oauth_adapters' => true
])}

{* Регистрация *}
{$wa->signupForm($errors, [
    'show_oauth_adapters' => true
])}

Обмен данными между формами и сервером происходит в формате JSON. Благодаря этому удобно встраивать формы во всплывающие диалоги.

При взаимодействии пользователя с формой обрабатываются следующие события JavaScript:

• wa_auth_form_loaded: форма авторизации загрузилась.
• wa_auth_form_change_view: DOM формы изменился (например, показались сообщения об ошибках, появилось поле для ввода кода и т. п.).
• wa_auth_contact_logged: контакт авторизован. В качестве параметра передаётся объект contact с единственным полем id.
• wa_auth_set_password: событие, сообщающее о возможности перехода на форму setpassword. В параметрах передаётся строка hash — у этого значения ограниченное время жизни, оно необходимо для установки нового пароля. Без валидного хеша форма setpassword вернёт ошибку 404.
• wa_auth_reset_password: новый пароль установлен.
• wa_auth_resent_password: пароль отправлен пользователю.
• wa_auth_contact_signed: контакт зарегистрировался. В качестве параметров передаются флаг password_sent — был ли отправлен пароль пользователю в режиме генерации пароля, и объект contact с единственным полем id. При возникновении ошибки параметр contact может иметь тип undefined.