Добавляем механизм "показать еще" в разделе новости для 1С-Битрикс

Bootstrap и AMP страницы?
Обзор обновления aveCRM 4.5
Добавляем механизм "показать еще" в разделе новости для 1С-Битрикс

Задача: добавить к комплексному компоненты новости возможность дозагрузки новостей. При выводе всех элементов - кнопка “показать еще” должна пропадать со страницы.

При создании сайта на 1С-Битрикс данную задачу можно решить так:

  • Добавляем на страницу компонент новости, задаем необходимые параметры
  • Размещаем на той же странице обработчик загрузки новых документов
  • Добавляем компонент список новостей на специальной странице

С первым пунктом вопросов быть не должно, перейдем сразу к следующим. В шаблон комплексного компонента после вывода списка документов добавляем код

<?php 
$arFilter = array('ACTIVE' => 'Y', 'IBLOCK_ID' => $arParams["IBLOCK_ID"]);
$num_rows = CIBlockElement::GetList(
    Array(), 
    $arFilter, 
    true
);
if($num_rows >= $arParams['NEWS_COUNT']) { ?>
<div class="catalog-production__show-more btn js-show-more">Смотреть ещё</div>

<script>
    var newsPagen = 2;
    var max_page = <?=$num_rows;?>;
    $(document).ready(function() {

        $(".js-show-more").on('click',function() {

            $.ajax({
				url: '/_ajax/more_news.php?PAGEN_1='+newsPagen,
				success: function( data ) {
                    $('.news__container').append(data);
                    newsPagen++;
                    if((max_page-<?=$arParams["NEWS_COUNT"];?>) <= <?=$arParams["NEWS_COUNT"];?>) {
                        $(".js-show-more").remove();
                    }
				}
			});

            return false;
        });
    });
</script>
<?php } ?>

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

Далее создаем папку _ajax в которой будем хранить файлы обработчики. В нашем случае это будет more_news.php. В нем мы размещаем компонент список новостей и обязательно включаем постраничную навигацию, которую из шаблона нужно удалить. Содержимое файла обработчика будет примерно такое:

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php');
$APPLICATION->IncludeComponent(
    "bitrix:news.list",
    "news_list",

Далее остается только добавить стили кнопке. Для компонента список новостей можно либо создать собственный шаблон, если верстка у комплексного сложная, либо использовать один шаблон на два компонента, убирая лишнее с помощью условий.

Вы готовы начать работу или получить консультацию?

Самый простой способ - написать нам. Не стесняйтесь задавать вопросы. Мы готовы начать обсуждение вашего проекта сейчас, сделайте следующий шаг, напишите нам.