Доработка каталога септиков на CS-Cart для Bioseptikon.ru

Сделать каталог полезным для выбора сложного товара ещё до открытия карточки

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

Задачи:

1. доработать сетку каталога в десктопной версии

2. добавить кнопки переключения вариаций прямо в карточку товара

3. вывести характеристики с их значениями и поддержкой иконок

4. добавить кнопку “Выбрать опции” внизу карточки товара

5. адаптировать тот же сценарий для мобильного списка товаров

6. показывать характеристики в попапе выбора опций и раскрывать опции на мобильной странице товара

Десктопная сетка

Для десктопа оставил вид “Сетка” в UniTheme2 и добавил в карточку переключатели вариаций, технические характеристики и нижнюю кнопку выбора опций.

Мобильный каталог

Для мобильной версии использовал вид “Список без опций”: рядом с корзиной появилась кнопка “Опции”, а характеристики и вариации остались доступны без перегруза карточки.

Характеристики с иконками

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

Связь с вариациями

При переключении вариации меняются значения характеристик. Для септиков это особенно важно по глубине залегания трубы.

Единый попап опций

Кнопки “В корзину”, “Выбрать опции” и “Опции” открывают один и тот же сценарий выбора. В попапе дополнительно выводятся характеристики товара.

Мобильная страница товара

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

• Карточки каталога показывают важные параметры септиков

• Вариации переключаются прямо в сетке товаров

• Характеристики обновляются под выбранную вариацию

• Кнопка выбора опций открывает тот же попап, что и корзина

• Мобильный каталог получил отдельные действия “Опции” и “Описание”

• Страница товара на мобильных не перегружена блоком опций

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