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

Дмитрий Елшин

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

Пример оформления заказа в корзине. Тема дизайна "Default".

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

Создайте файл 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.
7 ноября 2018
  • golubevmark Webasyst 26 марта 2020 10:54

    Здравствуйте.

    Страница оформления заказа основана на jQuery версии 1.11.х. Очевидно что вам нужно думать в сторону jQuery Migrate. Хочу также заметить, что помимо основной библиотеки, там используется jQuery UI под ту версию jQuery, что я писал выше.

  • marsianin 1 мая 2020 17:34

    Подскажите, как в одностраничной корзине сделать маску ввода номера телефона? Сделал вот так 

    $(document).ready(function() {
    $(".wa-phone").inputmask("+7 999 999 99 99");

    });

    Но оно не всегда срабатывает, а при любом изменении корзины маска слетает . 

    И еще хотелось бы сделать что бы на мобильных устройствах отображалась цифровая клавиатура (input type=tel), а не обычная qwerty (для поля телефон). Сейчас использую стандартную одностраничную страницу оформления заказа (не от темы дизайна).

    Можно это как то сделать?

  • golubevmark Webasyst 6 мая 2020 11:48

    Здравствуйте

    1. type="tel" скорее всего добавим в ближайшем релизе.

    2. Что касается вашей "маски", то этот вопрос стоит задавать не здесь, а на форуме разработчиков и думать в сторону событий wa_order_form_ready и wa_order_form_changed описанных в теле статьи.

  • Апельсин 6 мая 2020 16:40

    Не всегда срабатывает, через раз:

    $(document).on("wa_order_cart_ready", function(event, controller) {
    console.log('wa_order_cart_ready');
    });

    т.е. в моем понимании оно должно сработать после каждого обновления страницы заказа, верно?

    wa_order_form_ready - срабатывает каждый раз.

  • marsianin 21 июня 2020 17:15

    В новом чекауте заметил такой косячок. Если способ доставки еще не выбран, то над итоговой суммой заказа отображается 

    Стоимость доставки бесплатно

    Было бы хорошо не показывать слово "бесплатно". Часто клиенты ссылаются на это и говорят "У вас на сайте написано что доставка бесплатная".

  • Андрей sverkunov.ru 21 июня 2020 17:40

    Присоединяюсь к комментарию marsianin — действительно есть такая проблема (некоторые покупатели требуют бесплатной доставки).

  • golubevmark Webasyst 22 июня 2020 10:54

    Господа, пожалуйста, не делайте из статьи почти двух летней давности раздел поддержки. Оформите, пожалуйста, найденные вами баги/недочёты/пожелания через запрос в поддержку. Так вы решите ваши трудности быстрее.

  • Vitaliy pp 3 июля 2021 14:03

    как в корзине везде, где используется стоимость доставки, добавить фразу 'за счет клиента'?



Чтобы добавить комментарий, зарегистрируйтесь или войдите