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

Бизнес-процесс клиента — это основа разработки любого сайта. Современные шаблонные решения на базе CMS 1С-Битрикс закрывают большую часть задач для среднестатистического заказчика. Но мы регулярно сталкиваемся с тем, что богатый функционал шаблонов недостаточен в конкретных случаях.

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

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

Таблица 1

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

Нас это никак не устраивало. 

Как видно из Таблицы 1 у товара может быть большое количество торговых предложений. Простой способ — это разбить их на отдельные карточки товара. Но в таком случае мы увеличиваем количество товара до неприличного количества и усложняем заказ покупателям. 

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

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

Профильные уплотнения

Если товар не выбран, то кнопка “заказать” неактивна. Это дает понять пользователю, что в таблице необходимо выбрать товар.

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

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

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

Так как карточка товара нетиповая и для кого-то форма заказа расположена непривычно, при нажатии “сформировать заказ” экран устройства переместится к таблице.