"Show more" button in Bitrix

First, let's create a system.pagenavigation template (if it doesn't exist) in your site template. In my case the path is like /local/templates/main/components/bitrix/system.pagenavigation

Let's copy the default template and name it showMore

Replace the code in the template.php

<?
if (! defined ("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED! == true) die ();
$ this -> createFrame () -> begin ("Loading navigation");
?>

<? if ($ arResult ["NavPageCount"]> 1):?>

    <? if ($ arResult ["NavPageNomer"] + 1 <= $ arResult ["nEndPage"]):?>
        <?
            $ plus = $ arResult ["NavPageNomer"] + 1;
            $ url = $ arResult ["sUrlPathParams"]. "PAGEN _". $ ArResult ["NavNum"]. "=". $ Plus;

        ?>

        <div class = "load_more" data-url = "<? = $ url?>">
            show more
        </div>

    <? else:?>

        <div class = "load_more">
            Loaded all
        </div>

    <? endif?>

<?endif?>

Replace styles in style.css

  .load_more {margin: 10px; padding: 10px; border: 1px solid #ddd; cursor: pointer; text-align: center;}  

Add the script.js file and write:

  $ (document) .ready (function () {
    $ (document) .on ('click', '.load_more', function () {

        var targetContainer = $ ('. news-list'), // Container that stores items
            url = $ ('. load_more'). attr ('data-url'); // URL from which we will take elements

        if (url! == undefined) {
            $ .ajax ({
                type: 'GET',
                url: url,
                dataType: 'html',
                success: function (data) {

                    // Remove the old navigation
                    $ ('. load_more'). remove ();

                    var elements = $ (data) .find ('. news-item'), // Looking for elements
                        pagination = $ (data) .find ('. load_more'); // Looking for navigation

                    targetContainer.append (elements); // Add posts to the end of the container
                    targetContainer.append (pagination); // add navigation next

                }
            })
        }
    });
});  

Create a new news list template and replace the code in the template.php file with:

<? if (! defined ("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED! == true) die ();
$ this-> setFrameMode (true);
?>
<div class = "news-list">
    <? foreach ($ arResult ["ITEMS"] as $ arItem):?>
        <?
        $ this-> AddEditAction ($ arItem ['ID'], $ arItem ['EDIT_LINK'], CIBlock :: GetArrayByID ($ arItem ["IBLOCK_ID"], "ELEMENT_EDIT"));
        $ this-> AddDeleteAction ($ arItem ['ID'], $ arItem ['DELETE_LINK'], CIBlock :: GetArrayByID ($ arItem ["IBLOCK_ID"], "ELEMENT_DELETE"), array ("CONFIRM" => GetMessage (' CT_BNL_ELEMENT_DELETE_CONFIRM ')));
        ?>
        <div id = "<? = $ this-> GetEditAreaId ($ arItem ['ID']);?>" class = "news-item">

            <a href="<?=$arItem ["DETAIL_PAGE_URL""">?> ">

                <h2><?=$arItem ["NAME">?> </h2>

            </a>

            <? = CFile :: ShowImage ($ arItem ['PREVIEW_PICTURE'])?>

            <? = $ arItem ['PREVIEW_TEXT']?>
        </div>
    <? endforeach;?>
</div>

<?=$arResult ['NAV_STRING'>] 

On the required page, place the bitrix: news.list component and configure it for the required infoblock. Select showMore as the component template (if you did everything correctly, it should appear in the list), and showMore as the page navigation template.

Reprint of material:

• "Show more" mechanism in 1C- Bitrix

Теги: 1C BitrixphpJavascriptjQuery