Доработка каталога септиков на CS-Cart для Bioseptikon.ru
Интернет-магазин септиков и инженерного оборудования.
Bioseptikon.ru продаёт септики, кессоны, погреба и сопутствующие товары. В каталоге много похожих моделей, где выбор зависит от вариаций, способа отвода, монтажа и технических характеристик. Нужно было сделать карточки товаров информативнее без перехода на страницу товара.
Задача клиента
Сделать каталог полезным для выбора сложного товара ещё до открытия карточки
В стандартной сетке UniTheme2 покупатель видел фото, название, цену и кнопку корзины. Для септиков этого мало: у одной модели есть разные способы отвода, модификации, монтаж, глубина залегания трубы и другие характеристики. Нужно было вывести эти данные в листинг и сохранить удобный сценарий покупки на десктопе и мобильных устройствах.
Задачи
- доработать сетку каталога в десктопной версии
- добавить кнопки переключения вариаций прямо в карточку товара
- вывести характеристики с их значениями и поддержкой иконок
- добавить кнопку “Выбрать опции” внизу карточки товара
- адаптировать тот же сценарий для мобильного списка товаров
- показывать характеристики в попапе выбора опций и раскрывать опции на мобильной странице товара
Что я сделал
Расширил карточку товара в каталоге и связал её с вариациями CS-Cart
Десктопная сетка
Для десктопа оставил вид “Сетка” в UniTheme2 и добавил в карточку переключатели вариаций, технические характеристики и нижнюю кнопку выбора опций.
Мобильный каталог
Для мобильной версии использовал вид “Список без опций”: рядом с корзиной появилась кнопка “Опции”, а характеристики и вариации остались доступны без перегруза карточки.
Характеристики с иконками
Вывел количество пользователей, глубину залегания трубы, залповый сброс, производительность и другие параметры с возможностью добавлять иконки к характеристикам.
Связь с вариациями
При переключении вариации меняются значения характеристик. Для септиков это особенно важно по глубине залегания трубы.
Единый попап опций
Кнопки “В корзину”, “Выбрать опции” и “Опции” открывают один и тот же сценарий выбора. В попапе дополнительно выводятся характеристики товара.
Мобильная страница товара
На странице товара добавил кнопку “Раскрыть опции”, чтобы покупатель мог управлять вариантами без длинного блока, который сразу занимает экран.
UI-UX
Карточка стала рабочим инструментом выбора, а не только витриной цены
До доработки пользователь видел стандартную компактную сетку. После доработки карточка показывает вариации, ключевые параметры и отдельное действие для выбора опций. Это снижает количество лишних переходов и помогает сравнивать похожие модели прямо в категории.
Что получил клиент
Главный результат: покупатель быстрее понимает различия между моделями и может выбрать нужную комплектацию без лишних переходов. Для каталога с техническими товарами это напрямую влияет на удобство сравнения и качество заявки.
Как подготовить доработку UniTheme2 без лишних переделок
Если хотите сначала разобраться самостоятельно: что вынести в карточку каталога, какие возможности CS-Cart и UniTheme2 проверить до разработки и что обязательно протестировать на мобильной версии.
Частые вопросы
Можно ли доработать карточку UniTheme2 без полной замены шаблона?
Да. Если задача касается вывода вариаций, характеристик, кнопок и попапов, обычно достаточно точечных доработок шаблонов, JS и PHP-логики CS-Cart.
Как вывести характеристики с иконками в карточке каталога?
Нужно определить набор характеристик для листинга, подготовить вывод значений и добавить привязку иконки. Важно не тянуть в карточку все свойства товара, а показывать только параметры, которые помогают выбрать модель.
Что важно при переключении вариаций в списке товаров?
Карточка должна обновлять не только цену и кнопку покупки, но и характеристики выбранной вариации. Иначе пользователь видит один вариант товара, а параметры остаются от другого.
Можно ли открыть одно и то же окно выбора опций из разных кнопок?
Да. В этом кейсе кнопки “В корзину”, “Выбрать опции” и “Опции” ведут в один сценарий, чтобы пользователь не попадал в разные интерфейсы выбора комплектации.
Зачем отдельно дорабатывать мобильную версию каталога?
На мобильном экране меньше места. То, что удобно в десктопной сетке, может перегрузить список товаров. Поэтому для мобильной версии нужны отдельные кнопки, компактный вывод характеристик и раскрывающиеся блоки.
НАЧНЁМ РАБОТУ
Опишите задачу — оценим за 24 часа
Оценим, реально ли это сделать, сколько времени потребуется и сколько будет стоить. Бесплатно, без обязательств.
- Фиксированная цена до старта
- Договор на каждый проект
- Гарантия на результат