Rus
Eng
Кнопка "Показать еще" в Битрикс

All English-language materials have been translated fully automatically using the Google service

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

file
<?
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:

Comments

There are no comments yet, you can be the first to leave it

Leave a comment

The site uses a comment pre-moderation system, so your message will be published only after approval by the moderator

You are replying to a user's comment

Send

FEEDBACK

Email me

Are you developing a new service, making improvements to the existing one and want to be better than your competitors? You have come to the right place. I offer you a comprehensive studio-level website development. From me you can order design, layout, programming, development of non-traditional functionality, implementation of communication between CMS, CRM and Data Analitics, as well as everything else related to sites, except for promotion.

Contact, I will always advise on all questions and help you find the most effective solution for your business. I am engaged in the creation of sites in Novosibirsk and in other regions of Russia, I also work with the CIS countries. You will be satisfied with our cooperation

An error occurred while sending, please try again after a while
Message sent successfully

Phones

+7(993) 007-18-96

Email

info@tichiy.ru

Address

Россия, г. Москва

By submitting the form, you automatically confirm that you have read and accept the Privacy Policy site

Contact with me
Send message
By submitting the form, you automatically confirm that you have read and accept Privacy policy of site
Sending successful!
Thank you for contacting :) I will contact you as soon as possible
Sending failed
An error occurred while sending the request. Please wait and try again after a while or call my phone number