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
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!
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!