Разработка корзины покупок для интернет-магазина

Разработка корзины покупок для интернет-магазина

Корзина — центральный компонент любого e-commerce проекта. Именно здесь происходит основная часть отказов: неудобное управление количеством, потеря позиций при перезагрузке страницы, конфликт сессий у авторизованных пользователей. Разработка корзины с нуля занимает от 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 обновляется мгновенно, запрос уходит в фоне. При ошибке — откат с уведомлением. Реализация через 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), а корзину держать информационной.

При отображении корзины актуальные остатки проверяются запросом к складу. Если товар закончился — показываем предупреждение прямо в строке позиции, не блокируя всю корзину.

Расчёт итоговой суммы

Итог корзины включает несколько слоёв:

Расчёт выполняется на сервере при каждом изменении корзины. Клиент получает готовые суммы — никаких вычислений в браузере.

Мини-корзина и полная страница

Мини-корзина в хедере (dropdown или sidebar) показывает до 5 последних позиций, счётчик и кнопку «Оформить». Полная страница /cart отображает все позиции с возможностью редактирования. Оба компонента подписаны на одно и то же состояние — через React Query или Zustand.

Важный момент: счётчик в хедере обновляется через Server-Sent Events или polling раз в 30 секунд — это актуально, если пользователь работает в нескольких вкладках одновременно.

Сохранение корзины

Корзина гостя сохраняется 30 дней в cookie (cart_id). При логине происходит merge и корзина переносится в БД. Если пользователь был авторизован и вышел — корзина остаётся в БД, при повторном логине восстанавливается.

Корзина авторизованного пользователя синхронизируется между устройствами — это ключевое отличие от гостевой.

Аналитика корзины

Все события корзины должны уходить в аналитику: 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/адресу доставки, применять соответствующую ставку