Оформление заказа

Страница оформления заказа — завершающий этап покупки. MiniShop3 предоставляет готовый шаблон и чанк формы заказа с контактными данными, выбором доставки и оплаты.

Структура страницы

Компонент	Файл	Имя чанка в БД	Назначение
Шаблон страницы	elements/templates/order.tpl	—	Разметка страницы, вызов msOrder
Чанк формы	elements/chunks/ms3_order.tpl	tpl.msOrder	Форма оформления заказа

Вызов сниппета

{'!msOrder' | snippet : [
    'tpl' => 'tpl.msOrder'
]}

Кэширование

Сниппет msOrder должен вызываться некэшированно (!msOrder), так как работает с сессией пользователя.

Форма заказа

Форма содержит следующие секции:

Секция	Описание
Пустая корзина	Сообщение и ссылка на каталог (если корзина пуста)
Контактные данные	Имя, фамилия, email, телефон, комментарий
Способы оплаты	Радиокнопки с логотипом и описанием
Способы доставки	Радиокнопки с логотипом и описанием
Адрес доставки	Индекс, регион, город, улица, дом, подъезд, этаж, квартира
Сохранённые адреса	Выпадающий список ранее сохранённых адресов (для авторизованных)
Итоговая панель	Стоимость товаров, доставки, итого, кнопки отмены и оформления

Плейсхолдеры

В чанке формы доступны следующие данные:

Плейсхолдер	Тип	Описание
$isCartEmpty	bool	Корзина пуста
$form	array	Значения полей формы ($form.first_name, $form.email и т.д.)
$order	array	Данные заказа ($order.cost, $order.delivery_cost, $order.cart_cost)
$deliveries	array	Способы доставки
$payments	array	Способы оплаты
$addresses	array	Сохранённые адреса клиента
$isCustomerAuth	bool	Клиент авторизован

Связь доставки и оплаты

Каждая доставка содержит массив payments с ID доступных способов оплаты. JavaScript автоматически фильтрует оплаты при смене доставки.

Валидация

Как работает валидация полей

Обязательные поля и правила валидации настраиваются для каждого способа доставки в админ-панели. Это позволяет, например, требовать полный адрес для курьерской доставки, но только email для самовывоза.

Подробная документация по настройке правил валидации — в разделе Настройка доставок → Валидация полей заказа.

Процесс валидации

1. При добавлении значения поля (ms3.order.setField) — сервер проверяет его по правилам доставки
2. При отправке заказа — сервер проверяет, что все обязательные поля заполнены
3. При ошибке — фронтенд подсвечивает проблемные поля

Отображение ошибок

Каждое поле формы содержит контейнер .invalid-feedback. При ошибке валидации JavaScript добавляет класс is-invalid на поле и текст ошибки в контейнер:

<input type="text" name="email" class="form-control"
       value="{$form.email}">
<div class="invalid-feedback"></div>

Валидация чекбоксов

Для обязательного чекбокса (например, согласие с условиями) используйте правило accepted в настройках доставки. Оно проверяет, что значение равно "yes", "on", "1" или true.

JavaScript API

Объект ms3.order

// Оформить заказ
ms3.order.submit();

// Обновить способ доставки
ms3.order.setDelivery(deliveryId);

// Обновить способ оплаты
ms3.order.setPayment(paymentId);

// Обновить поле формы
ms3.order.setField('city', 'Москва');

События

// Перед отправкой заказа
document.addEventListener('ms3:order:before-submit', (e) => {
    console.log('Данные заказа:', e.detail);
    // Можно отменить отправку: e.preventDefault()
});

// После успешного оформления
document.addEventListener('ms3:order:success', (e) => {
    console.log('Заказ создан:', e.detail.order_id);
    window.location.href = e.detail.redirect;
});

// При ошибке оформления
document.addEventListener('ms3:order:error', (e) => {
    console.error('Ошибки:', e.detail.errors);
});

// При изменении способа доставки
document.addEventListener('ms3:order:delivery-changed', (e) => {
    console.log('Выбрана доставка:', e.detail.delivery_id);
});

// При изменении способа оплаты
document.addEventListener('ms3:order:payment-changed', (e) => {
    console.log('Выбрана оплата:', e.detail.payment_id);
});

Серверные события

События полей заказа

Событие	Когда	Параметры
msOnBeforeAddToOrder	Перед добавлением поля	key, value, draft
msOnAddToOrder	После добавления поля	key, value, draft
msOnBeforeRemoveFromOrder	Перед удалением поля	key, draft
msOnRemoveFromOrder	После удаления поля	key, draft

События валидации

Событие	Когда	Параметры
msOnBeforeValidateOrderValue	Перед валидацией значения	key, value, orderData
msOnValidateOrderValue	Валидация пройдена	key, value
msOnErrorValidateOrderValue	Ошибка валидации	key, value, error

События оформления

Событие	Когда	Параметры
msOnSubmitOrder	Перед началом оформления	handler, draft, orderData, data
msOnBeforeCreateOrder	Перед созданием заказа	handler, msOrder
msOnCreateOrder	После создания заказа	handler, msOrder

Кастомизация

Изменение формы заказа

1. Создайте свой чанк, например tpl.myOrder
2. Укажите его в вызове: 'tpl' => 'tpl.myOrder'
3. Используйте доступные плейсхолдеры из документации msOrder

Добавление кастомных полей

Кастомные поля (не входящие в стандартную модель заказа) обрабатываются в два этапа:

1. Валидация — через правила валидации доставки.

Добавьте поле в JSON-режиме настроек доставки:

{
  "first_name": "required",
  "email": "required|email",
  "agree": "accepted"
}

2. Сохранение — через плагин, если значение кастомного поля нужно сохранить в заказе.

Стандартные поля (first_name, email, city и т.д.) сохраняются автоматически. Кастомные поля (не из модели msOrder / msOrderAddress) нужно сохранять в properties заказа через плагин:

switch ($modx->event->name) {
    case 'msOnBeforeCreateOrder':
        // $msOrder доступен из параметров события
        $address = $msOrder->Address;
        if ($address) {
            $properties = $msOrder->get('properties') ?: [];
            $properties['agree'] = $address->get('properties')['agree'] ?? '';
            $msOrder->set('properties', $properties);
        }
        break;
}

Подсказка

Если кастомное поле используется только для валидации (например, чекбокс «Согласен с условиями»), сохранять его не обязательно — достаточно правила accepted в настройках доставки.

Адаптивная вёрстка

Форма использует Bootstrap 5 Grid:

Экран	Колонки
< 992px	По одной секции в ряд (100%)
≥ 992px	По две секции в ряд (50% + 50%)