.svg)
Как модифицировать список товаров под работу с характеристиками и вариациями: дорабатываем шаблон UniTheme2 в CS-Cart
Как грамотно расширить список данных в списке товаров, что тестировать в первую очередь и почему лучше начать с макета в Figma.
Красивая картинка на карточке товара — это здорово, но большинство людей выбирают товар по параметрам. А это значит, что стандартной карточки в каталоге будет недостаточно для успешных продаж.
Представим случай: покупателю нужно быстро сравнить разные товары и понять, какой из них ему подходит. Но вот незадача: в списке продуктов не хватает нужной информации — и вот человек мечется между каталогом и карточками товаров, путается и в итоге покидает сайт, не совершив покупку.
При работе с CS-Cart такие проблемы встречаются регулярно, особенно в B2B-сегменте. С этим поможет UniTheme2 — но его стандартных настроек тоже не всегда хватает, чтобы грамотно отобразить характеристики товара и его разные варианты, а также перенести эти функции в мобильную версию. Поэтому стандартный шаблон часто нуждается в доработке.
Рассказываем о том, как правильно подойти к модификации UniTheme2, что стоит учесть до разработки, и как тестировать получившийся результат.
Почему стоит начать с макета в Figma
Классическая ошибка новичка — лезть в шаблон сразу после того, как возникла идея доработать дизайн. Работа без чёткого плана — это выбор, с которого начинается целый каскад проблем.
Сегодня нужна иконка у характеристики, завтра понадобится поменять сетку, послезавтра вариации должны работать уже не так, а мобильную версию «потом дожмём» — и вот простая модификация дизайна растягивается на месяцы с сотнями правок и постоянными переделками.
Чтобы этого избежать, лучше заранее сделать макет, чтобы и вы, и разработчик заранее видели, какой результат нужен и что сделать для его достижения.
Сейчас можно доступно и быстро собрать макет в Figma, в том числе с помощью нейросетей. Не обязательно рисовать сайт целиком: достаточно макета, отражающего целевые изменения.
К примеру, мы хотим отредактировать представление товаров в общем списке, добавив инфу о вариациях. Тогда вам нужно отразить в макете следующее:
- сами карточки товаров;
- активную и неактивную вариации;
- длинные и короткие названия товаров;
- товар без картинки и с ней;
- мобильную версию;
- состояние «нет в наличии».
С таким макетом разработчик увидит уже готовое задание: где стоит блок, как ведёт себя селектор, где заканчивается основной сценарий и начинаются детали. В итоге он не будет тратить своё и ваше время на догадки и сразу начнёт работать на понятный результат.
Если времени на составление макета нет, можно собрать каркас с низкой детализацией и описанием списка состояний. Это тоже хорошая отправная точка для ТЗ.
P.S. Если нужна помощь с макетом — пишите мне в «Яндекс Мессенджер», Telegram или Max. Я помогу собрать структуру и подготовить макет так, чтобы определиться с нужным результатом на старте и сократить число правок при приёмке.
Какие характеристики нужно вывести в список товаров CS-Cart
Главный вопрос тут простой: какие данные реально помогают выбрать товар, пока вы листаете каталог. Если продукт сложный (например, электрокомпонент), покупатель почти никогда не выбирает его только по названию. Ему нужны параметры. Но это не значит, что надо вывалить в карточку товара весь таб с его описанием.
В каталоге стоит показывать только те характеристики, которые помогут быстро отсечь неподходящие варианты. Обычно это 3–5 ключевых параметров. Например:
- размер;
- материал;
- тип;
- мощность;
- совместимость;
- наличие нужного режима.
Если характеристика не помогает принять решение в каталоге, ей не место в списке товаров. Чем больше мусора в карточке, тем хуже она читается.
Есть ещё два правила:
- Порядок характеристик должен быть одинаковым у всех товаров внутри категории. Если у одного товара тип идёт за материалом, а у другого наоборот, каталог читается хуже.
- Иконки полезны только тогда, когда их смысл понятен без гадания. Если иконка не упрощает чтение, а заставляет думать, лучше оставить нормальный текст.
Зачем проверять, что уже умеют CS-Cart и UniTheme2
Ещё одна популярная ошибка — писать код для решения тех потребностей, которые уже закрывают существующие настройки. Поэтому перед стадией разработки стоит пройтись по стандартным возможностям программы (или темы, если это модификация фронта).
К примеру, у CS-Cart уже есть возможность отображать характеристики товаров и группировать их по характеристикам, а UniTheme2 умеет регулировать число характеристик и выравнивать вёрстку в каталоге.
Вот и получается, что иногда задача закрывается настройкой на 60–70%, а самодельный код нужен только для одной опции: например, для иконок в админке, нестандартного поведения вариаций или особой адаптивной логики.
Советуем действовать в таком порядке:
- Разобрать задачу по частям.
- Проверить, что закрывается штатными настройками.
- Определить, какие функции придётся прописать самостоятельно.
С этим может помочь официальная документация CS-Cart и UniTheme2. Это экономит время и бюджет, а также снижает риск возникновения проблем после обновления.
Что нужно учитывать в мобильной версии каталога
Мобильная версия — место, где хорошие идеи чаще всего разваливаются. На десктопе помещается много. На телефоне места нет. Если просто перенести туда весь набор блоков с десктопа, получится перегруженная карточка, где палец не попадает в нужный элемент и вообще не понятно, что продаётся.
Поэтому лучше продумать дизайн мобильной версии заранее. Здесь на первом экране карточки должно быть лишь самое главное: название, ключевые характеристики, выбранная вариация, цена, наличие и кнопка действия. Всё второстепенное лучше уводить ниже или прятать в раскрывающиеся блоки.
Что ещё стоит проверить на мобильной версии:
- нет ли горизонтального скролла;
- удобно ли нажимать на селекторы и кнопки пальцем;
- не «прыгают» ли цены, кнопки и переключатели;
- не становится ли карточка слишком длинной ещё до основного контента;
- мешает ли визуальный шум прочитать характеристики.
Что следует проверить перед релизом
Перед запуском составьте чек-лист. Он помогает поймать баги до выхода в прод и не ловить сюрпризы уже на живом проекте.
Что мы проверяли на наших проектах:
- товары с длинными названиями;
- товары без изображения;
- товары без вариаций;
- товары с несколькими вариациями;
- товары, которых нет в наличии;
- карточки с разным числом характеристик;
- мобильную версию на разных размерах экранов;
- поведение цен, кнопок и селекторов в одной строке каталога;
- соответствие макету, если он был.
Это поможет отловить баги и незапланированное поведение до выхода в прод.
Заключение
Резюмируя, ещё раз перечислим порядок действий, который поможет вам при серьёзной доработке дизайна каталога:
- Сделать макет в Figma или хотя бы визуальный каркас.
- Понять, каких технических изменений требует доработка.
- Проверить стандартные возможности CS-Cart и UniTheme2.
- Продумать мобильную версию.
- Проверить карточки, вариации, состояния и обновляемость темы.
Такой подход позволит избежать лишних правок, даст более чистый результат и обеспечит прогнозируемое поведение системы на продакшене.
Если нужна помощь на любом этапе, от макета до доработки UniTheme2 или любой другой темы, напишите мне в «Яндекс Мессенджер», Telegram или Max — или же просто оставьте заявку. Я свяжусь с вами и помогу.
Нужна доработка UniTheme2 для CS-Cart?
Напишите мне: посмотрим текущий каталог, определим, какие изменения реально нужны в списке товаров, и соберём понятный план внедрения без лишних переделок.
