Magento product list AJAX scroll v2.0

Featured

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!

Magento product list AJAX scroll v1.1

Last month I posted an article describing our free Magento extension: Magento product list AJAX scroll. It enables your customers to view more products at less effort, hence having a positive influence on conversion. After some positive reactions to this extension we decided to enhance it with a new functionality; a scroll to top button.

More and more customers find us to optimize their Magento hosting infrastructure. This enables them to serve thousands of products in categories at lightning speed (< 100ms serverside response time). And this was what inspired us to apply AJAX scrolling in the first place. It however, does have a downside, in these very large product listings... After five minutes of downwards scrolling, the user might find himself lost from the essential navigational features Magento offers...

So after some time this visitor might decide to actually use one of Magento's navigational features, like the header menu, the layered navigation or the quick search widget. 99% of the Magento design packages out there will place these features at the top of the page. By now your visitor will start panicking, kicking and screaming out of pure frustration. The way to the top seems to long... The visitors' index finger, completely worn out by scrolling down, will now fail. Leaving the visitor with no other option then to sue you...

Hit the button and fly back up
To solve this the problem, a scroll to top button will now magically appear in this all new version. It will do so in the right bottom corner of the screen, after the visitor does some scrolling. Clicking the scroll to top button will return the pages’ focus back on to the start of the page. It will add a nice easing animation effect to the mix, giving your shop a classy look and feel. Check out the demo here. When you’re done, you can download the drop-in extension for Magento here, should work for Magento 1.4, 1.5, 1.6 and 1.7, taking into account the conditions described in the previous article.

Magento Scroll to top

Magento Scroll to top

Reinventing the (scroll)wheel is pointless, so to make this button appear we included the UItoTop jQuery Plugin. This nice little plug-in was created by Matias Varone . Again, like the Ajax Infinite Scroll plugin, this one requires jQuery (which is included in the extension). So the same story described in the previous post applies.

The same 10 step basic installation and upgrade instruction apply. To summarize once more;
1. Download the zip, version 1.1 (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. 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”
9. Click save config.
10. All done!

Gimme! Gimme!
Checkout the new version here.

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

Magento product list by SKU

So lets say you wrote an article somewhere in your Magento webshop. Using a CMS page or static block you added your content and now you want to add a selection of products to be displayed with your content.

Magento offers you the possibility, out-of-the-box, to add articles and a category and then display that list in a CMS contet block by inserting:

{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="4" template="catalog/product/list.phtml"}}

This however requires you to create a separate hidden category. So sometimes it would be easier if you could tell the list block exactly which products you want displayed. To do this we’ll create a small extension and overwrite the core Mage_Catalog_Block_Product_List block.

First step is to create a directory for our new extension, create these folders;

  • /app/code/local/MyCompany
  • /app/code/local/MyCompany/Bysku
  • /app/code/local/MyCompany/Bysku/etc
  • /app/code/local/MyCompany/Bysku/Block

Now that we have our directory structure it’s time to create a block that will extend the one that came with Magento.

Create the file /app/code/local/MyCompany/Bysku/Block/List.php and put this code in the file:

getSkus()) // Check is the user gave us the skus parameter containing products
 {
 $arrSkus = explode(',', $this->getSkus()); // Explode the comma seperated sku list to an array
 $collection = Mage::getModel('catalog/product')->getCollection(); // Start a new collection containing products
 $collection->addAttributeToSelect('*');     // Tell magento to load all the product attribute data, change this if you need just a subset of data in your template file
 $i = 0; $filters = array(); // Init some vars to add our filters
 foreach($arrSkus as $sku)
 $filters[$i++] = array('attribute'=>'sku','eq'=>$sku); // For each SKU add a filter that defines that the product will be selected is it's sku is in our array
 $collection->addFieldToFilter($filters); // Add the filter
 $this->setCollection($collection); // Set this collection to be the one we're using
 return $collection; // Return it
 } else {
 return parent::_getProductCollection(); // No skus parameter, just behaive like our base class would
 }
 }
}
?>

Now that we have defined our logic, it’s time to tell Magento to load our wonderful list extension. To do this, we need to create the file /app/code/local/MyCompany/Bysku/etc/config.xml and put this XML in the file:



 
 
 1.0.0
 
 
 
 
 
 MyCompany_Bysku_Block
 
 
 

After this, just reload your cache in the admin panel, System -> Cache managent -> Selected all -> Refresh. Then edit your CMS block and add this code:

{{block type="bysku/list" name="home.catalog.product.list" alias="products_homepage" skus="mysku1,mysku2,mysku3" template="catalog/product/list.phtml"}}

Now your content will have a nice list of dynamically loaded products by SKU… Enjoy!