Для того, чтобы в Битрикс сделать бесконечную AJAX подгрузку страниц каталога, необходимо играться с параметром PAGEN_1 при включенной пагинации.
Выглядеть это будет примерно так:
Для начала определим в init.php переменную, в которой будем хранить количество элементов, отображаемых на странице при каждой прогрузке:
/* * количество элементов каталога на странице */ $elem_per_page = 48;
Далее пишем JS код, который будет вызываться при прокрутке страницы. Если мы достигаем подвала сайта — делаем AJAX запрос и добавляем в блок со списком товаров новые:
<script> /*AJAX прогрузка*/ $(document).ready(function(){ /* С какой страницы надо делать выборку из базы при ajax-запросе */ var startFrom = 2; /* максимальное количество страниц */ <? CModule::IncludeModule("iblock"); //ID инфоблока каталога: $catalog_iblock_id = 2; //раздел каталога: $catalog_section_id = 3; $max_elements = CIBlockElement::GetList( array(), array('IBLOCK_ID'=>$catalog_iblock_id, 'ACTIVE'=>'Y', 'SECTION_ID'=>$catalog_section_id, 'INCLUDE_SUBSECTIONS'=>'Y' ), array(), false, array('ID', 'NAME') ); $max_pages = ceil($max_elements/$elem_per_page); ?> var maxPages = <?=$max_pages?>; /* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */ var inProgress = false; /*если количество элементов на странице < количества элементов в разделе*/ if (maxPages<startFrom) inProgress = true; $(window).scroll(function() { /* Если высота окна + высота прокрутки больше или равна высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос. 600 - это высота подвала в пикселях */ if($(window).scrollTop() + $(window).height() >= $(document).height() - 600 && !inProgress) { $.ajax({ url: '/ajax/catalog_pager.php', method: 'POST', data: { "PAGEN_1" : startFrom, "section_id": <?=$catalog_section_id?> }, beforeSend: function() { inProgress = true; $(".iloader").append('<div id="preloader"></div>'); } }).done(function(data){ $('#preloader').remove(); $(".iloader").append(data); startFrom += 1; if (maxPages>=startFrom){ inProgress = false; } }); } }); }); </script>
В плане вёрстки делаем так: элементы каталога отображаем в div-нике с классом «iloader».
JS код, представленный выше добавляем в ваш шаблон catalog.section на странице раздела каталога.
В /ajax/catalog_pager.php также отображаем catalog.section но уже с другой вёрсткой (там будут отображаться элементы каталога, которые подгружаются по каждому ajax запросу). Примерно так:
<? $params = Array( ... "SECTION_ID" => $_REQUEST['section_id'], ... ); $APPLICATION->IncludeComponent( "bitrix:catalog.section", "<ваш_шаблон>", $params ); ?>
Собственно вся магия :-)