Infinite Scroll On Custom Page Magento

Question

I am fetching custom products. I want to apply scroll on load product effect. When user scroll, more products shown. Any Idea.?

My Page

<?php

 $_productCollection=$this->getLoadedProductCollection();

$_productCollection = Mage::getResourceModel('catalog/product_collection')
->addAttributeToSelect('*')
->addFieldToFilter(array(array('attribute'=>'featured','eq'=>'1')));
$_productCollection->getSelect()->order('rand()');
$_productCollection->getSelect()->limit(20);

?>
  //loop for products
</div>
</div>

Answer 1

There are a number of things you'll need to do to create your own custom infinite scroll module. The code you've shown will only do one thing - fetch 20 products, at random, from the database.

Approach

The standard user will:

• Load a page and see the first string of results.
• Scroll to the bottom to see new results load in.
• New results load in and the page counter is increased while the number of results is <= the total results available.

Problem Solving

Here is the order of operations that will need to be encountered:

• Create an initial view-state. This may need to be page-aware for sharing and bookmarking purposes. That means pagination will need to be solved in the querystring most likely.
• Create a pagination mechanism. We've decided we'll do this via the querystring so why not yoursite.com/path/to/module/?page=1&limit=20. This would fetch items 21-40. This means we'll be able to fetch parts of the query. But you'll need a module with a controller to handle. That brings us to:
• Create a module with a controller and an action to fetch the results via API/JSON. Create this module as a Magento extension and return the results as if they were being called from AJAX, because, well, they will be. Which leads to...
• Create a frontend component for Catalog List pages to AJAX in results once you reach the bottom of the page. This is fairly easy but you'll need something as a UI hook - either an element that, when scrolled into view, kicks off the AJAX request; or at minimum a button that says "fetch the next 20 products".

Putting it together

We're not going to write all the code for you. You look fairly capable from the code snippet you provided. We believe in you! But the task you face is going to require skill from a lot of disciplines. In that case I'd make one recommendation - try to learn from a module that already exists. I prefer the module from Gabriel Somoza: https://github.com/Strategery-Inc/Magento-InfiniteScroll.

Hope this helped you think through it. Perhaps you can hit up community.magento.com for some more module recommendations or, when you have more concrete questions that can provoke canonical answers, we'd love to have you ask them here.