Битрикс — ajax подгрузка записей при промотке экрана

26.05.2018  09:59

Я как-то описывал как можно реализовать под Битрикс ajax навигацию в catalog.section, тут возникла очень похожая задача — на детальной странице новости/статьи сделать аяксовую подгрузку других записей из выбранного раздела.

В шаблоне детальной страницы (скорей всего это news.detail) в самом конце подключаем news.list. Нам нужен именно шаблон компонента перечня новостей, будем подгружать по одной записи (как-бы постранично).

$APPLICATION->IncludeComponent(
	"bitrix:news.list",
	"ajax_detail",
	Array(
...
);


В новом шаблоне этого news.list накидаем ajax с обсчётом сколько юзер долистал и надо ли подгружать новую запись. Часть нового шаблона news.list:

'.$arItem['DETAIL_TEXT'].'

'; echo ''; //урла текущей записи для последующей подмены адресной строки ?> NavPageCount > $arResult['NAV_RESULT']->NavPageNomer){ $next_page = $arResult['NAV_RESULT']->NavPageNomer + 1; ?> < div class="hidden" > < div class="" >
$v) { ?> ">
< script src="//code.jquery.com/jquery-1.x-git.min.js" >< /script > < /div > < ? if ($_REQUEST["is_ajax"] != "Y"){ ? > < script >
function showMore (lnk) {
		var page = $(lnk).data('page');
		var section = $(lnk).data('section');
		var sort = $(lnk).data('sort');
		var order = $(lnk).data('order');
		var ib = $(lnk).data('ib');
		var link = '/ajax/articles_detail.php';
		var frm = $("#showmoreform").serialize();
		$(lnk).attr('disabled',true);
		var data = '';
		$.post(link, frm, function(data) {
			if (data) {
			$('#showMore').remove();
			$('.pagination').remove();
			$("#showmoreform").remove();
			$(".articles_ajax").append(data);
			}
		});
		return false;
}
$(document).ready(function(){
	$(window).scroll(function() {
    	var topValue = $(window).scrollTop();
		if ($('.articles_ajax_pages').length){
		var offsetTopVar = $('.articles_ajax_pages').offset().top;
		if (($('.footer').offset().top < $(window).scrollTop() + $(window).height())) {
			setTimeout(function(){
				$('#showMore').trigger('click');
				$('#showMore').remove();
			}, 100); 
		}
		var cItem = $(".aItem");
		cItem.each(function(i){
			if ($(this).offset().top < $(window).scrollTop() && ($(this).offset().top + $(this).height()) > $(window).scrollTop()) {
				// $("#debug").html($(this).offset().top + ' - ' + $(window).scrollTop() + ' && ' + $(this).offset().top + ' + ' + $(this).height());
		if ($(this).find(".cUrl").html()){
			var curLoc = $(this).find(".cUrl").html();
			try {
//подмена урлы при долистывании до нужной статьи, прописана в теле каждой статьи в скрытом слое с классом cUrl.
			history.pushState(null, null, curLoc);
			} catch(e) {}
		}
		}
		});
		}
	});
});
< /script >
< ?}? >
< /div >
< ?}? >


Готово. В директорию ajax положим файлик articles.php с подключенным компонентом news.list (тотже шаблон, что подключали на детальной).
Андрей Панёвин
Здравствуйте! Я — Андрей Панёвин и занимаюсь профессиональной разработкой сайтов на платформе 1С-Битрикс (исключительно программирование). Есть вопросы по статье? Могу подсказать и помочь по скайпу (andrey.panevin.ru), WhatsApp (+7-911-091-0670) или перепиской в ВК.
1000 р./час.



перейти в Блог | Блог (стр. 3)

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): 1С-Битрикс 48  JavaScript 24  jQuery 19  web-программирование 84  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)