БлогУслугиКарьера
Обсудить проект
БлогУслугиКарьераОбсудить проект
Mini Apps

Корзина Mini App: как покупатель теряет выбранный размер

Корзина Mini App должна помнить размер и цвет товара. Проверьте сохранение выбора, смену устройства и остатки перед оплатой, чтобы покупатель получил заказ.

Редакция Feature IT
Редакция Feature IT·
9 окт
·
9 мин
·
Корзина Mini App на экране телефона и одежда разных размеров с выделенным вариантом

Покупатель выбирает размер куртки, добавляет её в корзину Mini App и возвращается к покупкам после сообщения в Telegram. В корзине остаётся название модели. Размер приходится вспоминать, открывать карточку и проверять заново. Если приложение подставило первый доступный вариант, ошибка может обнаружиться уже при получении заказа.

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

Отделите модель товара от выбранного варианта

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

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

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

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

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

Покажите выбор до добавления и после него

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

До выбора обязательных характеристик действие добавления должно объяснять следующий шаг. Подпись «Выберите размер» полезнее кнопки, которая просто ничего не делает. Если приложение предлагает вариант заранее, человек должен видеть это решение до нажатия. Для одежды разумно обсудить с заказчиком явный выбор размера, поскольку автоматическое значение может привести к случайной покупке.

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

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

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

Сохраняйте корзину с понятными правилами

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

Telegram предоставляет средства хранения данных. В официальной документации Mini Apps описано DeviceStorage для постоянного локального хранения на устройстве. Доступность возможностей зависит от версии клиента, поэтому разработчик должен учитывать поддержку метода. Чтобы покупатель мог продолжить покупки на другом устройстве, сохраняйте корзину в общем хранилище магазина.

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

Связь корзины с покупателем тоже требует проверки. Telegram передаёт исходные данные запуска в initData; документация требует проверять их на сервере. Полям initDataUnsafe нельзя доверять без проверки. Эти правила описаны в разделе проверки данных Mini App. После проверки приложение может привязать корзину к установленной учётной записи.

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

Если вы заказываете разработку Mini App, включите повторное открытие корзины в приёмку проекта. Проверка одного удачного добавления товара оставляет значительную часть покупательского пути без внимания.

Сохраним выбор покупателя в корзине

Обсудим каталог, варианты товаров и проверку заказа перед оплатой.

Обсудить Mini App

Разберите одновременные изменения корзины

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

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

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

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

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

Перепроверьте наличие перед оформлением

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

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

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

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

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

Обсудим ваш проект?

Оставьте контакты — перезвоним и обсудим задачу

Проверьте передачу размера до склада

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

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

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

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

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

Зафиксируйте требования к следующему выпуску

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

Для приёмки корзины достаточно зафиксировать несколько обязательных условий.

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

Если расхождение возникает после оформления, проверьте также сверку оплаты и состояния заказа. Сохранение размера и подтверждение оплаты относятся к разным этапам, поэтому их удобнее принимать отдельными проверками.

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

Обсудим ваш проект?

Оставьте контакты — перезвоним и обсудим задачу

Содержание
  • Отделите модель товара от выбранного варианта
  • Покажите выбор до добавления и после него
  • Сохраняйте корзину с понятными правилами
  • Разберите одновременные изменения корзины
  • Перепроверьте наличие перед оформлением
  • Проверьте передачу размера до склада
  • Зафиксируйте требования к следующему выпуску
Поделиться:

Похожие статьи

Повторный заказ в Mini App: что оставить на 1 экране
Mini Apps

Повторный заказ в Mini App: что оставить на 1 экране

8 мин
Telegram Mini App: 7 проверок перед запуском в 2026 году
Mini Apps

Telegram Mini App: 7 проверок перед запуском в 2026 году

8 мин
Не открываются мини-приложения в Telegram: 7 проверок
Mini Apps

Не открываются мини-приложения в Telegram: 7 проверок

9 мин
Feature IT

Feature IT — платформа по обучению программированию и разработке цифровых продуктов. Мы создаём современные веб-решения для бизнеса и обучаем этому других!

Политика конфиденциальностиПользовательское соглашение

О компании

  • Блог
  • Карьера

Услуги разработки

  • Разработка сайтов под ключ
  • Веб-приложения на React/Next.js
  • Telegram-боты для бизнеса
  • Mini Apps (Telegram, VK)
  • SEO-оптимизированные сайты
  • Автоматизация бизнес-процессов
  • Поддержка и развитие IT-продуктов

Обучение

  • Курс Python с нуля
  • Алгоритмы и структуры данных
  • Паттерны проектирования
  • Подготовка к собеседованиям в IT
  • Практика на реальных проектах

Инструменты

  • Генератор UTM-меток
  • Счётчик символов