| Kopusha |
|
|---|---|
|
подключаем js плагин jquery.infinitescroll.js
if( $('.pagination__next').length ) // Если есть следующая страница в пагинации
{
//infiniteScroll in Folio
$container = $('.container-scrl');
$container.infiniteScroll({
// options
path: '.pagination__next',
append: '.post-scrl',
history: false,//не меняем урл при подгрузке что бы не путать пользователя
prefill: true,
scrollThreshold: 800,
//history: 'push', //прописывает в историю и титл стр текущую стр
//historyTitle: true,
//button: '.view-more-button',//пока кнопку убрал
});
//дело в том что на догруженных элементах могут быть свои js которые не включаться
//включить их надо после загрузки например как ниже
//это специфика для конкретного сайта, тебе это может и не нужно, но как принцип я оставил
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {//включаем нужные функции для вновьсозданных объектов
$('.files-list-grid .files-list-grid-wrapper').css("opacity", 0);
$('.stories-list-grid .stories-list-grid-wrapper').css("opacity", 0);
// set a timer to re-apply the plugin
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(collage, 200);
});
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {//включаем нужные функции для вновьсозданных бъектов
jQuery("[data-toggle=popover]").popover();
jQuery("[data-toggle=tooltip]").tooltip();
});
// просмотр историй без пагинации для гугланалитики
var link = document.createElement('a');
$container.on( 'append.infiniteScroll', function( event, response, path ) {
link.href = path;
ga( 'set', 'page', link.pathname );
ga( 'send', 'pageview' );
});
}
и сама TPL
<div class="container-scrl">
<!-- one story -->
<!-- BEGIN: PRD_ROWS -->
<!-- article -->
<article class="storiesart portstories-item post-scrl" itemprop="itemListElement" itemscope itemtype="http://schema.org/WebPage">
<!-- тут собственно сама запись -->
<!-- важно обратить внимание на класс post-scrl в теге article -->
</article>
<!-- article -->
<!-- END: PRD_ROWS -->
<!-- one story -->
</div>
<!-- PAGINATION -->
<!-- IF {PAGENAV_COUNT} > 1 -->
<a class="pagination__next" style="display: none" href="{PHP.sys.canonical_url}&d=2" title="Load more stories">Load more stories</a>
<!-- ENDIF -->
<!-- PAGINATION -->
<!-- важно обратить внимание что что если есть постраничное разбитие - то есть есть более 1 страницы - сработает js infiniteScroll jquery.infinitescroll.js -->
|
