shopboard

Кнопки
у товаров

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

КАРТОЧКАДобавить
КОРЗИНАКоличество
ОСТАТОКОграничение
ЗАКАЗCheckout

Кнопка товара — это начало короткого сценария покупки. В текущей версии Shopboard карточка добавляет одну единицу, а управление количеством находится в корзине.

Текущий MVP

Как работает кнопка сейчас

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

01Нажатие на карточке

Товар добавляется без перехода на отдельную страницу.

02Корзина обновляется

Счётчик в шапке сразу показывает новое количество.

03Покупатель уточняет состав

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

Открыть демонстрационную витрину
Логика интерфейса

Состояние товара определяет действие

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

СостояниеЧто видит покупательСтатус в Shopboard

Товар опубликован, остаток естьКнопка «плюс», добавление в корзинуРаботает в MVP

Товар уже в корзинеПовторное нажатие добавляет ещё одну единицуРаботает в MVP

Количество достигло остаткаУвеличение в корзине блокируетсяРаботает в MVP

Нулевой остатокТовар исключается из публичного каталогаРаботает как скрытие

Несколько вариантов товараНужен выбор варианта до добавленияНе входит в текущий MVP

!
Предзаказ пока не поддерживается

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

Количество и склад

Где покупатель меняет количество

В действующем интерфейсе количество настраивается в корзине. Кнопка «плюс» увеличивает позицию до доступного остатка, «минус» уменьшает, а при переходе к нулю позиция удаляется.

01

Укажите реальный остаток

Откройте товар в CMS → Товары и проверьте количество. Складские значения должны соответствовать физическому наличию.

02

Добавьте товар как покупатель

На витрине нажмите кнопку карточки несколько раз. Счётчик корзины должен измениться, а количество — остановиться на остатке.

03

Проверьте пересчёт суммы

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

Интерактивный прототип

Сравните три варианта кнопки

Выберите режим, подпись и состояние остатка. Этот стенд помогает согласовать будущий интерфейс — он не меняет настройки реальной витрины.

ПРЕДПРОСМОТРКарточка товара
Не изменяет витрину
🎧АУДИО

Наушники Air Pulse

Артикул AP-101 · беспроводные

12 490 ₽В наличии: 18 шт.
1
Выбран классический режим: одна кнопка без поля количества.
ДОСТУПНО СЕЙЧАС

Компактная кнопка добавления на карточке

Изменение количества в корзине

Ограничение увеличения по остатку

ПЛАНИРУЕТСЯ

Выбор одного из трёх режимов

Редактирование подписей без кода

Состояния «Нет в наличии» и «Под заказ»

Тексты и доступность

Кнопка должна объяснять результат

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

ПРЯМОЕ ДОБАВЛЕНИЕ«В корзину»

Подходит, когда товар можно добавить без дополнительных параметров.

НУЖЕН ВЫБОР«Выбрать вариант»

Используйте, если перед добавлением нужны размер, цвет или комплектация.

НЕТ ОСТАТКА«Нет в наличии»

Недоступная кнопка не должна выглядеть активной или принимать нажатие.

ПРОДАЖА ПО ЗАЯВКЕ«Заказать»

Подходит только при настроенном сценарии заявки и понятных сроках.

Не полагайтесь только на значок

У компактной кнопки должна быть доступная подпись для экранного диктора. В текущей витрине она формируется как «Добавить [название товара] в корзину».

Перед публикацией

Проверьте весь путь кнопки

01

Карточка

Кнопка видна, не перекрывает цену, имеет понятное состояние при наведении и фокусе с клавиатуры.

02

Корзина

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

03

Остаток

Нельзя заказать больше доступного количества. Нулевой остаток обработан до того, как на витрину придут реальные покупатели.

04

Мобильный экран

Зона нажатия достаточно крупная, элементы количества не слипаются, уведомление не закрывает оформление заказа.

Короткие ответы

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

Где сейчас меняется внешний вид кнопки?

В текущем MVP отдельной настройки в CMS ещё нет. Стенд выше — предпросмотр продуктового решения, а не сохранение параметров магазина.

Можно ли изменить текст «В корзину»?

Пока только в коде темы. В будущем планируется безопасная настройка подписей в интерфейсе с отдельными текстами для доступного товара, выбора варианта и заказа при отсутствии.

Почему количество вынесено в корзину?

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

Что делать с товаром без остатка?

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

БЫЛА ЛИ СТАТЬЯ ПОЛЕЗНА?

Ваш ответ поможет улучшить инструкции.

СЛЕДУЮЩИЙ ШАГ

Проверьте кнопку
на реальном товаре.

Укажите цену и остаток в CMS, затем пройдите путь покупателя на витрине: карточка → корзина → checkout.

Открыть товары Проверить витрину