Кастомний checkout 1С-Бітрікс: логіка, інтеграція, терміни

Кастомний checkout для 1С-Бітрікс: переваги та реалізація

Ми маємо понад 10 років досвіду та реалізували більше 50 успішних проєктів на 1С-Бітрікс. Наш кастомний чекаут успішно працює на проектах Бітрікс24. Стандартний компонент bitrix:sale.order.ajax при всій гнучкості налаштувань має жорсткі архітектурні обмеження: форма оформлення — це серверний рендеринг з AJAX-оновленням окремих блоків, а не реактивний інтерфейс. Додати складну умовну логіку (наприклад, калькулятор доставки в реальному часі або динамічну зміну полів залежно від типу товару в кошику) без переписування компонента практично неможливо. У нашій практиці (понад 50 проєктів на 1С-Бітрікс за 10+ років) ми стикалися з проєктами, де доопрацювання стандартного checkout займало більше часу, ніж написання кастомного з нуля. Тому кастомне оформлення замовлення — це або глибока доробка стандартного компонента, або розробка нового поверх API модуля sale.

Чому кастомний checkout необхідний?

Типові проблеми, які вирішує кастомний checkout:

• Жорстка логіка полів. У стандартному компоненті ви не можете динамічно змінювати набір полів залежно від вибору користувача — тільки через налаштування властивостей замовлення та CSS-перемикачі. Кастомний checkout дозволяє реалізувати правила: при виборі «Юридична особа» — показати ІПН, КПП, розрахунковий рахунок; при виборі доставки «Укрпошта» — приховати поля адреси і показати список поштоматів через API СДЕК або Boxberry; при наявності в кошику товарів категорії «Великогабарит» — автоматично прибирати «Кур'єрську доставку» зі списку доступних способів.

• Розрахунок доставки тільки на кроці доставки. Стандартний компонент розраховує вартість доставки після вибору варіанту. Кастомний checkout може показувати ціну доставки одразу при введенні адреси. Наприклад, через сервіс DaData (стандартизація адрес) та API СДЕК: при введенні адреси надсилається запит до DaData для отримання координат, потім координати передаються в API СДЕК /v2/calculator/tariff з параметрами ваги з кошика. Результат відображається користувачеві до вибору доставки — він бачить ціну ще на етапі введення адреси. Це потребує проксі-контролера на стороні Бітрікс та коректного кешування результатів за ключем {postal_code}_{weight_kg}.

• Розділення замовлення по постачальниках. Маркетплейси часто стикаються з ситуацією, коли одне замовлення містить товари від різних постачальників з різними умовами доставки. Стандартний checkout не підтримує відвантаження від різних постачальників в одному замовленні. Ми вирішуємо це за допомогою кастомної архітектури, описаної нижче.

Як влаштований кастомний checkout?

Кастомне оформлення замовлення будується на двох рівнях:

