Magento product list AJAX scroll v2.0

A year ago, I posted an article describing our free Magento extension: Magento product list AJAX scroll v1.1. It enables your customers to view more products at less effort, hence having a positive influence on conversion. One year, 160 wordpress comments, thousands of downloads and a lot of email messages have passed…

Shiny new features!
As stated, we are happy to turn your input into new functionality. Now the time has come make true on that promise. As you know the extension for Magento is just a kind of “wrapper” around the jQuery plugin Infinite Ajax Scroll created by Jeroen Fiege. He released a few new versions since, covering most feature requests we got from you.

These new features include;
1. Show a “Load more products” button after page X. This will enable the visitor to reach your page footer in large categories.
2. Disable the history feature which creates #page urls, so the browser’s back button functionality does not break. Hence enabling you to load all the pages without a “hashtag change”.
3. Enable Google Anyaltics support, keeping track when the user scrolls to new pages.
4. Loading the next page before the user reaches the bottom of the page.

Magento AJAX Scroll with load more products button

Load more products button

In addition we did some cleaning up;
1. You can now enable or disable the inclusion of jQuery. So now you can prevent jQuery loading twice, if it’s already used in some other Magento extension. Keep in mind that jQuery is required, one way or another!
2. The CSS and JS files for the scroll to top and ajax scroll functionality will only be included if you enable those features.
3. Translation files have been added for multilingual store setups. And a Dutch translation is present by default. Send us your translations, we will include them!

I Like, I want, give!
The magical 10 steps to make this work in your Magento shop?
1. Download the zip, version 2.0(DAH!)
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. The extension adds a new option here; “Use jQuery Infinite Ajax Scroll” and this new version adds the option “Use jQuery UItoTop”.
8. Set both “Use jQuery Infinite Ajax Scroll” and “Use jQuery UItoTop” to “Yes”. Enable the jQuery include option if you do not know what the hell I’m talking about or disable it if it’s already included elsewhere. You can also mess around with the settings that correspond with the new features mentioned above.
9. Click save config.
10. All done!

You can download the Magento Ajaxscroll Extension here. You can check out the demo here.

Like this free extension?
Let us know, and like our Facebook page! We will give you free support if you do!

19 thoughts on “Magento product list AJAX scroll v2.0

  1. Hello Pieter,
    It works for me with the default theme on 1.7 CE, but I can’t get it to work for a custom theme – it just doesen’t show up. Are there any additional steps required to set this up for a custom theme?

    • No, only if the custom theme overrides the pager in the toolbar. Contact us on facebook and we’ll point you in the right direction.

    • Hi Pieter
      Thanks for this great app, i am building a new store, and have a custom theme (Blanco) i have done what told to do, but it dont show up/ scroll the products!!
      could you point in what direction to solve this, might be helpfull to others too

      // Lars Thaning

  2. Hi Pieter,

    excellent extension.
    Is there a way to combine ajax-scroll with masonry library (masonryjs.com)?

    Thank you in advance

  3. Same error with Magento 1.9.1:

    TypeError: jQuery.ias is not a function
    jQuery.ias({

    If I enable “Merge JavaScript-Files” it works, but I get a hell of lot another errors. How can I fix it without this option?

  4. Hi Support,

    I need to show 9 products per page and 3 per row on Desktop version and On mobile to display 2 per row.

    Can you please help me about this.

    Thanks,
    Ashish

  5. I have noticed that if you go from Grid Mode to List Mode, it will work just fine. But once you keep it on List Mode and go to another page, it will stop working.

    This is the fix that resolves the issue: (update ias.phtml template file)

    // Get the default setting for grid or list mode
    $productListMode = $this->getDefaultCatalogListMode();
    if ($productListMode == ‘grid-list’)
    $productListMode = ‘grid';
    elseif ($productListMode == ‘list-grid’)
    $productListMode = ‘list';

    // Get the default setting for grid or list mode stored in session
    $mode = Mage::getSingleton(‘catalog/session’)->getDisplayMode();
    if ($mode == ‘grid’)
    $productListMode = ‘grid';
    elseif ($mode == ‘list’)
    $productListMode = ‘list';

    // Check if this setting is overwritten by the user
    if ($this->getCurrentListMode()) {
    if($this->getCurrentListMode() == ‘grid’)
    $productListMode = ‘grid';
    else
    $productListMode = ‘list';
    }

  6. Hello,

    I have already installed the previous version of this extension , now want to upgrade to this version , copied the files by deleting the previous one.

    Not reflecting in frontend or backend

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>