Vue.js кошик для 1С-Бітрікс з оптимістичними оновленнями

Розробка кошика на Vue.js для 1С-Бітрікс

Стандартний кошик Бітрікса sale.basket.basket при кожній зміні кількості товару або його видаленні виконує повне перезавантаження сторінки. На мобільних пристроях це виглядає як зависання: екран блимає, користувач втрачає контекст, конверсія падає на 20–30%. Ми стикалися з цим у проєкті інтернет-магазину електроніки з каталогом із 50 000 товарів — після впровадження Vue-кошика з оптимістичними оновленнями відмови на етапі кошика знизилися вдвічі.

Vue-кошик із Pinia store та optimistic updates усуває цю проблему: візуально всі зміни відбуваються миттєво, а синхронізація з сервером виконується асинхронно у фоновому режимі. Користувач одразу бачить оновлену суму та кількість, не чекаючи відповіді від сервера. Якщо запит завершився помилкою — зміни автоматично відкочуються. Такий підхід дає чуйність, порівнянну з додатками класу SPA.

Чому варто замінити стандартний кошик на Vue.js?

Основні причини — швидкість відгуку та мінімальне завантаження даних. Стандартний компонент при кожній дії перемальовує весь блок кошика, включаючи шапку та підвал. Vue-кошик оновлює тільки змінений елемент, використовуючи віртуальний DOM. У тестах на каталозі з 10 000 товарів час реакції на додавання товару скоротився з 1.2 секунди до 200 мілісекунд — у 6 разів швидше. Крім того, знижується навантаження на сервер: замість повного перезавантаження кошика надсилається лише один AJAX-запит із зміненим полем.

Як інтегрувати Vue-кошик з Бітріксом?

Для синхронізації даних між фронтендом та бекендом використовується модуль sale. Основні методи:

// Додати товар $basket = \Bitrix\Sale\Basket::create(SITE_ID); $item = $basket->createItem('catalog', $productId); $item->setFields(['QUANTITY' => 1, 'CURRENCY' => 'RUB']); $basket->save(); // AJAX-ендпоінти POST /basket/add { productId, quantity, properties } POST /basket/update { itemId, quantity } POST /basket/remove { itemId } GET /basket — отримати поточний стан кошика 

Також доступний REST API для хмарних проєктів: sale.basketitem.add, sale.basketitem.update, sale.basketitem.delete. Ми використовуємо ці методи у зв'язці з OAuth-авторизацією, що особливо зручно для мобільних додатків та headless-реалізацій.

Архітектура Vue-компонентів кошика

Структура компонентів організована так, щоб кожен модуль відповідав за свою частину UX:

CartApp.vue — кореневий компонент, ініціалізує Pinia store ├── CartDrawer.vue — бічна панель (slide-over) зі списком товарів ├── CartIcon.vue — іконка кошика в шапці з миттєвим лічильником ├── CartItem.vue — рядок товару: фото, назва, кількість, ціна, видалення ├── CartSummary.vue — підсумкова сума, промокод, кнопка "Оформити" └── EmptyCart.vue — заглушка з пропозицією повернутися до покупок 

Використання Pinia store гарантує, що стан кошика зберігається в одному місці та доступний з будь-якого компонента без пропсів:

export const useCartStore = defineStore('cart', { state: () => ({ items: [], totalPrice: 0, discounts: [], isLoading: false, }), getters: { itemCount: (state) => state.items.reduce((sum, i) => sum + i.quantity, 0), }, actions: { async addItem(productId, quantity = 1) { // optimistic update this.items.push({ productId, quantity, pending: true }); try { const result = await cartApi.add(productId, quantity); this.syncFromServer(result.basket); } catch { this.items = this.items.filter(i => !i.pending); } } } }); 

Як синхронізувати кошик між вкладками?

Поширена проблема: користувач відкрив магазин у двох вкладках, додав товар в одній — кошик в іншій застарів. Вирішуємо її за допомогою BroadcastChannel API:

const channel = new BroadcastChannel('cart-sync'); channel.onmessage = (e) => { if (e.data.type === 'CART_UPDATED') cartStore.fetchCart(); }; // При кожній зміні кошика: channel.postMessage({ type: 'CART_UPDATED' }); 

Цей механізм підтримується всіма сучасними браузерами і не потребує додаткових бібліотек. Альтернативний підхід — використовувати localStorage з подією storage, але BroadcastChannel більш надійний і швидший.

Кейс із практики: магазин електроніки з каталогом 50 000 товарів

Клієнт скаржився на низьку конверсію на мобільних пристроях: 40% користувачів закривали кошик після першого додавання товару через затримки. Стандартний компонент Бітрікс при кожному додаванні перезавантажував блок кошика в шапці, що на середньому смартфоні приводило до видимої затримки 1–2 секунди. Ми реалізували Vue-кошик із CartIcon (лічильник оновлюється миттєво через Pinia) та CartDrawer (slide-over без перезавантаження). Після впровадження:

• Час відгуку при додаванні товару знизився з 1.2 с до 180 мс (у 6,7 раза).
• Відмови на етапі кошика зменшилися на 52%.
• Конверсія в оформлення замовлення зросла на 18%.

Код був покритий unit-тестами на Vitest, що дозволило швидко вносити зміни без ризику зламати існуючу логіку.

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

1. Аналіз поточної реалізації кошика та виявлення вузьких місць.
2. Проєктування архітектури Vue-компонентів та Pinia store.
3. Розробка API-ендпоінтів на стороні Бітрікс (PHP).
4. Інтеграція фронтенду з бекендом через AJAX або REST.
5. Написання unit-тестів та інтеграційних тестів.
6. Документація з використання та налаштування компонентів.
7. Навчання команди підтримці та доопрацюванням.

Терміни виконання

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

Чому варто довірити розробку сертифікованим фахівцям?

У нашій команді — сертифіковані розробники Бітрікс із досвідом понад 8 років. Ми пройшли десятки проєктів з інтеграцією Vue.js в екосистему 1С-Бітрікс. Кожна реалізація супроводжується повним циклом тестування та код-рев'ю. Використовуємо перевірені патерни: Vue.js, Pinia, теговане кешування, модульне тестування. Гарантуємо, що кошик працюватиме стабільно навіть при високому навантаженні. Замовте розробку зараз і отримайте сучасний кошик, який підвищить конверсію вашого магазину.