Разработка на 1С-Битрикс
Михаил Базаров
Структура шаблона:
- Верхний блок: логотип слева, информация о бренде справа (flex-контейнер).
- Горизонтальный смарт-фильтр (компонент
bitrix:catalog.smart.filter). - Сетка товаров — 6 карточек в ряд, вывод ~30 товаров (5 рядов).
- Постраничная навигация (пагинация).
Полный код шаблона (файл detail.php компонента бренда):
<?php
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();
/** @var array $arResult */
/** @var array $arParams */
/** @var CBitrixComponentTemplate $this */
\Bitrix\Main\UI\Extension::load('ui.bootstrap4'); // опционально — для CSS-сетки
?>
<!-- ========== БЛОК БРЕНДА: логотип + информация ========== -->
<div class="brand-header" style="display: flex; align-items: flex-start; gap: 30px; margin-bottom: 35px; flex-wrap: wrap;">
<?php if ($arResult['DETAIL_PICTURE']): ?>
<div class="brand-logo" style="flex-shrink: 0; max-width: 200px;">
<img src="<?= $arResult['DETAIL_PICTURE']['SRC'] ?>"
alt="<?= htmlspecialcharsbx($arResult['NAME']) ?>"
style="width: 100%; height: auto; display: block;">
</div>
<?php endif; ?>
<div class="brand-info" style="flex: 1; min-width: 250px;">
<h1 style="margin-top: 0;"><?= htmlspecialcharsbx($arResult['NAME']) ?></h1>
<?php if ($arResult['DETAIL_TEXT']): ?>
<div class="brand-description">
<?= $arResult['DETAIL_TEXT'] ?>
</div>
<?php endif; ?>
</div>
</div>
<!-- ========== ГОРИЗОНТАЛЬНЫЙ ФИЛЬТР ========== -->
<?php
// Подключаем смарт-фильтр горизонтального типа
// Параметры нужно передать из родительского компонента или задать вручную
$APPLICATION->IncludeComponent(
'bitrix:catalog.smart.filter',
'horizontal', // или ваш кастомный шаблон
array(
'IBLOCK_TYPE' => $arParams['IBLOCK_TYPE'], // тип инфоблока товаров
'IBLOCK_ID' => $arParams['IBLOCK_ID_CATALOG'], // ID инфоблока товаров
'SECTION_ID' => '', // фильтр по всем разделам бренда
'FILTER_NAME' => 'arrFilter', // имя фильтра для выборки
'PREFILTER_NAME' => 'brandPreFilter', // массив с предварительным фильтром по бренду
'SAVE_IN_SESSION' => 'N',
'INSTANT_RELOAD' => 'Y',
'CACHE_TYPE' => $arParams['CACHE_TYPE'],
'CACHE_TIME' => $arParams['CACHE_TIME'],
),
$component,
array('HIDE_ICONS' => 'Y')
);
?>
<!-- ========== ЗАГОЛОВОК БЛОКА ТОВАРОВ ========== -->
<h2 style="margin: 30px 0 20px;">Товары бренда <?= htmlspecialcharsbx($arResult['NAME']) ?></h2>
<!-- ========== ВЫБОРКА ТОВАРОВ ========== -->
<?php
// Подготавливаем фильтр для выборки товаров
$GLOBALS['brandFilter'] = array(
'=IBLOCK_ID' => $arParams['IBLOCK_ID_CATALOG'],
'=PROPERTY_BRAND' => $arResult['ID'], // ID текущего бренда
'=ACTIVE' => 'Y',
'=CATALOG_AVAILABLE' => 'Y', // только доступные товары
);
// Применяем фильтр от смарт-фильтра (горизонтальный фильтр выше)
if (!empty($GLOBALS['arrFilter'])) {
$GLOBALS['brandFilter'] = array_merge(
$GLOBALS['brandFilter'],
$GLOBALS['arrFilter']
);
}
?>
<?php
// Используем комплексный компонент catalog.section для вывода товаров
$APPLICATION->IncludeComponent(
'bitrix:catalog.section',
'brand_products', // ваш кастомный шаблон, см. код ниже
array(
'IBLOCK_TYPE' => $arParams['IBLOCK_TYPE'],
'IBLOCK_ID' => $arParams['IBLOCK_ID_CATALOG'],
'ELEMENT_SORT_FIELD' => 'sort',
'ELEMENT_SORT_ORDER' => 'asc',
'PAGE_ELEMENT_COUNT' => 30, // 6x5 = 30 товаров
'LINE_ELEMENT_COUNT' => 6, // 6 карточек в ряд
'FILTER_NAME' => 'brandFilter',
'PROPERTY_CODE' => array('BRAND', 'ARTICLE', 'MATERIAL'),
'PRICE_CODE' => $arParams['PRICE_CODE'],
'CONVERT_CURRENCY' => 'Y',
'CURRENCY_ID' => $arParams['CURRENCY_ID'],
'HIDE_NOT_AVAILABLE' => 'Y',
'HIDE_NOT_AVAILABLE_OFFERS' => 'Y',
'ADD_SECTIONS_CHAIN' => 'N',
'SET_TITLE' => 'N',
'SET_BROWSER_TITLE' => 'N',
'CACHE_TYPE' => $arParams['CACHE_TYPE'],
'CACHE_TIME' => $arParams['CACHE_TIME'],
'CACHE_GROUPS' => $arParams['CACHE_GROUPS'],
'DISPLAY_BOTTOM_PAGER' => 'Y', // пагинация снизу
'PAGER_TITLE' => 'Товары бренда',
'PAGER_SHOW_ALWAYS' => 'Y',
'PAGER_TEMPLATE' => '.default',
'PAGER_DESC_NUMBERING' => 'N',
'PAGER_DESC_NUMBERING_CACHE_TIME' => 36000,
'PAGER_SHOW_ALL' => 'N',
'PAGER_BASE_LINK_ENABLE' => 'Y',
'SET_STATUS_404' => 'N',
'SHOW_404' => 'N',
'MESSAGE_404' => '',
'ACTION_VARIABLE' => 'action',
'PRODUCT_ID_VARIABLE' => 'id',
'USE_PRODUCT_QUANTITY' => 'N',
'ADD_PROPERTIES_TO_BASKET' => 'Y',
'PRODUCT_PROPS_VARIABLE' => 'prop',
'PARTIAL_PRODUCT_PROPERTIES' => 'Y',
'OFFERS_CART_PROPERTIES' => array(),
'PRODUCT_SUBSCRIPTION' => 'N',
'SHOW_PRICE_COUNT' => '1',
'PRICE_VAT_INCLUDE' => 'Y',
'USE_PRODUCT_NAV' => 'Y',
'BACKGROUND_IMAGE' => '',
'COMPATIBLE_MODE' => 'Y',
'DISABLE_INIT_JS_IN_COMPONENT' => 'Y',
),
$component
);
?>Шаблон для bitrix:catalog.section — файл brand_products/template.php:
Скопируйте стандартный шаблон .default компонента catalog.section в brand_products, или используйте этот минимальный вариант:
<?php
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();
/** @var array $arResult */
/** @var array $arParams */
/** @var CBitrixComponentTemplate $this */
$this->setFrameMode(true);
?>
<?php if (!empty($arResult['ITEMS'])): ?>
<div class="brand-products-grid" style="
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
margin-bottom: 30px;
">
<?php foreach ($arResult['ITEMS'] as $item): ?>
<?
$this->AddEditAction($item['ID'], $item['EDIT_LINK'], CIBlock::GetArrayByID($item['IBLOCK_ID'], 'ELEMENT_EDIT'));
$this->AddDeleteAction($item['ID'], $item['DELETE_LINK'], CIBlock::GetArrayByID($item['IBLOCK_ID'], 'ELEMENT_DELETE'));
?>
<div class="product-card" id="<?= $this->GetEditAreaId($item['ID']) ?>" style="
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
display: flex;
flex-direction: column;
background: #fff;
">
<?php if ($item['PREVIEW_PICTURE']['SRC'] || $item['DETAIL_PICTURE']['SRC']): ?>
<?php $picture = $item['PREVIEW_PICTURE'] ?: $item['DETAIL_PICTURE']; ?>
<a href="<?= $item['DETAIL_PAGE_URL'] ?>" style="display: block; margin-bottom: 12px;">
<img src="<?= $picture['SRC'] ?>"
alt="<?= htmlspecialcharsbx($item['NAME']) ?>"
style="width: 100%; height: 180px; object-fit: contain; display: block;">
</a>
<?php endif; ?>
<a href="<?= $item['DETAIL_PAGE_URL'] ?>"
style="text-decoration: none; color: #333; font-weight: 500; margin-bottom: 8px;">
<?= htmlspecialcharsbx($item['NAME']) ?>
</a>
<?php if (!empty($item['MIN_PRICE']['PRINT_DISCOUNT_VALUE'])): ?>
<div class="product-price" style="margin-top: auto; font-size: 1.1em; font-weight: 700; color: #d00;">
<?= $item['MIN_PRICE']['PRINT_DISCOUNT_VALUE'] ?>
</div>
<?php elseif (!empty($item['MIN_PRICE']['PRINT_VALUE'])): ?>
<div class="product-price" style="margin-top: auto; font-size: 1.1em; font-weight: 700; color: #333;">
<?= $item['MIN_PRICE']['PRINT_VALUE'] ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<!-- ====== ПАГИНАЦИЯ ====== -->
<?php if ($arResult['NAV_STRING']): ?>
<div class="brand-pagination" style="text-align: center; margin: 20px 0;">
<?= $arResult['NAV_STRING'] ?>
</div>
<?php endif; ?>
<?php else: ?>
<p style="text-align: center; padding: 40px 0; color: #888;">Товары этого бренда не найдены.</p>
<?php endif; ?>Важные пояснения:
- Фильтрация по бренду. В примере используется свойство
PROPERTY_BRAND— замените на актуальный код свойства, которое привязывает товар к бренду в вашем инфоблоке товаров. - ID инфоблока товаров. Параметр
IBLOCK_ID_CATALOGдолжен быть передан в$arParamsкомпонента бренда. Если его нет — укажите ID инфоблока жёстко:'IBLOCK_ID' => 2. - Горизонтальный фильтр. Компонент
bitrix:catalog.smart.filterвыводится в горизонтальной ориентации. Шаблонhorizontalможно взять из стандартных шаблонов компонента и доработать под свой дизайн. - Сетка 6 колонок. Реализована через CSS Grid (
grid-template-columns: repeat(6, 1fr)). При необходимости адаптива — добавьте медиа-запросы для переключения на 3 или 2 колонки на мобильных устройствах. - Пагинация. Управляется параметром
PAGE_ELEMENT_COUNT = 30(6 × 5). Компонент сам выводит постраничную навигацию через$arResult['NAV_STRING'].