// Blog

  • Oct

    Listing a custom product collection on your module’s front-end

    If you are writing or customizing your own module, you might want to show a list of products that have a particular attribute set to a specific value. For example, you may want to make a collection out of the products whose prices are 699.99 and display the collection on front-end. A typical solution would be pass the collection from the controller layer to the view layer, loop through the collection on the view layer and render each item (product) of the collection. Obviously, this solution would require coding and designing.

    As an alternative, Magento itself includes a product collection grid with some customizable features. The grid is the very same one used on category listing pages. When you navigate to a specific category, you will see a list of products in that category. You could choose whether to see the products in a grid or in a list view, specify the maximum products per page and sort the products according to a specific attribute (Name, Price, Position, etc.). You may take advantage of this built-in feature and avoid reinventing the wheel. This solution would be less time consuming and, yet, more powerful.

    During the course of this tutorial we will assume that our namespace is Irnux and our module name is Mymodule.

    To apply the solution to your module follow these steps:

    1. Declare $_productCollection protected variable in your Block class:

    File: app/code/local/Irnux/Mymodule/Block/Mymodule.php

    class Irnux_Mymodule_Block_Mymodule extends Mage_Catalog_Block_Product_List {
        protected $_productCollection;

    2. Define _getProductCollection() protected method in the same Block class:

    protected function _getProductCollection() {
        if (is_null($this->_productCollection)) {
            $collection = Mage::getModel(''catalog/product'')
                ->addAttributeToFilter(''price'', ''699.99'');
            $this->_productCollection = $collection;
        return parent::_getProductCollection();

    Above, $collection is the product collection that we intend to show on the front-end. In this case, we select all products whose prices are 699.99. You could select your product collection based upon your own criteria. After obtaining our product collection, the call to Mage::getModel(’‘catalog/layer’‘)->prepareProductCollection($collection) passes the collection to the appropriate layer for rendering. For your own purpose, just get the product collection of your need ($collection). The rest of the code must remain the same.

    3. Reference the block catalog/product/list.phtml in your layout:
    Open app/design/frontend/base/default/layout/mymodule.xml

    Under the appropriate action node (index_index in this case) add the following lines of code:

          <reference name=“content”>
            <block type=“mymodule/mymodule” name=“mymodule” template=“catalog/product/list.phtml”>
              <block type=“catalog/product_list_toolbar” name=“product_list_toolbar” template=“catalog/product/list/toolbar.phtml”>
                  <block type=“page/html_pager” name=“product_list_toolbar_pager” />
              <action method=“setColumnCount”><column_count>6</column_count></action>
              <action method=“setToolbarBlockName”><name>product_list_toolbar</name></action>
              <action method=“addColumnCountLayoutDepend”><layout>empty</layout><count>6</count></action>
              <action method=“addColumnCountLayoutDepend”><layout>one_column</layout><count>5</count></action>
              <action method=“addColumnCountLayoutDepend”><layout>two_columns_left</layout><count>4</count></action>
              <action method=“addColumnCountLayoutDepend”><layout>two_columns_right</layout><count>4</count></action>
              <action method=“addColumnCountLayoutDepend”><layout>three_columns</layout><count>3</count></action>
              <action method=“setToolbarBlockName”><name>product_list_toolbar</name></action>       

    As you can see, we are referencing catalog/product/list.phtml template file in our index/index action. The method setColumnCount determines the default number of products to be shown per page. You can change 6 to some other value. Also, addColumnCountLayoutDepend method specifies the number of products per page depending on the layout being used.

    That’‘s it. Now, you should see a list of products whose prices are 699.99 when you navigate to index/index action of your module.

comments powered by Disqus