Стенд GuardLabs · вёрстка под CS-Cart

Figma → CS-Cart: вёрстка темы на Smarty и LESS

Небольшой макет собран так, как он ложится в CS-Cart: токены макета становятся переменными темы в LESS, блоки страницы — .tpl-шаблонами, а доработки — хуками и override, без правки ядра. Ниже — живая вёрстка (не скриншот), переключатели темы и исходники шаблонов.

1. Живой рендер: страница категории

Это настоящая вёрстка в браузере. Кнопки ниже меняют переменные темы и ширину области — ровно то, что в CS-Cart задаётся в styles.less и брейкпоинтах темы.

Тема: Скругление: Ширина:

demo-shop · категория «Освещение» ширина области: десктоп · сетка 3 колонки

LUMENshop

Корзина 3

Главная / Каталог / Освещение

Освещение

28 товаров в категории

Сортировка: по популярности · по цене · по новизне Показывать: 12 · 24 · 48

-20%

Светильник трековый LED 20 Вт, 4000K

★★★★☆ (14)

В наличии

1 240 ₴

1 550 ₴

Лампа филаментная E27, 8 Вт, тёплый свет

★★★★★ (31)

В наличии

185 ₴

Прожектор уличный 50 Вт, IP65

★★★★☆ (7)

Под заказ, 3–5 дней

890 ₴

Новинка

Люстра подвесная на 5 ламп, чёрный металл

★★★★☆ (4)

В наличии

3 470 ₴

Лента LED 5 м, 12 В, влагозащита

★★★☆☆ (19)

В наличии

640 ₴

790 ₴

Датчик движения потолочный, 360°

★★★★☆ (9)

В наличии

415 ₴

2. Токены макета → переменные темы

Слева — то, что приходит из Figma; справа — переменная в styles.less. Цвет, радиус, шаг сетки и шрифт не «зашиты» в разметку: поменяли переменную — поменялось везде (кнопки выше это и делают).

Слой / стиль в Figma	Переменная темы	Значение
Primary / Brand	`@gl-primary`	#1f6feb
Primary / Hover	`@gl-primary-dark`	#1a5ec2
Text / Base	`@gl-ink`	#16181d
Text / Secondary	`@gl-ink-2`	#5b6472
Surface / Card	`@gl-surface`	#ffffff
Stroke / Divider	`@gl-line`	#e3e7ee
Corner radius (card, button)	`@gl-radius`	10px
Grid gap (Auto layout)	`@gl-gap`	16px
Heading weight	`@gl-h-weight`	700
Badge / Sale	`@gl-badge`	#e11d48

3. Где это лежит в CS-Cart

Структура темы и точки правок — чтобы обновление движка не затирало работу.

# тема магазина
design/themes/my_theme/
├─ manifest.json
├─ css/
│  ├─ styles.less        ← переменные из таблицы выше
│  └─ addons/…
├─ templates/
│  ├─ index.tpl
│  ├─ blocks/
│  │  ├─ product_scroller.tpl
│  │  └─ list_templates/
│  │     └─ grid_list.tpl   ← карточка товара
│  ├─ views/
│  │  ├─ categories/view.tpl
│  │  └─ products/view.tpl
│  └─ addons/my_mod/hooks/…
└─ media/images/

# свой модуль — вся логика тут,
# ядро не трогаем
app/addons/my_mod/
├─ addon.xml
├─ func.php
└─ controllers/

# override шаблона ядра из модуля
design/themes/my_theme/templates/
  addons/my_mod/overrides/
    views/products/view.tpl

# точечная вставка через хук
design/themes/my_theme/templates/
  addons/my_mod/hooks/products/
    list_grid.post.tpl

4. Карточка товара: шаблон и точка расширения

Тот самый блок, который вы видите в сетке выше — как он выглядит на Smarty.

