Magento product list AJAX scroll

Category and search result pages revolve around product lists. Magento allows you to control the amount of products that your webshop shows. Magento even lets the customer decide how many products he or she wants to view at any given time.

From a server performance point of view, the more products you show by default, the more load will be put on your server. That is probably the main decision to not always show all possible products in a certain listing. Crawlers like Google bot will add to that load, even when there are no visitors.

As a result your customers, when just browsing products, will have to “click to the next page”. A customer however might not be inclined to keep clicking “Next”. Altough Magento has many nice navigation features, this may have a negative impact on your convergence! Users might just miss that one perfect product they were looking for because he or she never reached the second page.

A few weeks ago I stumbled upon Infinite Ajax Scroll created by Jeroen Fiege. This nice little jQuery plugin controls the “user click for pagination” by detecting when a user hits the bottom of a page. Inspired by a customer that had their “products per page” set to 300, I decided to apply this jQuery plugin to Magento.

Use AJAX to do Magento scrolling!
When applying it to Magento it allows your visitors to keep scrolling trough product listing without clicking, or doing anything else then scrolling. You can download the drop-in extension for Magento here, should work for Magento 1.4, 1.5, 1.6 and 1.7. Or you can check out the demo here It should work for all themes that are not to heavily modified. When no javascript is supported, the traditional Magento toolbar pagination is shown. When javascript is supported, the user just has to scroll to the bottom of the page to see more results.

Magento Ajax Scroll

Magento Ajax Scroll

Instructions for installing this extension in 10 easy do-it-yourself steps.
1. Download the zip (DUH!)
2. Extract it’s contents to the root of your Magento installation. You can use FTP to do that. It’s the directory containing index.php [App] [Skin] [Media] among others
3. Log in to your Magento backend
4. Go to System -> Cache Management, select all options, and in the action dropdown select “Refresh”. Then click Submit.
5. Log out/in to your backend
6. Go to System -> Configuration -> Catalog and drop down the “Front-end” selection
7. This extension adds a new option here; “Use jQuery Infinite Ajax Scroll”
8. Set “Use jQuery Infinite Ajax Scroll” to “Yes”
9. Click save config.
10. All done!

A few thing to note
First of all this extension uses and includes the jQuery library. It needs jQuery to function. Magento ships with Prototype which by default conflicts with jQuery. To solve this a “no conflict” file is included which makes sure jQuery and Prototype don’t start a fight in your browser. jQuery, being the more popular javascript library of the two, is often used in other Magento extensions. In fact you can find Magento extensions just to add jQuery to your Magento setup. If jQuery is allready present somewhere else copy the file app/design/frontend/base/default/layout/rapidcommerce-ias.xml to app/design/frontend/YOUPACKAGE/YOURTHEME/layout/rapidcommerce-ias.xml and remove all the “<action method="addJs"><script>ias/jquery-1.7.2.min.js</script></action>” and “<action method="addJs"><script>ias/jquery-noconflict.js</script></action>” lines. Alternatively use your local.xml layout update file to accomplish the same. It’s not a problem if you don’t, but this will avoid jQuery getting (down)loaded twice.

If you use a custom theme which does not adhere the default Magento “div-layout” or a custom toolbar, then you might want to change the jQuery selector paths used (which default to the way Magento’s base theme is build). You will find these in the app/design/frontend/base/default/templates/ajaxscroll/ias.phtml, so copy that file to app/design/frontend/YOUPACKAGE/YOURTHEME/templates/ajaxscroll/ias.phtml. If you don’t, you’ll find this extension does not work. And if you know what I’m talking about, you’ll know what to change reading the Infinite Ajax Scroll instructions.

Ajax scrolling is added to the catalog pages (anchor and non-anchor), search result pages (both advanced and simple) and the tag list page. If you have other extensions adding controllers that contain a product list you can add these using the layout update XML described above.

Gimme! Gimme!
Checkout the new version here.

Like this free extension?
Let us know, and like our Facebook page!

