В этой задаче клиенту нужно было доработать карточку товара на InSales так, чтобы выбор цвета стал понятным и одинаковым во всех сценариях: на компьютере, в мобильной версии и в быстром просмотре.
Исходный ориентир был задан в макете: цвет должен выводиться не выпадающим списком и не текстовой характеристикой, а аккуратными кружками. При клике по цвету должно меняться фото товара, а остальная структура карточки должна остаться без лишних изменений.
Ключевые факты
| Дата задачи | 28.02.2023 |
| Платформа | InSales |
| Ниша | интернет-магазин с товарами в разных цветах |
| Тип работ | доработка карточки товара, быстрого просмотра, предзаказа и остатков |
| Результат | покупатель выбирает цвет визуально, видит корректное фото и остатки по варианту |
Задача
Нужно было привести карточку товара к логике из макета: вывести цвета кружками и связать каждый цвет с соответствующим изображением. При этом важно было не перестраивать карточку целиком, а точечно встроить новую механику в существующий интерфейс магазина.
Дополнительно нужно было доработать форму предзаказа и вывести остатки для каждого варианта товара. Это важная связка: если товара нет в наличии или варианты отличаются по остаткам, покупатель должен понимать ситуацию до отправки заявки или добавления в корзину.
Что усложняло задачу
Одна и та же логика должна была работать в разных местах. Пользователь может открыть карточку на компьютере, зайти с телефона или посмотреть товар через быстрый просмотр. Если в одном месте цвет выбирается кружками, а в другом всё выглядит иначе, интерфейс начинает казаться случайным.
Поэтому мы делали не отдельный визуальный элемент, а единый сценарий выбора варианта товара.
Что сделали
- Настроили вывод цветов в формате круглых swatch-элементов.
- Связали выбор цвета со сменой изображения товара.
- Сохранили существующую структуру карточки без лишней перестройки интерфейса.
- Повторили эту же логику для мобильной версии.
- Добавили цветовые кружки и смену фото в быстром просмотре.
- Доработали email-поле в предзаказе.
- Вывели остатки для каждого варианта товара.
Результат
Карточка товара стала понятнее для покупателя: цвет выбирается визуально, фото меняется сразу, а остатки по варианту доступны без дополнительных действий. Поведение на десктопе, мобильной версии и в быстром просмотре стало единым.
Для магазина это точечная, но полезная e-commerce доработка: она не меняет весь сайт, зато улучшает один из ключевых моментов выбора товара — работу с вариантами.
Что мы сделали для клиента
Мы превратили выбор цвета из технической характеристики в нормальный визуальный сценарий покупки. Покупатель быстрее понимает, какие варианты есть, видит соответствующее изображение и получает больше информации о наличии товара до оформления заказа или предзаказа.
