Как настроить вывод списка статей с фильтром по разделам, тегам и кнопкой «Показать ещё»?

В этой статье расскажем, как на сайте вывести красивый и удобный список новостей или статей с возможностью фильтрации по разделам и тегам, а также добавить кнопку «Показать ещё» для подгрузки новых материалов без перезагрузки страницы.

1. Что понадобится для работы

• Инфоблок типа «Новости» или «Статьи» в административной панели
• Созданные разделы внутри этого инфоблока (по темам, рубрикам)
• Свойство TAGS (строка или список, символьный код: TAGS) для фильтрации по тегам
• Заполненные анонсные или детальные изображения у статей

2. Размещаем компонент списка на странице

В нужном месте сайта (например, в разделе /blog/ или /news/) разместите компонент bitrix:news (или bitrix:news.list), укажите нужный инфоблок и подключите специальный шаблон, где реализована фильтрация и AJAX-подгрузка:

<?php
$APPLICATION->IncludeComponent(
    "bitrix:news",
    "blog", // название шаблона
    Array(
        "IBLOCK_TYPE" => "content",
        "IBLOCK_ID" => "22", // Ваш ID инфоблока
        // ... остальные параметры
    )
);
?>

3. Как выглядит и работает страница списка статей

• Верхний фильтр — навигация по разделам (например: Все разделы, Новости, Кейсы)
• Второй фильтр — навигация по тегам (например: Все теги, Интервью, Полезное)
• Карточки статей: изображение, название, тег
• Кнопка «Показать ещё» — подгружает дополнительные статьи без перезагрузки страницы

4. Пример кода: шаблон страницы списка

Весь основной вывод и фильтрация реализованы в файле template.php вашего шаблона компонента. Пример — карточка статьи и фильтр по разделам/тегам:

<?php
// Вывод навигации по разделам
foreach ($arSections as $section) {
    echo '<a class="grid-section__sections-list-item" href="?SECTION_CODE=' . urlencode($section['CODE']) . '">'
        . htmlspecialcharsbx($section['NAME']) . '</a>';
}

// Вывод навигации по тегам
foreach ($allTags as $tag) {
    echo '<a class="grid-section__links-list-item" href="?tag=' . urlencode($tag) . '">'
        . htmlspecialcharsbx($tag) . '</a>';
}

// Карточка статьи
$img = $arItem["IMG"];
?>
<a class="collection-card" href="<?= $arItem["DETAIL_PAGE_URL"] ?>">
    <div class="collection-card__image-wrapper">
        <?php if ($img): ?>
            <img class="collection-card__image" src="<?= $img ?>" alt="<?= htmlspecialcharsbx($arItem["NAME"]) ?>" />
        <?php endif; ?>
        <?php if ($firstTag): ?>
            <span class="collection-card__tag"><?= htmlspecialcharsbx($firstTag) ?></span>
        <?php endif; ?>
    </div>
    <div class="collection-card__title"><?= htmlspecialcharsbx($arItem["NAME"]) ?></div>
</a>

5. Кнопка «Показать ещё» — AJAX-подгрузка

Кнопка на странице вызывает AJAX-запрос к специальному файлу (/local/ajax/blog_list.php), который возвращает очередную порцию статей.
Пример обработчика:

<?php
define("NO_KEEP_STATISTIC", true);
define("NOT_CHECK_PERMISSIONS", true);
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");

CModule::IncludeModule('iblock');
$IBLOCK_ID = 22;
$sectionCode = $_POST['section'] ?? '';
$currentTag = urldecode($_POST['tag'] ?? '');
$page = max(1, intval($_POST['page'] ?? 1));
$pageSize = 8;

$filter = ["IBLOCK_ID" => $IBLOCK_ID, "ACTIVE" => "Y"];
if ($sectionCode) {
    $filter["SECTION_CODE"] = $sectionCode;
    $filter["INCLUDE_SUBSECTIONS"] = "Y";
}
if ($currentTag) {
    $filter["%PROPERTY_TAGS"] = $currentTag;
}

$rsItems = CIBlockElement::GetList(
    ["ACTIVE_FROM" => "DESC"],
    $filter,
    false,
    ["nPageSize"=>$pageSize, "iNumPage"=>$page],
    ["ID", "NAME", "PREVIEW_PICTURE", "DETAIL_PICTURE", "DETAIL_PAGE_URL", "PROPERTY_TAGS"]
);

$items = [];
while ($arItem = $rsItems->GetNext()) {
    $tags = [];
    if ($arItem["PROPERTY_TAGS_VALUE"]) {
        $tags = is_array($arItem["PROPERTY_TAGS_VALUE"])
            ? array_map('trim', $arItem["PROPERTY_TAGS_VALUE"])
            : array_map('trim', explode(",", $arItem["PROPERTY_TAGS_VALUE"]));
    }
    $img = '';
    if ($arItem['PREVIEW_PICTURE']) {
        $img = CFile::GetPath($arItem['PREVIEW_PICTURE']);
    } elseif ($arItem['DETAIL_PICTURE']) {
        $img = CFile::GetPath($arItem['DETAIL_PICTURE']);
    }
    $items[] = [
        'ID' => $arItem['ID'],
        'NAME' => $arItem['NAME'],
        'PREVIEW_PICTURE' => $img,
        'DETAIL_PAGE_URL' => $arItem['DETAIL_PAGE_URL'],
        'TAGS' => $tags,
    ];
}
echo json_encode([
    "items" => $items,
    "last" => $rsItems->NavPageNomer >= $rsItems->NavPageCount
]);

6. Важные стили для оформления

.collection-card,
.grid-section__sections-list-item,
.grid-section__links-list-item {
    text-decoration: none !important;
}
.collection-card__image-wrapper {
    background: transparent;
}
.grid-section__body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

7. Советы и возможные проблемы

• Нет карточек? — Проверьте, что статьи активны и правильно указан IBLOCK_ID.
• Не работает кнопка? — Убедитесь, что файл /local/ajax/blog_list.php доступен, а путь указан верно.
• Хочется изменить число колонок? — Поменяйте grid-template-columns: repeat(4, 1fr); на нужное.

Вывод

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