cotonti.com : Как реализовать подргузку новых элементов в list (любой) бесконечно https://www.cotonti.com Последние сообщения в теме Cotonti en Sun, 18 Jan 2026 23:15:50 -0000 Kopusha Вот еще раз попробую посоветовать

]]>
вс, 17 апр 2022 19:09:33 -0000
ed.moriarti А это что значит?

itemtype="http://schema.org/WebPage">

]]>
вс, 17 апр 2022 09:41:50 -0000
Kopusha это один из вариантов оформления - вся документация есть на https://infinite-scroll.com/

1 Надо подключить js плагин infiniteScroll

2 всюду где надо подрузку в tpl дописать class
<div class="container-scrl"> в который мы обрамляем то что будет подгружать

<article class="post-scrl" элементы которые подгружаем в цикле

<a class="pagination__next" триггер по которому начинаем подгружать

3 надо инициализировать действие плагина кодом js

if( $('.pagination__next').length )         // Если есть следующая страница в пагинации
{
$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',//пока кнопку убрал
    });
 
читаем документацию и пробуем.
 
И да, в каждый лист где надо убрать пагинацию, само оно только в сказке.
 
]]>
вс, 17 апр 2022 07:45:55 -0000
ed.moriarti А где он этот main.js я что-то не нашёл...

и в какой TPL этот код прописывать нужно? В каждый list где есть пажинация?

]]>
вс, 17 апр 2022 05:57:10 -0000
Kopusha подключаем js плагин jquery.infinitescroll.js
дописываем такой код в свой main.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="https://www.cotonti.com/{PHP.sys.canonical_url}&d=2" title="Load more stories">Load more stories</a>
		<!-- ENDIF -->
<!-- PAGINATION -->	
<!-- важно обратить внимание что что если есть постраничное разбитие - то есть есть более 1 страницы - сработает js infiniteScroll jquery.infinitescroll.js -->

 

]]>
сб, 16 апр 2022 07:01:48 -0000