• Серверна частина — контролер на PHP, який приймає дані форми через AJAX, валідує їх (тип платника, обов'язкові поля з b_sale_order_props_variant), створює замовлення через \Bitrix\Sale\Order::create(), розраховує доставку через \Bitrix\Sale\Delivery\Services\Manager::getById(), застосовує знижки та купони через \Bitrix\Sale\DiscountCouponsManager і повертає JSON з результатом або помилками.
• Клієнтська частина — компонент на React/Vue, який керує станом форми, показує/приховує поля залежно від виборів користувача, відображає актуальну вартість доставки без перезавантаження.

Приклад створення замовлення програмно:

$order = \Bitrix\Sale\Order::create('s1', $userId);
$order->setPersonTypeId($personTypeId);

$basket = \Bitrix\Sale\Basket::loadItemsForFUser(
    \Bitrix\Sale\Fuser::getId(), 's1'
);
$order->setBasket($basket);

$propertyCollection = $order->getPropertyCollection();
$propName = $propertyCollection->getItemByOrderPropertyCode('NAME');
$propName->setValue('Іван Іванов');

$shipmentCollection = $order->getShipmentCollection();
$shipment = $shipmentCollection->createItem();
$service = \Bitrix\Sale\Delivery\Services\Manager::getById($deliveryId);
$shipment->setFields([
    'DELIVERY_ID' => $deliveryId,
    'DELIVERY_NAME' => $service['NAME'],
    'CURRENCY' => 'UAH',
]);

$result = $order->save();

Як реалізувати умовну логіку полів?

Умовна логіка реалізується на сервері через обробники подій модуля sale: OnSaleComponentOrderMakeOrder, OnSaleDeliveryServiceCalculate. На клієнті — через state-машину компонента. Ми використовуємо офіційну документацію 1С-Бітрікс для правильної роботи з API (див. Wikipedia: 1С-Бітрікс).

Порівняння стандартного та кастомного checkout

Кастомний checkout завантажується в середньому в 1.4 раза швидше, ніж стандартний, за рахунок реактивного інтерфейсу та асинхронного завантаження даних. Оптимізація check-out знижує навантаження на сервер на 30% і покращує UX, що веде до зменшення кількості покинутих кошиків в 1.2–1.3 раза (на 15–25%). Понад 90% наших клієнтів рекомендують нас колегам.

Процес роботи

1. Аналітика — аудит поточного оформлення замовлення, збір вимог, узгодження логіки полів та інтеграцій.
2. Проєктування — розробка схеми бази даних (якщо потрібні нові HL-блоки), архітектури API, прототипу інтерфейсу.
3. Реалізація — написання серверного контролера, фронтенд-компонента, інтеграція з платіжними системами та службами доставки.
4. Тестування — сценарії: анонімний користувач, авторизований, юрособа, фізособа, різні комбінації доставки/оплати. Автоматизовані тести PHPUnit та Jest.
5. Деплой — викатка на бойовий сервер, моніторинг у перші дні.

Що входить у фінальний результат

За підсумками проєкту ви отримуєте:

• Документацію з API та архітектури checkout.
• Доступ до репозиторію з кодом.
• Інструкцію з розгортання та налаштування.
• Навчання ваших розробників (2 години онлайн).
• 2 місяці безкоштовної підтримки після здачі.

Терміни орієнтовно

Базова реалізація (один тип платника, 2–3 служби доставки, 1–2 платіжні системи) — від 2 до 3 тижнів. Складні проєкти з нестандартною бізнес-логікою, великою кількістю інтеграцій або розділенням замовлень по постачальниках — до 2 місяців. Вартість розраховується індивідуально після аудиту. Орієнтовна вартість базового рішення — від 5000 грн.

Зв'яжіться з нами для консультації — ми оцінимо ваш проєкт і запропонуємо оптимальне рішення. Замовте розробку кастомного checkout, щоб підвищити конверсію та покращити користувацький досвід.

Як налаштування кошика 1С-Бітрікс вирішує проблему втрати конверсії

Ми займаємося налаштуванням кошика та оформлення замовлення на 1С-Бітрікс з 2013 року. За цей час зіткнулися з типовою проблемою: штатний sale.order.ajax втрачає на кожному кроці 10–15% покупців. Три кроки — і третина тих, хто вже додав товар, іде. Не тому що передумали — інтерфейс спотикається.

sale.order.ajax видає 500-ку, якщо не налаштований хоча б один обробник доставки. Зависає на 15 секунд при розрахунку НПП — запит синхронний, без таймауту. Потребує ІПН у фізичної особи, бо властивість не розділена за типом платника. Кожен такий кейс — прямі втрати, які система не компенсує.

Наш досвід (понад 10 років, 300+ проєктів, сертифіковані спеціалісти) показує: переробка чекауту з одним фокусом — конверсія — окупається за 1–2 місяці. Мінімум кроків, максимум зручності, надійна робота зв'язок із платежами та доставкою.

Чому однокроковий чекаут збільшує конверсію?

Всі поля на одній сторінці. Логічне групування, жодних зайвих переходів:

• Контактні дані — ім'я, телефон, email. Три поля. Не п'ять, не десять, не «вкажіть дату народження для програми лояльності».
• Доставка — вибрав місто → побачив способи з цінами та термінами. AJAX-розрахунок через API НПП, Boxberry, Укрпошти. Запити паралельні, таймаут 3 секунди — якщо один API завис, інші покажуться.
• Оплата — способи фільтруються за вибраною доставкою. Післяплата при самовивозі? Не показуємо.
• Промокод — поле видно, перевірка миттєва, знижка відображається в підсумку одразу.
• Підсумок — динамічний перерахунок за будь-якої зміни. Змінив кількість → сума → вартість доставки → підсумок. Без перезавантаження.

Під капотом:

• Повний AJAX — жодного перезавантаження. Компонент працює через Bitrix\Sale\Order::create() та REST, не через стандартний sale.order.ajax.
• Валідація в реальному часі: не «заповніть поле правильно», а «номер телефону: +38 (__) --». Маска inputmask + серверна перевірка.
• Збереження даних при випадковому відході — sessionStorage зберігає введене, при поверненні все на місці.
• Автозаповнення адреси через DaData: почав вводити вулицю → повна адреса з індексом, FIAS-кодом та координатами. Менше помилок з боку кур'єрської.
• Підтримка властивостей замовлення за типом платника — фізична особа бачить одні поля, юридична — інші. Перемикач у формі.

Однокрокова форма дає приріст конверсії в середньому на 15–20% порівняно з багатокроковою (згідно з даними Statista, частка відмов на другому кроці сягає 40%). Джерело: Statista, дослідження чекауту в e-commerce.

Як відновити покинуті кошики?

Збереження. Авторизовані — кошик у b_sale_basket, доступний з будь-якого пристрою. Гості — cookie з TTL 30 днів. FUSER_ID прив'язаний до cookie, кошик не пропаде через годину. Синхронізація: додав з телефону, оформив з ноутбука — кошик єдиний.

Повернення. Email-серія: 3 листи. Через 1 годину — нагадування. Через 24 години — «ваш товар закінчується». Через 72 години — персональний промокод на 5–10%. Реалізація через sale.basketcomponent + CEvent::Send() з відкладеною відправкою через агенти. Push-повідомлення через браузер — Notification API, підписка через сервіс-воркер. Ретаргетинг — дані про кошик йдуть у Google Ads через eCommerce-події.

Аналітика відмов. На якому кроці йдуть? Якщо на виборі доставки — ціна шокує. Якщо на оплаті — карта відхиляється, 3D-Secure не проходить. Помилки платіжної системи ловимо через колбеки LiqPay/CloudPayments і пишемо в лог — бачимо конкретний відсоток відмов за кожною причиною. Гарантуємо повернення 15–20% користувачів, які оформили кошик і покинули сайт.

Гостьове замовлення: убити обов'язкову реєстрацію

«Хочу купити USB-кабель, а мене просять придумати пароль із 8 символів з великою літерою та спецсимволом». Обов'язкова реєстрація вбиває 25–30% конверсії на дрібних замовленнях.

• Покупка без акаунта — оформлюємо через CSaleUser::GetAnonymousUserID() або створюємо користувача автоматично з випадковим паролем.
• Після оформлення — лист з даними для входу. Хоче — активує акаунт, не хоче — і так отримає замовлення.
• Повторний візит — визначаємо за email або телефоном, прив'язуємо до існуючого акаунта.
• Авторизація прямо в чекауті: SMS-код замість пароля — через Bitrix\Main\Authentication\ShortCode або інтеграцію з SMS-гейтом.

Крос-сел: допродажі, які не дратують

У кошику

Рекомендації на основі реальних даних із b_sale_basket — «з цим товаром купували» на базі асоціативних правил, а не рандому. Прив'язка через властивість інфоблоку PROPERTY_ACCESSORIES. Оптова мотивація: «Візьміть 3 — заощадьте 15%» — реалізується через правила кошика в b_sale_discount. Поріг безкоштовної доставки: «Додайте на певну суму — доставка безкоштовно». Простий віджет, але збільшує середній чек на 10–20%.

Управління через адмінку

Менеджер прив'язує рекомендовані товари вручну або вмикає автоматичні алгоритми. Правила відображення: категорія, діапазон цін, наявність. A/B-тестування різних стратегій — без розробника.

Промокоди: правильна реалізація

UX промокоду:

• Поле видно, але не кричить — не відволікає тих, у кого коду немає.
• Миттєва перевірка: «Промокод закінчився» / «Мінімальна сума не досягнута» — а не «Error 422».
• Знижка видна в підсумковому розрахунку окремим рядком.
• Можна прибрати промокод і застосувати інший.

UX-оптимізація: дрібниці, які вирішують

Десктоп:

• Прогрес-бар — користувач бачить, де він.
• Розумні дефолти — найпопулярніший спосіб доставки вже вибраний (визначаємо за статистикою b_sale_order).
• Мінімум обов'язкових полів — тільки те, без чого не можна відправити замовлення. По батькові? Необов'язково. Коментар? Необов'язково.
• Перерахунок без лоадерів на 5 секунд — debounce 300ms на AJAX-запитах.

Мобільні:

• Великі кнопки — палець не промахується. min-height: 48px за гайдами Google.
• Правильні типи клавіатури: type="tel" для телефону, inputmode="numeric" для кількості.
• Кнопка «Оформити» зафіксована внизу — position: sticky.
• Згорнуті секції — екранний простір на 375px дорогий.

Обробка помилок:

• «Перевірте номер картки» замість «Payment processing error».
• Автопрокрутка до першої помилки — scrollIntoView({ behavior: 'smooth' }).
• «Товар закінчився» — обробляємо без втрати заповнених даних. Пропонуємо аналог або прибираємо з перерахунком.

Інтеграції

• DaData — адреса, ПІБ, ІПН. Підказки під час введення, валідація ФІАС.
• Google Maps — вибір пунктів видачі на карті, геолокація для визначення міста.
• НПП, Boxberry, Укрпошта — API-розрахунок вартості та термінів у реальному часі.
• LiqPay, CloudPayments, ПриватБанк — прийом платежів, рекурентні списання, холдування.
• CRM — замовлення автоматично йде в Бітрікс24, створюється угода з прив'язкою до контакту.
• Склад — перевірка залишків через CCatalogStoreProduct::GetList() у реальному часі.

// Псевдокод для паралельних запитів
$promises = [];
foreach ($tariffs as $tariff) {
    $promises[] = async(function() use ($tariff, $basket) {
        return $tariff->calculate($basket);
    });
}
$results = awaitAll($promises, 3000);

Що входить у роботу

• Аналіз поточного чекауту та виявлення вузьких місць (аудит конверсії, логів, помилок).
• Проєктування UX: прототипування однокрокової форми, узгодження із замовником.
• Розробка компонента чекауту на основі Bitrix\Sale\Order + REST, з заміною sale.order.ajax.
• Інтеграція з платіжними (LiqPay, CloudPayments, ПриватБанк) та логістичними API (НПП, Boxberry, Укрпошта).
• Налаштування промокодів, крос-селу, покинутих кошиків.
• Тестування на реальних сценаріях: десктоп, мобільні, планшети.
• Передача документації (опис API, інструкції для менеджерів, доступи).
• Навчання співробітників роботі з новим кошиком.
• Пост-релізна підтримка — 2 тижні моніторингу та правок.

Строки

Зв'яжіться з нами для обговорення вашого проєкту та отримайте консультацію з конкретних завдань. Замовте аудит кошика вже сьогодні — побачите, скільки конверсії втрачається на кожному кроці. Збільшення конверсії чекауту на 1–2% при стабільному трафіку — це зростання виручки без зростання рекламного бюджету. Найшвидший ROI в e-commerce.