Компонент каталога: свой шаблон

Каталог в Битрикс — это комплексный компонент bitrix:catalog, который в зависимости от URL показывает список разделов, товары раздела или карточку товара. Разбираем, как переверстать его под свой дизайн, не теряя торговые предложения и корзину.

Из чего собран каталог

Комплексный компонент bitrix:catalog внутри вызывает набор простых компонентов под конкретный URL:

• bitrix:catalog.section — список товаров раздела;
• bitrix:catalog.element — карточка товара;
• bitrix:catalog.smart.filter — умный фильтр;
• bitrix:catalog.section.list — дерево/плитка разделов;
• bitrix:sale.basket.basket.line — мини-корзина в шапке.

Своя вёрстка каталога — это, по сути, набор кастомных шаблонов для этих вложенных компонентов. Комплексный компонент отвечает только за маршрутизацию по ЧПУ и передачу параметров.

Создание своего шаблона раздела

Скопируйте шаблон списка товаров в /local/ и подключите его в настройках комплексного компонента:

/bitrix/components/bitrix/catalog.section/templates/.default/ → /local/templates/main/components/bitrix/catalog.section/shop_list/

Базовый цикл вывода товаров в template.php:

<?php foreach ($arResult['ITEMS'] as $item): ?>
  <div class="product-card" data-entity="item" id="<?=$item['ID']?>">
    <a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a>
  </div>
<?php endforeach ?>

Атрибуты data-entity и id нужны штатному JS корзины и сравнения: если вы делаете кнопки «В корзину» и «Сравнить» через готовую логику, не выкидывайте их из разметки.

Вывод цен

Цены попадают в $arResult['ITEMS'][n]['PRICES'] — по каждому типу цены, доступному текущему пользователю. Для вывода удобнее MIN_PRICE (минимальная цена с учётом скидок) или конкретный тип по коду:

Чтобы цены вообще появились в выборке, в параметрах компонента нужно перечислить типы цен в PRICE_CODE[] и обычно включить CONVERT_CURRENCY = Y, если цены хранятся в разных валютах.

Торговые предложения (SKU)

Если у товара есть варианты (цвет, размер), это торговые предложения — отдельный инфоблок, связанный с основным. В шаблоне они лежат в $item['OFFERS'], а данные для выбора — в структуре JS_OFFERS. Чтобы предложения выгружались, задают:

• OFFERS_FIELD_CODE[] и OFFERS_PROPERTY_CODE[] — какие поля и свойства предложений тянуть;
• OFFERS_SORT_FIELD — сортировка вариантов;
• OFFERS_LIMIT — сколько предложений выгружать на товар (0 — все).

JS-логику выбора SKU и пересчёта цены/картинки удобнее не писать с нуля, а опереться на штатное расширение и структуру данных JS_OFFERS, которую готовит компонент. Тогда переключение вариантов, доступность и обновление кнопки «В корзину» работают из коробки.

Кнопка «В корзину» через AJAX

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

BX.ajax.runComponentAction('bitrix:catalog.product.list', 'addProductToBasket', {
  mode: 'class',
  data: { productId: id, quantity: 1 }
});

Если делаете совсем свою кнопку, самый простой путь — обратиться к API корзины через \Bitrix\Sale\Basket в собственном обработчике. Главное — после добавления обновить мини-корзину событием, которое слушает sale.basket.basket.line.

Связка с умным фильтром

Умный фильтр (catalog.smart.filter) и список товаров связаны параметром FILTER_NAME. Компонент фильтра формирует глобальный массив (обычно arrFilter), а catalog.section получает его имя тем же параметром и применяет к выборке:

• оба компонента должны иметь одинаковый FILTER_NAME;
• свойства, по которым фильтруем, должны быть помечены как «умный фильтр» в настройках инфоблока;
• для AJAX-обновления списка без перезагрузки задают AJAX_MODE = Y и общий AJAX_ID контейнера.

Если фильтр «не видит» свойство — проверьте, включена ли у него опция участия в умном фильтре и заполнены ли значения у товаров: пустые свойства в фасетном индексе не появляются.

Итог

Свой шаблон каталога — это набор кастомных шаблонов для catalog.section, catalog.element и catalog.smart.filter в /local/. Цены управляются PRICE_CODE, варианты — параметрами OFFERS_*, а корзина и фильтр работают через штатные data-атрибуты и общий FILTER_NAME.

Каталог на десятки тысяч SKU с торговыми предложениями и умным фильтром чувствителен к нагрузке и к качеству выборок. Мы в B2Bsite проектируем такие витрины под высокие нагрузки — с кэшированием, оптимизацией запросов и фасетным индексом, чтобы каталог оставался быстрым при росте ассортимента.