{* design/themes/my_theme/templates/blocks/list_templates/grid_list.tpl *}
<article class="prod">
  {if $product.discount_prc}<span class="badge">-{$product.discount_prc}%</span>{/if}

  {include file="common/image.tpl" images=$product.main_pair
           image_width=$settings.Thumbnails.product_lists_thumbnail_width}

  <a class="name" href="{"products.view?product_id=`$product.product_id`"|fn_url}">
    {$product.product}
  </a>

  {include file="views/products/components/product_rating.tpl"}
  {include file="views/products/components/product_prices.tpl" product=$product}

  {* точка расширения: сюда встанет любой модуль, ядро править не нужно *}
  {hook name="products:list_grid"}{/hook}

  {include file="buttons/add_to_cart.tpl" obj_id=$obj_id but_role="action"}
</article>

А так выглядит вставка из модуля в эту точку — отдельный файл, ничего в теме не переписываем:

{* …/addons/my_mod/hooks/products/list_grid.post.tpl *}
{if $product.amount > 0}
  <span class="stock">{__("in_stock")}</span>
{else}
  <span class="stock no">{__("on_order_3_5_days")}</span>
{/if}

5. LESS темы: переменные, а не копипаст

// design/themes/my_theme/css/styles.less
@gl-primary:      #1f6feb;
@gl-primary-dark: darken(@gl-primary, 8%);
@gl-ink:          #16181d;
@gl-line:         #e3e7ee;
@gl-radius:       10px;
@gl-gap:          16px;

.prod {
  background: @gl-surface;
  border: 1px solid @gl-line;
  border-radius: @gl-radius;
  padding: 12px;

  .buy { background: @gl-primary; border-radius: @gl-radius;
         &:hover { background: @gl-primary-dark; } }
}

.grid {
  display: grid; gap: @gl-gap;
  grid-template-columns: repeat(3, 1fr);
  @media (max-width: 900px) { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 560px) { grid-template-columns: 1fr; }
}

6. Что проверяю до сдачи

Три брейкпоинта: десктоп / планшет / телефон — на реальных блоках, а не «на глаз».
Длинное название товара, цена без скидки, товар «под заказ», пустой фильтр — карточка не разъезжается.
Кнопки и поля доступны с клавиатуры, у полей есть подписи.
Сетка на 1, 2, 5 товарах в категории — не только на «красивых» шести.

Шрифты подключены локально, без внешних загрузок на каждый рендер.
Размеры миниатюр совпадают с настройками CS-Cart, чтобы не резать картинки в браузере.
Изменения — в своей теме и своём модуле, ядро остаётся чистым для обновлений.
Передача: архив темы + модуля, короткая инструкция, куда что ставится.

7. Как идёт работа

Разбор макета. Собираю из Figma токены и повторяющиеся блоки, сразу отмечаю места, где макет и возможности движка расходятся — согласуем до вёрстки, а не после.

Скелет темы. Переменные LESS, сетка, типографика, шапка и подвал. Первый экран показываю на вашем тестовом домене.

Страницы по очереди. Главная, категория, карточка товара, корзина/оформление — каждую показываю на живом стенде, правки собираю списком.

Доработки хуками. Всё, чего нет в стандартной теме, делаю модулем и хуками — обновление CS-Cart не затирает работу.

Передача. Установка на ваш хостинг, прогон по списку проверок из блока 6, архив темы и модуля с инструкцией.

Это наш вариант процесса, а не финал — подстроим под то, как удобнее вам.

Честно о стенде

Каталог и макет на этой странице — синтетические, наши собственные, не клиентский магазин. Страница показывает вёрстку и структуру шаблонов темы; это стенд, а не витрина работающего магазина. Коммерческих проектов на CS-Cart у нас пока нет — есть свои стенды: этот и прогрев кеша миниатюр CS-Cart с замером. Опыт вёрстки по макету и работы с шаблонизаторами — наш основной профиль.

Хотите такое же для своего бизнеса?

Мы делаем такие демо и внедряем под ваш процесс — оставьте заявку, ответим быстро.

Email: hello@guardlabs.online
Telegram: @Alright_thanks