I was given a design to implement into Magento yesterday, and I began on the product pages today. I quickly realized that the standard toolbar placement wasn’t going to work due to the design. The only way to make it work was to move it from catalog/product/list.phtml to catalog/category/view.phtml.
After playing around with the two templates, and with catalog.xml, I realized that there was more going on behind the scenes that would not allow an easy move. There are two problems that exist. First, you can’t just move the blocks in catalog.xml to be nested under view.phtml instead of list.phtml. It won’t load as a child. Second, the product collection is not yet loaded when Magento renders category/view.phtml, therefore, the toolbar can’t work (because it requires a knowledge of the products that it’s loading to work).
Thanks to a good friend of mine, Vinai, we came up with a solution that works, and is VERY easy to implement. It just takes two easy steps:
Remove the display of the toolbar from product/list.phtml. You probably don’t want the toolbar displaying twice above all the products. So, find the following code and comment it out:
<?php echo $this->getToolbarHtml() ?>
Add this code where you want the toolbar to be displayed in category/view.phtml:
<?php $toolbar = $this->getChild('product_list')->getToolbarBlock(); $toolbar->setCollection($this->getChild('product_list')->getLoadedProductCollection()); echo $toolbar->toHtml(); ?>
What is this code doing? Well, the toolbar block is loaded as a child to the list.phtml template block. The first line is calling the toolbar block as a child of the product_list and storing it as $toolbar. On the second line, the $toolbar object is being fed the proper product collection, again called by the child of product_list. Then, you simply display the $toolbar object using it’s toHtml() method.
It’s not exactly one of those easy-to-figure-out kind of things, but – it is very easy to implement. So, hopefully you find this as useful as I have!