Как оформить корзину интернет-магазина: состав, изменения и сумма

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

Корзина и оформление заказа решают последовательные задачи. В корзине проверяют и редактируют покупки; на следующем этапе вводят контактные данные, выбирают получение и оплату, подтверждают заказ. Не заставляйте человека угадывать, отправит ли кнопка его к форме или уже спишет деньги.

Что покупатель проверяет в корзине

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

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

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

Какие данные нужны в строке товара

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

Цена за единицу, количество и сумма строки отвечают на разные вопросы. При двух полотенцах по 700 ₽ покупатель должен отличать 700 ₽ за штуку от 1 400 ₽ за строку. Если действует скидка, способ отображения должен позволять восстановить расчёт и понять, распространяется ли она на все единицы.

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

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

Изменение заказа без потери выбранного варианта

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

Не позволяйте отрицательное количество. Для нуля нужен ясный результат: удаление с сообщением либо предложение удалить позицию. Ограничение остатком также объясняется рядом с товаром. Сообщение «ошибка» над всей страницей не говорит, почему нельзя поставить три штуки конкретной модели.

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

Редактирование варианта зависит от платформы. Оно может происходить внутри строки или через карточку, но результат нужно проверить одинаково. Цена и наличие относятся к новому варианту, а изменение цвета не должно незаметно сбрасывать количество или превращать одну строку в другой товар.

Учебный пересчёт с неизвестной доставкой

Все суммы и правила ниже условны. В корзине кружка «Синий», одна по 900 ₽, и полотенце «50×90, белое», два по 700 ₽. Учебный промокод даёт фиксированную скидку 200 ₽ на товары без минимальной суммы. В этом примере скидка сохраняется при удалении кружки. Для пустой корзины расчёт скидки не применяется.

Доставка определяется позднее при выборе пункта получения или адреса. Пока она неизвестна, показываем только известную сумму за товары после скидки, с подписью «без доставки». Не называем её окончательным итогом к оплате.

Действие	Расчёт товаров	Скидка	Известная сумма без доставки
Исходная корзина	900 + 2 × 700 = 2 300 ₽	−200 ₽	2 100 ₽
Полотенце заменено на бежевое по той же цене	900 + 2 × 700 = 2 300 ₽	−200 ₽	2 100 ₽
Количество полотенец уменьшено до одного	900 + 700 = 1 600 ₽	−200 ₽	1 400 ₽
Кружка удалена	700 ₽	−200 ₽	500 ₽
Удаление кружки отменено	900 + 700 = 1 600 ₽	−200 ₽	1 400 ₽

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

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

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

Пустая корзина, остатки и ошибки обновления

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

Затем проверьте изменение остатка. В учебном сценарии два полотенца были доступны при добавлении, но перед оформлением осталось одно. Корзина должна показать ограничение именно для полотенца и предложить понятное действие: уменьшить количество или выбрать доступный вариант. Не меняйте состав без объяснения и не передавайте старые две штуки в оформление как гарантированные.

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

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

Запишите дефект в форме «шаги → фактический результат → ожидаемый»: например, после смены количества и ошибки сети оформление получает старое число без предупреждения. Такой отчёт можно воспроизвести и проверить после исправления.

Переход к оформлению на телефоне

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

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

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

Частые вопросы

Обязательно ли поле промокода?+

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

Можно ли показывать только одну общую сумму?+

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

Чек-лист проверки корзины

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