2019-10-01 11:40:00
2768
Первое что нужно сделать - это подготовить компонент и шаблон для новой пагинации.
  • Установить галочку, использовать ajax в компоненте bitrix:news.
  • Создать шаблон пагинации шаблон находится здесь /bitrix/components/bitrix/system.pagenavigation/templates
  • Создать папку с шаблоном и создать или загрузить новый template.php
  • Далее на страницу где будут происходить действия подгрузки нужно добавить javascript — будем использовать ajax запросы. Для корректной подгрузки нужно внести несколько изменений в текущем шаблоне.

 

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

Для понимания, кнопка показать еще содержит адрес для каждой следующей страницы. Т.е. если мы находимся на 1й странице кнопка содержит url для второй, если находится на 3й -для 4й.

Код PHP #1





<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();



$this->setFrameMode(true); ?>



<? while($arResult["nStartPage"] <= $arResult["nEndPage"]):?>



<? if ($arResult["nStartPage"] == $arResult["NavPageNomer"]+1):?>



<div style="width:100%;text-align:center;">



<a class="NewShowElement" href="<? =$arResult["sUrlPath"]?>?<?=$strNavQueryString?>PAGEN_<?=$arResult["NavNum"]?>=<?

=$arResult["nStartPage"]?>">Показать еще</a></div>



<?endif?>



<?$arResult["nStartPage"]++;?>



<?endwhile;?>



 

 

Код PHP #1 - будет нашим новым шаблоном для пагинации.

В коде у div я установил свои inline стили, Вы можете установить свои. Показать еще в коде и будет нашей кнопкой.

Код Js #1

 

<script>

$(document).on('click', '.NewShowElement', function(){

var elementOnClick = $(this);

$.get($('.NewShowElement').attr('href'), {is_ajax: 'y'}, function(data){

 $('.NewShowElement').after(data);

 elementOnClick.remove();});

return false;

})

</script>



 

Код JS #1 нужно разместить на странице где вы планируете подгружать новости ajax. Суть этого кода заключается в том, что мы получаем текущий адрес ссылки $.get($('.NewShowElement').attr('href') и совершаем подгрузку этой же страницы с новыми GET параметрами.

Теперь нужно обрезать лишнее, потому-что у нас подгружается вся страница. Т.е. нужно обрезать всё до компонента bitrix:news и после, чтобы на странице не появлялся header и footer.

Код PHP #2

 

<? if (!array_key_exists('is_ajax', $_REQUEST) && 

!$_REQUEST['is_ajax']=='y'):?> 



<html>

<head>

<title></title>

</head>

<body>



<?endif;?> 



<?$APPLICATION->IncludeComponent(

    "bitrix:news",

    "",

Array(),

false

);?>



<? if (array_key_exists('is_ajax', $_REQUEST) &&

 $_REQUEST['is_ajax']=='y') { die();} ?>



</body>

</html>



Теперь проверяя, наличие переменной is_ajax в url адресе, мы можем получать следующие n записей и добавлять их на страницу. Устанавливать использовать ajax в настройках компонента не нужно.

 

Комментарии (44)