Как реализовать подргузку новых элементов в list (любой) бесконечно

Kopusha

#1 2022-04-16 07:01

подключаем 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="{PHP.sys.canonical_url}&d=2" title="Load more stories">Load more stories</a>
        <!-- ENDIF -->
<!-- PAGINATION -->   
<!-- важно обратить внимание что что если есть постраничное разбитие - то есть есть более 1 страницы - сработает js infiniteScroll jquery.infinitescroll.js -->

ed.moriarti	#2 2022-04-17 05:57
Members	А где он этот main.js я что-то не нашёл... и в какой TPL этот код прописывать нужно? В каждый list где есть пажинация?

Kopusha	#3 2022-04-17 07:45
Members Thanked: 87 times	это один из вариантов оформления - вся документация есть на 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',//пока кнопку убрал` `});` `читаем документацию и пробуем.` И да, в каждый лист где надо убрать пагинацию, само оно только в сказке.

Kopusha

#3 2022-04-17 07:45

Members
Thanked: 87 times

это один из вариантов оформления - вся документация есть на 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',//пока кнопку убрал
    });
 
читаем документацию и пробуем.
 
И да, в каждый лист где надо убрать пагинацию, само оно только в сказке.

ed.moriarti	#4 2022-04-17 09:41
Members	А это что значит? `itemtype="http://schema.org/WebPage">`

Kopusha	#5 2022-04-17 19:09
Members Thanked: 87 times	Вот еще раз попробую посоветовать