Подгрузка страниц на AJAX для элементов каталога в Битрикс

Для того, чтобы в Битрикс сделать бесконечную AJAX подгрузку страниц каталога, необходимо играться с параметром PAGEN_1 при включенной пагинации.

Выглядеть это будет примерно так:

Clipboard01

Для начала определим в 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
        );			
?>

Собственно вся магия 🙂