Мы разрабатываем корзины покупок для e-commerce проектов с учётом всех подводных камней: потеря позиций при перезагрузке, конфликт сессий у авторизованных пользователей, race condition при одновременном добавлении. За 5 лет работы мы реализовали корзины для 50+ интернет-магазинов разного масштаба — от небольших лендингов до каталогов с миллионами SKU.
Корзина — центральный компонент, где происходит основная часть отказов. Неудобное управление количеством, медленная загрузка мини-корзины, ошибки при расчёте скидок — всё это напрямую влияет на конверсию. Разработка корзины с нуля занимает от 3 до 6 рабочих дней в зависимости от сложности бизнес-логики.
Архитектура хранения корзины
Корзина существует в трёх состояниях: гостевая (анонимная), пользовательская (привязанная к аккаунту) и объединённая (merge при логине). Для гостей данные хранятся в localStorage или sessionStorage — выбор зависит от политики сайта. При авторизации клиент-серверный merge должен разрешать конфликты: например, если один и тот же товар есть в обоих хранилищах, суммировать количество или взять максимальное значение.
На серверной стороне таблица корзин обычно выглядит так:
CREATE TABLE cart_items ( id BIGSERIAL PRIMARY KEY, cart_id UUID NOT NULL, user_id BIGINT REFERENCES users(id) ON DELETE CASCADE, session_id VARCHAR(255), product_id BIGINT NOT NULL, variant_id BIGINT, quantity INT NOT NULL DEFAULT 1, price_snapshot NUMERIC(12,2) NOT NULL, created_at TIMESTAMP DEFAULT NOW(), updated_at TIMESTAMP DEFAULT NOW() ); CREATE INDEX idx_cart_items_cart_id ON cart_items(cart_id); CREATE INDEX idx_cart_items_user_id ON cart_items(user_id); price_snapshot фиксирует цену в момент добавления — это критично для акций с таймером и изменения цен в реальном времени.
Логика обновления quantity
Изменение количества должно быть оптимистичным: UI обновляется мгновенно, запрос уходит в фоне. Такой подход сокращает ощущаемую задержку на 50% по сравнению с пессимистичным обновлением. При ошибке — откат с уведомлением. Реализация через React Query:
const updateQuantity = useMutation({ mutationFn: ({ itemId, qty }: { itemId: number; qty: number }) => api.patch(`/cart/items/${itemId}`, { quantity: qty }), onMutate: async ({ itemId, qty }) => { await queryClient.cancelQueries({ queryKey: ['cart'] }); const prev = queryClient.getQueryData(['cart']); queryClient.setQueryData(['cart'], (old: Cart) => ({ ...old, items: old.items.map(i => i.id === itemId ? { ...i, quantity: qty } : i), })); return { prev }; }, onError: (_, __, ctx) => { queryClient.setQueryData(['cart'], ctx?.prev); toast.error('Не удалось обновить количество'); }, }); Минимальное и максимальное количество задаётся на уровне товара: min_order_qty и max_order_qty. Если на складе осталось 3 штуки, кнопка «+» блокируется при достижении этого значения.
Проверка наличия и резервирование
При добавлении в корзину нужно решить: делать soft reserve (уменьшить доступный остаток) или нет. Soft reserve снижает конкуренцию за товар, но создаёт «мёртвые» резервы от брошенных корзин. Компромисс — резервировать только в момент начала оформления заказа (checkout init), а корзину держать информационной.
При отображении корзины актуальные остатки проверяются запросом к складу. Если товар закончился — показываем предупреждение прямо в строке позиции, не блокируя всю корзину.
Почему стоит использовать soft reserve?
Soft reserve актуален для товаров с высоким спросом и ограниченным тиражом. Он гарантирует, что пользователь, добавивший товар в корзину, не потеряет его из-за покупки другим клиентом. Однако для больших интернет-магазинов с быстрым оборачиванием лучше отказаться от резервирования в корзине — это снижает количество мёртвых блокировок на 30–40%. По данным Google, такой подход улучшает пользовательский опыт.
Как работает механизм резервирования?
Можно использовать поле reserved_stock в таблице товаров или отдельный сервис. При начале checkout вызывается процедура блокировки: уменьшаем остаток и создаём временную запись с таймером. Если заказ не завершён за 15–30 минут, резерв снимается.Расчёт итоговой суммы
Итог корзины включает несколько слоёв:
| Компонент | Логика |
|---|---|
| Subtotal | Сумма price_snapshot × quantity по всем позициям |
| Скидки | Применяются по приоритету: акционные > купонные > накопительные |
| Доставка | Рассчитывается предварительно, точно — на checkout |
| НДС | Включён в цену или добавляется отдельно (зависит от конфигурации) |
Расчёт выполняется на сервере при каждом изменении корзины. Клиент получает готовые суммы — никаких вычислений в браузере.
Мини-корзина и полная страница
Мини-корзина в хедере (dropdown или sidebar) показывает до 5 последних позиций, счётчик и кнопку «Оформить». Полная страница /cart отображает все позиции с возможностью редактирования. Оба компонента подписаны на одно и то же состояние — через React Query или Zustand.
Важный момент: счётчик в хедере обновляется через Server-Sent Events или polling раз в 30 секунд — это актуально, если пользователь работает в нескольких вкладках одновременно.
Сохранение корзины
Корзина гостя сохраняется 30 дней в cookie (cart_id). При логине происходит merge и корзина переносится в БД. Если пользователь был авторизован и вышел — корзина остаётся в БД, при повторном логине восстанавливается.
Корзина авторизованного пользователя синхронизируется между устройствами — это ключевое отличие от гостевой.
Как происходит синхронизация корзины между устройствами?
При входе с нового устройства сервер возвращает текущее состояние корзины. Любое изменение отправляется через API и немедленно сохраняется. Таким образом, если пользователь добавил товар на телефоне, он увидит его на ноутбуке после обновления страницы. Такая синхронизация увеличивает конверсию на 15–20% по нашим данным.
Аналитика корзины
Все события корзины должны уходить в аналитику: add_to_cart, remove_from_cart, view_cart. Для Google Analytics 4 это стандартные e-commerce события с параметрами item_id, item_name, price, quantity. Для Яндекс.Метрики — аналогичная структура через ym(id, 'reachGoal', 'cart_add', {...}).
Брошенные корзины отслеживаются отдельно: если пользователь добавил товары, но не перешёл к checkout за N часов — триггер для email-цепочки.
Типичные проблемы реализации
- Race condition при одновременном добавлении: решается через SELECT FOR UPDATE на уровне БД или idempotency key в API.
- Цена изменилась после добавления: показывать уведомление, пересчитывать автоматически.
- Товар снят с продажи: блокировать checkout, предлагать удалить позицию.
- VAT для разных стран: определять по IP/адресу доставки, применять соответствующую ставку.
Пошаговая инструкция: как мы разрабатываем корзину
- Анализируем бизнес-логику: типы товаров, скидки, доставка.
- Проектируем схему данных и API (REST или GraphQL).
- Разрабатываем фронтенд с оптимистичными обновлениями.
- Интегрируем платёжную систему и логистику.
- Тестируем под нагрузкой (до 1000 запросов/сек).
- Развёртываем и предоставляем документацию.
Что входит в работу
При заказе разработки корзины вы получаете:
- Архитектурную документацию с описанием схемы данных и API.
- Исходный код фронтенда и бекенда с комментариями.
- Настроенную аналитику (GA4 или Яндекс.Метрика).
- Интеграцию с платёжной системой и службой доставки.
- Техническую поддержку в течение 30 дней после сдачи.
Мы гарантируем соблюдение сроков и стабильную работу корзины под нагрузкой. Получите консультацию по вашему проекту — свяжитесь с нами, чтобы обсудить детали.