Налаштування односторінкового оформлення замовлення (checkout) в 1С-Бітрікс
Коли користувач доходить до оформлення замовлення, кожен додатковий крок відсіює 5–10% покупців. Багатосторінковий checkout із 3–4 етапів дає гарантовану втрату 15–25% клієнтів на шляху до оплати. Односторінковий режим ONE_PAGE компонента bitrix:sale.order.ajax вирішує цю проблему: усі блоки — дані покупця, доставка, оплата — відображаються на одній сторінці та оновлюються через AJAX без перезавантажень. Ми реалізували десятки таких checkout'ів для проєктів із каталогами від 50 000 до 500 000 товарів і знаємо всі підводні камені. Налаштування односторінкового оформлення замовлення (checkout) в 1С-Бітрікс потребує не просто ввімкнення режиму, а й доопрацювань — збереження даних у localStorage, кешування розрахунків доставки, обробки тайм-аутів AJAX-запитів. Докладніше про технологію AJAX можна прочитати в Wikipedia. Офіційна документація щодо компонента — dev.1c-bitrix.ru.
Проблеми, які вирішуємо
Втрата даних при F5
Компонент не зберігає введені дані ні в сесії, ні в localStorage. При перезавантаженні сторінки всі поля стають порожніми — для користувача це катастрофа. Рішення: додати обробник onchange на всі поля форми, який записує дані в localStorage, і при DOMContentLoaded відновлювати їх. Реалізація займає 2–3 години і dramatically покращує UX.
Повільні розрахунки доставки
Найвужче місце — розрахунок доставки через зовнішні сервіси (Нова Пошта, Укрпошта). Якщо API відповідає повільно, користувач бачить спіннер. Ми використовуємо кешування з ключем {city_id}_{weight}_{price} і TTL 30 хвилин. На одному з проєктів це знизило час завантаження checkout на 40%.
Некорректна робота декількох відвантажень
Режим ONE_PAGE погано підтримує кошики, де товари потребують різних умов доставки. У стандартному компоненті список служб може відображатися некоректно. Для таких випадків ми розробляємо кастомний checkout із поділом на підсекції.
Як ми це робимо
Підключення режиму ONE_PAGE
У параметрах компонента на сторінці оформлення замовлення:
$APPLICATION->IncludeComponent( 'bitrix:sale.order.ajax', '', [ 'DELIVERY_MODE' => 'ONE_PAGE', 'SHOW_DELIVERY_PICTURE' => 'Y', 'SHOW_DELIVERY_DESCRIPTION' => 'N', 'PAY_FROM_ACCOUNT' => 'N', 'SHOW_VAT' => 'N', ] ); У режимі ONE_PAGE компонент при зміні будь-якого поля (зміна міста, вибір служби доставки) відправляє AJAX-запит і оновлює залежні блоки — вартість доставки, доступні платіжні системи.
Налаштування AJAX-оновлення блоків
У шаблоні односторінкового checkout за AJAX-оновлення відповідає об'єкт orderAjax — він ініціалізується в order_ajax.php шаблону. При зміні поля «Місто» викликається orderAjax.updateDelivery(), яка:
- Запитує доступні служби доставки для вказаного міста через
\Bitrix\Sale\Delivery\Services\Manager::getRestrictedObjectsList() - Розраховує вартість кожної через
\Bitrix\Sale\Delivery\Services\Base::calculate() - Оновлює блок доставки без перезавантаження сторінки
Якщо розрахунок займає більше 1–2 секунд (наприклад, зовнішній API СДЕК повільно відповідає) — користувач бачить спіннер. Це нормально, але варто додати тайм-аут і кешування розрахунків за кодом міста та вагою кошика.
Кешування розрахунків доставки
Кешування реалізується через Bitrix\Main\Data\Cache. Ключ формується як delivery_calc_{city_id}_{weight}_{price}. TTL встановлюється 30 хвилин. Це дозволяє скоротити час відповіді на 40% і знизити навантаження на зовнішні API.
Процес оцінки та роботи
- Збір даних — аналіз поточного checkout, конфігурації компонента та бізнес-вимог.
- Аудит/аналіз — виявлення вузьких місць, втрат даних, проблем із доставкою.
- Проєктування — визначення архітектури збереження даних, кешування, AJAX-логіки.
- Оцінка — розрахунок вартості та термінів на основі виявлених особливостей.
- Розробка — перемикання на ONE_PAGE, реалізація localStorage, кешування, доопрацювання AJAX.
- Тестування — перевірка на кошиках різного обсягу (до 500+ товарів), різних містах і сценаріях.
- Запуск — передача документації та доступів.
Орієнтири за термінами
- Перемикання на режим ONE_PAGE та налаштування шаблону — від 1 до 2 робочих днів.
- Додавання localStorage-збереження, кешування розрахунків доставки та доопрацювань AJAX-логіки — від 2 до 4 днів.
Терміни уточнюються після аналізу вашого проєкту.
Типові помилки та їх рішення
| Помилка | Рішення |
|---|---|
| Втрата даних при F5 | Збереження полів у localStorage |
| Повільні розрахунки доставки | Кешування за містом/вагою |
| Конфлікт із SEO-плагінами | noindex сторінки checkout |
| Некорректні декілька відвантажень | Кастомна розробка підсекцій |
Наша компанія
Ми займаємося розробкою на 1С-Бітрікс та Бітрікс24 понад 7 років. Реалізували 40+ checkout'ів для інтернет-магазинів із товарообігом до 2 млн ₴/міс. Гарантуємо стабільність рішення: надаємо страховку від збоїв — якщо після впровадження checkout працює некоректно, виправляємо безплатно протягом 30 днів. Середня економія клієнтів становить суттєву суму за рахунок зниження відвалу. Отримайте консультацію щодо вашого проєкту — зв'яжіться з нами для оцінки checkout.