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!
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
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.
Checkout the new version here.
Like this free extension?
Let us know, and like our Facebook page!