Мобильная корзина: количество, изменения цены и переход к оформлению

Редакция Romanov Lab · Опубликовано 13 октября 2026

Мобильная корзина нужна для проверки решения перед оформлением. Человек сверяет выбранный вариант, количество, доступность и итог. Если интерфейс лишь показывает список картинок и яркую кнопку, ошибки обнаруживаются слишком поздно: не тот размер, лишняя упаковка или стоимость, изменившаяся незаметно.

Сокращать путь полезно за счёт лишних повторов и неопределённости. Убирать возможность проверить состав ради меньшего числа экранов опасно. Разберём корзину как редактируемый набор позиций, состояние которого может меняться между добавлением товара и переходом к оформлению.

Определите, что является одной позицией

Товар, вариант, комплектация и единица продажи должны различаться в модели и на экране. Два одинаковых изображения могут относиться к разным размерам. Упаковка из десяти штук не равна одной штуке, даже если поле количества показывает единицу. Эти различия нужно видеть без открытия карточки.

Для строки корзины выберите минимальный набор идентифицирующих сведений: название, выбранный вариант, единица, количество и цена. Для технического товара может быть важен артикул, для одежды — размер и цвет. Универсальный шаблон без учёта категории способен скрыть именно тот параметр, ради которого человек проверяет заказ.

Ссылка на карточку должна сохранять выбранный вариант, если продукт это поддерживает. После возврата человек ожидает увидеть прежнюю корзину. Не сбрасывайте её из-за простого просмотра характеристик и не меняйте количество автоматически при открытии другого варианта.

Учебный пример: крепёж и инструмент

Представим вымышленный магазин. В корзине два набора крепежа по 20 штук и одна отвёртка. Набор стоит условные 600 рублей, отвёртка — 900. Итог товаров: 2 × 600 + 900 = 2 100 рублей. Рядом с количеством набора указано «упаковки», а в характеристиках — «20 штук в упаковке».

Пользователь хотел сорок отдельных крепежей. Такая строка позволяет проверить решение. Если показать только «Количество: 2» и «Крепёж», он может решить, что добавил две штуки. Увеличение картинки не исправляет семантическую неопределённость единицы.

Перед оформлением сервер сообщает, что доступна только одна упаковка. Корзина не должна молча заменить две на одну и продолжить. Она выделяет позицию и предлагает принять новое количество либо удалить её. После согласованного изменения итог товаров составляет 1 500 рублей, а сообщение объясняет причину пересчёта.

Доставка ещё не рассчитана. Поэтому 1 500 рублей подписываются как стоимость товаров, а не окончательная сумма заказа. Если способ и адрес доставки выбираются позже, это видно рядом с итогом. Человек понимает, почему следующее значение может отличаться.

Редактирование количества — асинхронная операция

Кнопки увеличения и уменьшения кажутся простыми, пока ответы сервера приходят в другом порядке. Пользователь быстро меняет количество с одного на три, а более старый ответ возвращает два. Интерфейс должен связывать результат с актуальным намерением или последовательно обрабатывать изменения, а не принимать последний пришедший ответ как правильный.

Заранее выберите модель отображения. Можно показывать новое количество сразу с признаком обновления или ждать подтверждения. В обоих случаях ошибка должна иметь понятное восстановление. Если сервер отклонил изменение, нельзя оставить новый видимый итог без предупреждения.

Ручной ввод полезен для больших количеств, но требует проверки допустимого шага и предела. Если товар продаётся кратно пяти, объясните это рядом, а не округляйте введённое число незаметно. Ноль также требует правила: это удаление строки или недопустимое значение? Поведение кнопки уменьшения должно быть предсказуемым.

Удаление не должно быть ловушкой

Разведите увеличение, уменьшение и удаление так, чтобы соседние действия не срабатывали случайно. Подпись «Удалить» часто яснее одинокой пиктограммы. Если удаление обратимо, короткая отмена может быть удобнее отдельного подтверждения для каждой строки. Но восстановление должно вернуть вариант и количество, а не просто базовый товар.

Для сенсорных целей полезен ориентир WCAG 2.2 Target Size (Minimum): критерий уровня AA задаёт минимальный размер 24 на 24 CSS-пикселя с предусмотренными исключениями. Это нижняя граница соответствующего критерия, а не гарантия удобства. В тесной корзине дополнительно проверяют расстояние между действиями и реальные касания.

После удаления последней позиции покажите понятный выход к каталогу или ранее просмотренному разделу. Не оставляйте активную кнопку оформления с нулевым заказом, если такой сценарий не поддерживается. Если была применена скидка, объясните, что произойдёт с ней при дальнейшем добавлении товаров.

Изменения цены требуют явного сравнения

