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

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

Корзина — самый чувствительный к UX компонент магазина. Стандартный bitrix:sale.basket.basket делает полную перезагрузку при каждом изменении количества или удалении товара. Vue-корзина с optimistic updates устраняет это: визуально всё происходит мгновенно, а синхронизация с сервером идёт в фоне.

Битрикс API для работы с корзиной

Основные методы модуля sale:

// Добавить в корзину
\Bitrix\Sale\Basket::create(SITE_ID);
$basketItem = $basket->createItem('catalog', $productId);
$basketItem->setFields(['QUANTITY' => 1, 'CURRENCY' => 'RUB']);
$basket->save();

// AJAX-контроллер для Vue:
// POST /basket/add { productId, quantity, props }
// POST /basket/update { itemId, quantity }
// POST /basket/remove { itemId }
// GET  /basket — текущее состояние

Или через REST API: sale.basketitem.add, sale.basketitem.update, sale.basketitem.delete.

Структура Vue-корзины

CartApp.vue              — корневой, читает cartStore
├── 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);
                // Обновляем с данными от сервера (реальный ID, цена)
                this.syncFromServer(result.basket);
            } catch {
                // Откат при ошибке
                this.items = this.items.filter(i => !i.pending);
            }
        }
    }
});

Синхронизация между вкладками

Пользователь открыл магазин в двух вкладках. Товар добавлен в одной — корзина в другой устарела. Решение:

// Слушаем localStorage-событие (BroadcastChannel — современный вариант)
const channel = new BroadcastChannel('cart-sync');
channel.onmessage = (e) => {
    if (e.data.type === 'CART_UPDATED') cartStore.fetchCart();
};

// При изменении корзины:
channel.postMessage({ type: 'CART_UPDATED' });

Случай из практики

Магазин электроники: корзина стандартная Битрикс с AJAX. Проблема: при добавлении товара через кнопку на карточке (sale.basket.basket.ajax) страница «моргала» — полностью перерисовывался блок корзины в шапке. На мобильных устройствах это воспринималось как подвисание. Vue-корзина с CartIcon (счётчик обновляется мгновенно через Pinia) и CartDrawer (открывается sliding panel без перезагрузки) — добавление товара визуально мгновенно, запрос к серверу идёт асинхронно.

Сроки выполнения