Jump to content

I did pagination but infinite scroll not working?

kkalgidim

By kkalgidim,
in Getting Started

 Share

Recommended Posts

kkalgidim Jr. Member

kkalgidim

Posted
Posted

Hi, i implemented pagination for my site : http://www.diana-homes.com

Now i want infinite scroll for home page. I did all the things according to https://infinite-scroll.com/ 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.js"></script>
<script type="text/javascript">
$('.deneme').infiniteScroll({
  // options
  path: '.pagination__next',
 // append: '.emlak',
  history: false,
});</script>

    <div class="deneme row prop-grid">
	
	<?php
	$results = $pages->find("template=property, limit=9, sort=-date");
	$pagination = $results->renderPager(array(
	  'linkMarkup' => "<a class='pagination__next' href='{url}'><span>{out}</span></a>"	));  

	echo $pagination;
	?>	
	
	 <?php foreach($results as $l) { ?>
        <div class="row-eq-height cf-xs-6 cf-sm-6 cf-lg-4 col-xs-6 col-sm-6 col-md-4  prop-i-col">
            <div class="prop-i">
                <a href="<?php echo $l->url;?>" class="prop-i-img">
                    <img src="<?php echo $l->images->eq(0)->url;?>" alt="">
                </a>...</div></div></div>

here is the code i used but when i try it nothing happens.  I think jquery not triggering.

Appricate for any help. You can inspect on my site: http://www.diana-homes.com

Link to comment
Share on other sites
kkalgidim Jr. Member

kkalgidim

Posted
  • Author
Posted

@Klenkes Thanx for your reply. I tried all variations but still not working.

I located jquery to top and infinitecroll script to bottom still same.

maybe its related with    path: '.pagination__next',

i removed standard pagination system now i am just echo the next page a href link with class="pagination__next"  but infnite scroll not working

 

Link to comment
Share on other sites
kkalgidim Jr. Member

kkalgidim

Posted
  • Author
Posted

I want to clarify my question.

according to infinity scroll example 

<body>
    <div id="element">
        <!-- render load.html -->
    </div>

    <!-- read JQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
    <!-- infinityScroll.min.js -->
    <script src="dist/infinityScroll.min.js"></script>
    <script>
        const config = {
                type : "html",
                data : "load.html",
                loadListClass : "is-load-list",
                renderInit : 2,
                scrollEndMessage : "read all contents!",
            }
        $('#element').infinityScroll(config)
    </script>
</body>

According to my processwire home.php 

<body>
<div id="deneme" class="container" >

<!-- PAGİNATİON SECTİON -->  
$limit = 9; // the "limit"-setting used on this page
$results = $pages->find("template=property, limit=9, sort=-date");
$totalpages = ceil($results->getTotal() / $limit);
// PAGINATOR: set SEO tags for Google
if ($input->pageNum) {
    if ($input->pageNum < $totalpages) {
    echo "<a class='pagination__next' rel='next' href='" . $page->url . $config->pageNumUrlPrefix . ($input->pageNum + 1) . "'>Next ";
    }
    else {
        echo "Thanks for browsing, you have reached the bottom of this page!";
    }
}
?>
<!--PAGINATION SECTION ENDS -->
 <div class="row prop-grid">

	 <?php foreach($results as $l) { ?>
        <div class="row-eq-height cf-xs-6 cf-sm-6 cf-lg-4 col-xs-6 col-sm-6 col-md-4  prop-i-col">
            <div class="prop-i">
                <a href="<?php echo $l->url;?>" class="prop-i-img">
                    <img src="<?php echo $l->images->eq(0)->url;?>" alt="">
                </a>
			</div>
         </div>
   	<?php } ?>
   </div>
  </div>

 

What should i do for  load.html section? i do not have another file to load content. its already foreach loop? will it be home.php? or template name (property) .  I confused 

<script>
        const config = {
                type : "php",
                data : "load.html",
                loadListClass : "prop-i-col",
                renderInit : 2,
                scrollEndMessage : "read all contents!",
            }
        $('#deneme').infinityScroll(config)
    </script>

 

Link to comment
Share on other sites
Jan Romero Hero Member

Jan Romero

Posted
Posted
6 hours ago, kkalgidim said: 
<script>
        const config = {
                type : "php",
                data : "load.html",
                loadListClass : "prop-i-col",
                renderInit : 2,
                scrollEndMessage : "read all contents!",
            }
        $('#deneme').infinityScroll(config)
    </script>

What you’re using there is not the infinite-scroll plugin you mentioned in your original post. It appears to be this bullshit whom I hope I’m not doing injustice when I assert it only pretends to do infinite scrolling and instead just loads everything at once. Typically ”infinite scroll“ means that you load only a couple of items and show them, then when the user has scrolled to the end, you load a couple more, scroll, load, scroll, load etc.

To do that you need three things:

  1. Your frontend page that loads displays the items
  2. An API that delivers the items, where “API” just means a page that uses pagination to know which items to return next
  3. A script on 1 that keeps track of which items to request from 2, which runs when the user has scrolled down, loads the items and puts them at the end

With a little Javascript it’s easy to write the script (3) yourself, but of course you can use infinite-scroll.com. The important bit is (2), I believe you don’t have that one yet? Here is the simplest way to implement that: 

<?php namespace Processwire;

$results = pages()->find("template=property, limit=9, sort=-date"); //for this to work the page’s template must use pagination (template settings)

foreach($results as $l) { ?>
    <div class="row-eq-height cf-xs-6 cf-sm-6 cf-lg-4 col-xs-6 col-sm-6 col-md-4  prop-i-col">
        <div class="prop-i">
            <a href="<?php echo $l->url;?>" class="prop-i-img">
                <img src="<?php echo $l->images->eq(0)->url;?>" alt="">
            </a>
		</div>
     </div>
<?php } ?>

Note that that would be the entire page. It only returns the items themselves, no <html> or <body> or anything, so that they can be inserted into the full page by the javascript. You need to make sure it behaves that way. Stuff you don’t want here may be added automatically if you use prepend/append files, for example.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...