Показать еще / ajax подгрузка элементов в Битрикс

Постраничная ajax навигация по кнопке «показать ещё» для 1С-Битрикс

Пример для компонентов bitrix:news.list или bitrix:catalog.section


Решение:
  1. Проверяем, чтобы был подключен jQuery
  2. Создадим свой шаблон компонента постраничной навигации в #мой_шаблон#/components/bitrix/system.pagenavigation/load_more/
  3. Создадим файл template.php и добавим следующий код:
    <?if($arResult["NavPageCount"] > 1):?>
        <?if ($arResult["NavPageNomer"]+1 <= $arResult["nEndPage"]):?>
            <?
                $plus = $arResult["NavPageNomer"]+1;
                $url = $arResult["sUrlPathParams"] . "PAGEN_1=" . $plus
            ?>
            <div class="load_more" style="cursor:pointer;width:100%" data-url="<?=$url?>">
                Показать еще
            </div>
    <?endif?>
  4. Создадим файл script.js и добавим следующий код:
    $(document).ready(function(){
        $(document).on('click', '.load_more', function(){
            var targetContainer = $('.loadmore_wrap'),          //  Контейнер, в котором хранятся элементы
    url = $('.load_more').attr('data-url'); // URL, из которого будем брать элементы if (url !== undefined) { $.ajax({ type: 'GET', url: url, dataType: 'html', success: function(data){ // Удаляем старую навигацию $('.load_more').remove(); var elements = $(data).find('.loadmore_item'), // Ищем элементы
    pagination = $(data).find('.load_more');// Ищем навигацию targetContainer.append(elements); // Добавляем посты в конец контейнера targetContainer.append(pagination); // добавляем навигацию следом } }) } }); });
  5. В шаблоне компонента списка новостей news.list до цикла задать класс обёртки loadmore_wrap
  6. В цикле присвоить класс элементу loadmore_item
  7. В настройках компонента выбрать новый шаблон постраничной навигации load_more
  8. В коде это будет выглядеть так:
    "PAGER_BASE_LINK_ENABLE" => "N",
    "PAGER_DESC_NUMBERING" => "N",
    "PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
    "PAGER_SHOW_ALL" => "N",
    "PAGER_SHOW_ALWAYS" => "N",
    "PAGER_TEMPLATE" => "load_more",
    "PAGER_TITLE" => "Новости",

Похожие решения:
Изменено: 18 11 2020
Просмотров: 2592

Написать комментарий (без авторизации)

Написать