Товары с размерами и цветами в интернет-магазине

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

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

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

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

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

Код, который позволяет отличить один вариант от другого в учёте, часто называют SKU. В нашем примере T01-BL-M обозначает синюю M. У белой M другой код, даже если цена совпадает. Название поля «Артикул» само по себе ничего не гарантирует: в одной системе это код модели, в другой — конкретного варианта. Штрихкод тоже может храниться отдельно.

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

Обрабатывать фотографии товара нужно осторожно: свет можно выровнять, но менять сам цвет нельзя. Один и тот же оттенок всё равно может выглядеть по-разному на экранах. Для выбора полезны несколько кадров при понятном освещении и словесное название цвета.

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

Для небольшого ряда S, M, L размеры удобно показать отдельными кнопками: покупатель сразу видит варианты и их доступность. Ему не придётся раскрывать список, чтобы узнать, есть ли нужный размер. Рядом нужна таблица размеров или замеры изделия — сама буква M не объясняет посадку.

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

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

В фильтрах «Синий» и «L» должны проверяться у одного и того же варианта. В нашей таблице есть синий S и белый L, но синей L нет. Поэтому эта модель не подходит под запрос «синяя футболка размера L». Проверка цвета и размера независимо друг от друга даст неверный результат.

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

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

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

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