Перейти к содержимому
Все статьи
Разработка

Цвет и размер есть, а сочетания нет: варианты товара

23 октября 2026 г.· 8 мин чтения
Сколько будет стоить ваш проект?Рассчитать стоимость
Красный M существует с нулевым доступным количеством, синий M отсутствует в перечне вариантов
Сообщение должно объяснять состояние конкретного сочетания. Открыть схему крупнее

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

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

Начните с перечня продаваемых сочетаний

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

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

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

Отсутствующий вариант и нулевой остаток различаются

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

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

Цвет и размерВариант существуетДоступное количество в примереСостояние для выбора
Красный SДа3Можно перейти к предусмотренной покупке
Красный MДа0Позиция известна, сейчас недоступна
Синий SДа2Можно перейти к предусмотренной покупке
Синий MНетНе применяетсяТакое сочетание не предлагается

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

Второй выбор зависит от уже выбранного

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

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

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

Неполный выбор ещё не определяет позицию

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

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

В карточке должен обновиться весь связанный набор

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

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

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

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

Ссылка и возврат из корзины тоже являются входами

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

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

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

Не обещайте резерв одним выбором на экране

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

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

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

Короткий набор приёмочных сценариев

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

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

Материалы для проверки

Если нужна реализация

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

Разработка интернет-магазина Автоматизация каталога и остатков

Вопросы и ответы

Два цвета и два размера обязательно дают четыре товара?

Нет. Четыре пары можно составить математически, но продаваемый перечень может включать только часть. Существование проверяют по конкретному варианту.

Нулевой остаток означает, что сочетания не бывает?

Нет. Известный вариант с нулём и отсутствующая позиция различаются. Неизвестное количество также не следует автоматически считать нулём.

Можно после смены цвета выбрать другой размер автоматически?

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

Доступность в карточке гарантирует резерв?

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

Нужна помощь с проектом?

Обсудим задачу и предложим решение — от сайта до SaaS и защиты.

Связаться