93 thoughts on “Magento product list AJAX scroll

  1. Great Post. Is there a way to apply this for custom modules?

    Also this plug-in is not working in IE7.

    Anyway its a great post…

    • Hi Kiran.

      Yes IE7 is not yet supported by the ais jQuery plugin. It supports all decent browser and IE8+ ;-). If I find some spare time I’ll get into that. BTW, in IE7 all will look normal to the user, like it would without this extension. So it’s not broken, just disabled in IE7.

      Regarding custom modules; yes offcourse. Just add the name of your custom modules’ controller to the layout file (rapidcommerce-ias.xml). Copy one of the sections there and change the name to that of your custom module. You’ll find that name in the layout.xml file that ships with your custom module.

      All modules that use the default Magento product list will work.

      Enjoy! If you need help let us know.

  2. Man, thanks! It works like a charm!!
    I have a question: in your demo, the products of the next pages are loaded very fast, in less than one second. Here in my store takes about 3-4 seconds. This difference is just because of the speed of the server?

    • Yes Paulo, I’m afraid so. The extension actually does nothing more then loading page 2. If the server takes a while to build page 2, the loading will take a while. It does not magically makes Magentos’ product listing faster.

      We are working on a series of articles about what to do to speed up Magento. Topics include; opcode caching, data caching (Magento’s fast and slow cache) and fullpage caching using Varnish in Magento CE. You should be able to make Magento fly using a cheap VM if your website does not has a huge amount of visitors. If you share your websites’ URL I can give you some pointers to start with?

      You can learn more about Varnish here; https://www.varnish-cache.org/about.

      Our demo store contains one of our extensions (RapidCommerce Performance) that makes optimal use of alle these caching techniques on top of what Magento does by it self. We will share a lite version for free soon. Stay tuned!

      • Hello Piter. Surely will keep up with new articles! I would rather tell you the URL of the store, however, is a second version of a store that is already in production, so I can not say publicly the URL yet. Is there another way for me to send? Email for example?

        About the module again, I realized something. As you scroll down the page, the URL will changing to “page / 1″, “page / 2″.OK. But if I copy the url, for example, on page 3 and paste in a new window, the module opens each page individually until you reach the third. It would be better if it was straight to the third, is not it? Is there any way to change this?

        Thanks again!

        • Hmm yes and no.

          If you use the hashtag construction, the script will scroll to page x. Like it should (and that’s what you want I take it),

          However if you leave out the hashtag indeed it won’t. BUT from a SEO perspective one should stop search engines indexing page X,Y,Z. A search engine should only index the first page of your categories (without a p= parameter). This way only people without javascript will ever reach such a p= page, and they won’t use the script anyway.

          You can prevent search engines from indexing these pages in two ways;
          1. Use a robots.txt file preventing bots requesting pages that have a p= in the request string. This will however rule out every URL that has p= in it.
          2. Modify the pager template and add rel=”nofollow” to the pagination links being generated by Magento.

          You should ask a SEO expert on which is best, as opionins seem to differ.

  3. Hello,
    I followed your instructions very carefully but i can not find the “Use jQuery Infinite Ajax Scroll” in the catalog configuration in the “Front-end” section.
    I cleaned the cache and refreshed all cache types, logout, login back.
    What do you suggest to me (i’m using magento 1.6.1.0).
    Thanks

    • Does the extension show up under System -> Configuration -> Advanced? It’s called RapidCommerce_Ias
      If it doesn’t;
      1. Are the files uploaded correctly? Starting at the root of your site (the one that contains index.php) does the file /app/etc/modules/RapidCommerce_Ias.xml exist?
      2. Do all the file have the correct file system permissions? They should be readable by the user that runs the webserver (apache f.e., or your username in shared environments).
      If it does;
      1. Did you log in / out?

  4. Pingback: Magento product list AJAX scroll v.1.1 | RapidCommerce Blog

  5. Hi Pieter,
    Could you help me with another question? Your Ajax module is working perfectly, but I realize that after loading the next pages, jQuery scripts that were applied on the first page, do not work on pages loaded via Ajax. How do I make jQuery work on all pages?

    • Hello Paulo,

      Yes, libraries like jQuery and Prototype take care of evaluating code in AJAX responses. However this script only adds some elements from the new page to the DOM.

      So first of all the events you would handle with jQuery(document).ready() won’t fire. Second of all stuff attached to element events with selectors won’t apply to the elements in the new pages etc. etc.

      To work around this, you can use the AIS onRenderComplete event. Copy the /frontend/base/default/templates/ajaxscroll/ias.phtml to /frontend/YOURPACKAGE/YOURTHEME/templates/ajaxscroll/ias.phtml.

      Then add “onRenderComplete: _onRenderComplete,” in the ias intitializer;
      jQuery.ias({

      onRenderComplete: _onRenderComplete,

      });

      The eventhandler takes one argument that contains all items added.
      function _onRenderComplete(items). That will allow you to apply javascript logic to the pages loaded via AIS. Attach eventhandlers in this function, or apply changes you make to elements here. It will be triggerd each time a new page is loaded. It’s not required to use the items collection in the parameter supplied, you can do something like; jQuery(‘.myclass’).each(function(index) without issue.

      Let me know if that helps!

  6. Hi Pieter,
    Thanks for your quick reply!
    I added onRenderComplete sucessfully like this:

    onRenderComplete: function() { jQuery(“.product-nome”).ellipsis(); }

    Now i realized that I have another problem. Im using this script (https://github.com/bigspotteddog/ScrollToFixed) to move the left column of Magento when the user scroll the page down.
    I managed to get it to work with Ajax adding the code

    onRenderComplete: function() { jQuery(“.product-nome”).ellipsis(); jQuery(‘.col-left’).scrollToFixed({ marginTop: 20, limit:jQuery(‘.footer-container’).offset().top – jQuery(‘.col-left’).outerHeight() – 10}); }

    But I realized that when it goes to next page, the column gives some strange jumps. Do you have some idea to fix it?

    PS: I think this “Scroll to fixed” script would be a great addition for your module.

    • Paulo,

      I agree! This plug-in would be great to allow the layerd navigation block to scrolldown along with the active view portion.

      Will start work on that soon (I hope within two weeks). I’ll send you an email when we make progress (in regard to the jumping issue you ran into).

      We try to release an extension or update once every month, like the recent update here; http://www.rapidcommerce.eu/blog/2012/06/magento-product-list-ajax-scroll-v-1-1/.

      This July however we planned a “Pay on pickup” payment extension, that allows you to conditionally show a payment method for cash payments on-site (some extensions to that purpose exist already, but all > 10EUR, for a few lines of simple code…).

      I’ll keep you posted, thanks for your suggestion!

  7. Ajax scroll wonn’t work on my homepage when I use to list my all product:
    {{block type=”catalog/product_list” name=”home.catalog.product.list” alias=”products_homepage” column_count=”4″ template=”catalog/product/list.phtml”}}

    On my category page all work.

    Any suggestion?

    • Hello Sukumar,

      That is probably due to the fact you bind your javascript to and event like ‘document.loaded’. Those events will not be triggered for each ‘new page’. Javascript will execute just fine, but make sure you use an event that is triggered, or put it ‘in-line’.

      Hope that helps,
      Pieter

  8. Hi for me the plugin works but always shows only the 2nd page again and again. I am guessing this is because the link to next page never changes, so it just uses the same link and so keeps loading products for the 2nd page. Any idea how to fix this? Thanks…

    • Hi Nick,

      Yes I think your explanation is plausible. Did you (or the design package you are using) modify the pager.phtml Magento template?
      Could you show me the URL to your site so I can have a look? I’ll point you in the right direction.

  9. hi, Whether this will work even in opencart.i am planning to move to opencart .Whether this will work.please let me know.if any other changes i need to do in order to work.

    Thanks,
    Praveen

    • Could be. The principle should be applicable. But we are a Magento only company, no experts in opencart around here, sorry!

  10. Hi,this plugin is great but unfortunately its working partially the infinite scroll loads the next page repeatedly . I guess some problem with my magento pagination can u guide me how the pagination should be.

  11. Hi Henk,I installed this Module in Magento 1.7.0.2 and I enable this Module in Admin Panel but doesn’t work in user panel.

    Kindly help. P.S I installed Masonry script.

    • Hi Deepak, I’m not Henk. I’m sure a lot of people in the Netherlands are called Henk, but not me. It’s Pieter.
      Could you elaborate on what you mean with “User panel”?

      • Hi Pieter,

        Thanks for your quick response.

        Apologies for the wrong name.

        I fixed the issues.

        It would be great if you guide me, how can display all the products in home page without using CMS(Home page).

        The product should be display with scrolling(Infinite scroll).

        Thanks in advance.:)

  12. Pingback: AJAX scroll voor Magento | WireITup Blog

  13. Hi All

    I have downloaded this module and it is working perfectly in default magento theme…But as i try to implement it in my template, paging stops working and ajax scrolling also does not work.

    Please guide me on this.
    Thanks in advance

  14. kida pieter your module was not supported pls help me to proper implementation your module your module run default page but not run my template page

  15. hello pieter i say that i install your ajax scroller module and implement my template but they could not work so pls guide me

  16. Hello pieter my problem is that in my magento theme i implement your ajax scroller module but your module was not working my theme my products pagination are still displayed javascripts are not supported what can i for do reply fast

  17. Hi Pieter,

    Really you’ve developed a great module that save my days. Thanks a lot !!!

    I’ve one concern that I don’t want to use endless scrolling. I just want want to use for contable product then I want toi use paggination as well. Can you please suggest me how to implement this with current module ?

    Thanks in advance :)

  18. Hi
    I have used your extension in default instance and it is working like a charm, but my requirement is use a ajax left navigation with price slider, so i used Magehouse_Slider-2.1.0 with your extension then it is creating conflict can you please help me to sort out this, i have not enough in Ajax. i have used your extension in another site , i must say this one is very awesome ,and you are really great that you are giving it for free and helping beginner level developer like me.

    Thanks again :-)

    • Hi Vikash,

      I have 2500+ pending spam messages, your comments are shown when approved…

      Like and contact us on our Facebook page if you need support!

    • Hi Hardik,

      This is not a script for lazy loading images like the one you are refering to.

      I do suggest making an extension of your work. Adjusting template files might seem easy but it is not a good way to integrate new features….
      Keep up the good work ;-).

      Cheerz.

  19. Hello,
    I have been using the ajax scroll on my website in magento 1.7.1 … for now i have disabled it.. however in product listing, some of my products are showing up twice though they have the same product id, same url and sku.. not sure why this is happening.. Please advice..

  20. Hello Pieter,

    Thank you for a such a nice extension. I am working on my site on localhost. Your extension in working perfectly on all category pages but i am facing problem to use it on my homepage. I have loaded all the css and js on my homepage somehow but the template file ias.phtml is not loading on my homepage. how can i achieve it. Will it work on homepage.

    Thank you in anticipation

  21. Hello Pieter

    I have installed your module and also activate it from admin
    but i cannot see any ajax action on my front end
    pls guide me that how can i make it working.
    also i am using paging in my paging .Do i have to remove paging to see ajax loader action in front page.

    Please suggest Me!!
    Thnks in advance .):

  22. Hello Pieter,
    In my product’s listing page I just want to show 5 products,at first,then by scrolling another 5 products,and like this upto end.Is it possible to do with this extension?
    please help. Thanks

  23. Hello Pieter

    I have installed your module and also activate it from admin
    but i cannot apend the next page product
    pls guide me that how can i make it working.

    Please suggest Me
    Thnks in advance !

  24. Hello Pieter,

    i installed your extension and it not works. Loading scroll try to download products but without success. Sure i think it’s a ajax compatibility problem. Can you send me some tips to try to fix this problem? if it will works sure i buy the commercial license.

    Best Regards

  25. I’m having trouble adding onRenderComplete to the ias intitializer to make our QuickShopping buttons function after page 2 loads. Do you have any suggestions? I read the other messages in this thread and I still can’t figure it out. I’m not very fluid with Javascript.

  26. Hello Pieter,

    Its work fine but the thing is i want only product data.

    when i scroll dwon it load products but when i checked in Firebug net->XHR-> Reponse getting header footer left navigation product data.

    I just want when user scroll get only product data. is it possible.

    Please suggest Me
    Thnks in advance !

  27. Hi Pieter,

    this extention is very good ,it work very well. i implemented it on my website, but i facing problem of repeat , Problem is repeat after first page.
    so please help me ,how in can resolve this problem of repeating.

    hope you would help me. its very urgent

  28. Hi Pieter,

    this extention is very good ,it work very well. i implemented it on my website, but i facing problem of repeat , Problem is repeat after first page.
    so please help me ,how in can resolve this problem of repeating.

    hope you would help me. its very urgent

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>