Всем привет.
Доделал своё задание infinityScroll, бесконечную прокрутку с прогрузкой, + рабочий Эрмитаж + BX.ajax , возможно кому- либо будет интересно, привожу пример своего кода.
Делал с фильтром Isotop + masonry. Редактируйте под себя как хотите.
Первый код это файл пагинации template.php у меня лежит по адресу : bitrix/templates/MAINER/components/bitrix/system.pagenavigation/FORTEST/
MAINER- название папки шаблона в моём случае.
FORTEST- название компонента в моём случае.
*не нужно писать их капсом, просто выделил для наглядности)
офкорс ваша вариация названий будет отличаться.
Если кому- либо поможет буду рад, если будут идеи как улучшить код и, что можно "упустить" - пишите, буду допиливать и учиться
P.S. по хорошему, скрипт можно/нужно вынести в отдельный файл и подгружать его моменте проверки на empty($_GET['PAGE_1'])
| Код |
|---|
<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
if (!$arResult["NavShowAlways"]) {
if ($arResult["NavRecordCount"] == 0 || ($arResult["NavPageCount"] == 1 && $arResult["NavShowAll"] == false))
return;
}
$strNavQueryString = ($arResult["NavQueryString"] != "" ? $arResult["NavQueryString"] . "&" : "");
$strNavQueryStringFull = ($arResult["NavQueryString"] != "" ? "?" . $arResult["NavQueryString"] : "");
?>
<sc ript src="https://code.jquery.com/jquery-1.10.2.js"></sc ript>
<!-- выполняем проверку по пагинации, empty ли 1 страница или нет, если да то выполняем скрипт-->
<?php if (empty($_GET['PAGEN_1'])): ?>
<sc ript>
var page;
var maxpage =<?=$arResult["NavPageCount"]?>; //берём из массива ArResult общее кол-во страниц. (варьируется в зависимости от того сколько элементов
//вы выводите в своём компоненте)
page = 1; //Общая картина вашего URL будет выглядеть так - http://your_site/?PAGEN_1=page где page номер страницы со следующим подгружаемым элементом.
$(window).scroll(function () {
var bottomOffset = 1200;
var data = $(this).serialize();
if ($(document).scrollTop() > ($(document).height() - bottomOffset) && !$('body').hasClass('loading')) {//стандартная проверка перед
//запуском основной функции.
$('body').addClass('loading');
if (maxpage > page) {
page++;
console.log('before scroll');
console.log(page);
BX.ajax( // аяковский запрос в Битриксе
{
url: "/?PAGEN_1=" + page, //URL к которому будем обращаться "http://вашсайт/?PAGEN_1=page"
method: 'POST',
dataType: 'html', //тип данных которые хотим получить
timeout: 0,
async: true,
processData: true,
scriptsRunFirst: false, //это важный момент,на каждой странице у вас вешается событие на ваши элементы к которым "прикручен" Эрмитаж,
//то есть на 1 странице у вас событие и скрипты только для тех элементов, что должны вывестись на 1 странице, на 2 - те, что
//для элементов 2 стр. и т.д.
//с помощью BX.ajax мы забираем сами элементы с нужной нам страницы, а так же скрипты и div bx-component-opener, false в данном
//случае нужен для того, чтобы
//полученные скрипты вешались только после получения и добавления на страницу нужных вам элементов вашего инфоблока или каталога,
//или, что вы выводите.
//если будет стоять true то событие не будет повешано, оно будет загруженно раньше чем вставится html код вашего элемента.
emulateOnload: false,
start: true,
cache: false,
onsuccess: function (result) {
if (result) {
console.log(page);
var pars = $($.parseHTML(result)).find(".masonry").html(); // парсим нужную нам html страницу, далее ищем в ней
//разметку(div в данном случае) с классом masonry
$('.masonry').append(pars); //вставляем в наш <div> полученные данные из инструкции pars.
//весь код, что ниже особого значения для вас не играет, он нужен был мне для подставки элементов в isotop-filtr
// и автоматической работе фильтра
// при добавлении элементов во время скролла.
var $container = $('.masonry');
var $newElems = $(data).css({opacity: 0});
$newElems.imagesLoaded(function () {
$newElems.animate({opacity: 0});
$(this).heightTrigger();
$('.img-trigger').each(function () {
$(this).imgTrigger();
});
selector = $('.selected').data('filter');
$container.isotope({filter: selector});
$container.isotope('destroy');
$container.isotope({
itemSelector: ".item",
transitionDuration: '0.8s',
hiddenStyle: {
opacity: 0
},
visibleStyle: {
opacity: 1
},
masonry: {
columnWidth: ".grid-sizer",
gutter: ".gutter-sizer",
},
filter: selector
});
});
}
console.log(page);
$('body').removeClass('loading');
}
});
}
}
});
var $optionSets = $('#filter'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function () {
var $this = $(this);
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('#filter');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
return false;
});
</sc ript>
<? endif; ?> |
