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

My Page



$_productCollection = Mage::getResourceModel('catalog/product_collection')

  //loop for products
  • Hi Amir, what have you tried so far? This is a 3rd party module so there is probably a big chance most of us don't know the code. Have you any specific issues you're running into? Commented Jun 13, 2016 at 6:04
  • so how to create infinite scroll for custom page.?
    – Amir Iqbal
    Commented Jun 13, 2016 at 6:39
  • basically i am fetching products on custom page. so i want when user scroll down it load more products. any idea how to do this.? @SanderMangel
    – Amir Iqbal
    Commented Jun 13, 2016 at 6:48
  • yes but have you tried to make it work? Did you investigate what the module needs to activate. might it not be triggered because of a different layout handle etc Commented Jun 13, 2016 at 7:40
  • yes this module is for paged products i.e product list. so forgot about the said module.. how can i create my own. i am fetching products on custom page. so there any ajax call or something else.?
    – Amir Iqbal
    Commented Jun 13, 2016 at 7:49

1 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.


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.

  • 1
    i am trying....
    – Amir Iqbal
    Commented Jun 14, 2016 at 7:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.