Корзина может жить дольше одного визита. За это время меняются цена, наличие и условия акции. При восстановлении сравните сохранённое состояние с актуальным. Если существенное значение изменилось, покажите это рядом с позицией и пересчитайте итог. Недостаточно обновить только общую сумму внизу.

Не обещайте резервирование самим фактом добавления в корзину, если система не резервирует товар. Если резерв есть, объясните его срок и поведение после окончания. Искусственный таймер без реального основания создаёт давление и не помогает проверить заказ.

Скидка должна иметь понятную область: отдельная позиция, сумма товаров или доставка. При потере условия, например уменьшении количества, покажите, почему скидка исчезла. Не превращайте поле промокода в центральный элемент, который заставляет человека уходить искать несуществующий код.

Итог и кнопка оформления

Закреплённый блок итога может помогать на длинном списке, но не должен перекрывать последнюю позицию и её действия. На маленьком экране проверьте поведение при открытой клавиатуре. Если итог всегда виден, у пользователя всё равно должна оставаться возможность прочитать состав и ограничения.

Название кнопки должно отражать следующий этап: переход к оформлению, а не завершение покупки, если впереди адрес и оплата. Если недоступная позиция блокирует переход, объясните причину рядом с ней и дайте быстро перейти к проблеме. Не оставляйте просто серую кнопку без объяснения.

Перед переходом проверьте актуальность корзины на сервере по контракту магазина. Клиентский итог удобен для отображения, но не должен быть единственным основанием заказа. Если проверка заняла время или завершилась ошибкой, сохраняйте состав и сообщайте состояние, не отправляя человека заново собирать покупки.

Приёмочные сценарии

1. Добавить один товар в двух вариантах: строки различимы без открытия карточки.
2. Быстро изменить количество несколько раз на медленной сети: итог соответствует последнему принятому значению.
3. Удалить и восстановить строку: возвращаются правильные вариант и количество.
4. Изменить цену и остаток на сервере: различия показаны до оформления.
5. Вернуться из карточки и после обновления страницы: состав соответствует обещанной модели сохранения.
6. Потерять сеть при пересчёте: неподтверждённая сумма не выглядит окончательной.
7. Открыть корзину с длинными названиями и клавиатурой: действия не перекрываются.
8. Проверить неизвестную доставку: итог товаров не назван полной стоимостью заказа.

Вход в аккаунт и объединение корзин

Гостевая корзина и сохранённая корзина аккаунта могут содержать разные наборы. После входа нельзя молча выбрать одну и потерять другую. Заранее определите правило объединения: что происходит с совпадающими вариантами, количеством, промокодом и недоступными позициями. Универсального правильного сложения здесь нет.

Например, в гостевой корзине лежит одна отвёртка, а в аккаунте — две такие же. Сумма три может быть ожидаемой для одного покупателя и неожиданной для другого, который повторно добавил тот же товар. Интерфейс должен показать итог объединения и дать быстро проверить изменившиеся строки. Для дорогих или количественно чувствительных товаров явное сравнение особенно полезно.

Если в аккаунте сохранился старый размер, не заменяйте его новым по совпадению названия товара. Сопоставление должно учитывать вариант. Условия акции также проверяют заново: старый промокод может не распространяться на объединённый набор, и это нужно объяснить до оформления.

Проверьте последовательность «собрать гостевую корзину → войти → вернуться назад → обновить». Она не должна многократно прибавлять одно и то же количество. Затем выйдите из аккаунта и убедитесь, что закрытые сведения другого пользователя не остаются на общем устройстве. Правила сохранения корзины должны быть согласованы с моделью сессии и приватности магазина.

Что измерять и как трактовать

Выход из корзины не всегда означает проблему. Человек может сравнивать варианты или сохранять набор на будущее. Для диагностики полезнее наблюдать ошибки изменения количества, отказы актуализации, исчезновение позиций и возвраты после неожиданного изменения итога. Измерения должны соответствовать конкретным гипотезам.

Не записывайте в аналитику лишние персональные сведения из оформления. Для проверки корзины часто достаточно технических событий с согласованными идентификаторами и состояниями. Причину сбоя сверяют с журналами и воспроизводимым сценарием, а не выводят только из низкой доли переходов.

• Видны вариант и единица продажи
• Количество и итог подтверждаются согласованно
• Существенные изменения не происходят молча
• Удаление и восстановление предсказуемы
• Неизвестные расходы обозначены до оформления
• Кнопка ведёт к ожидаемому следующему шагу

Хорошая мобильная корзина экономит время потому, что не заставляет перепроверять догадки. Человек видит, что выбрал, что изменилось и какую сумму уже можно считать определённой. После такой проверки переход к оформлению становится естественным продолжением решения.