How to Add a Custom Catalog Page

Sometimes we need to add to our store a page with a list of products that are related by an attribute of given items instead of a category. This tutorial will show you how to easily add customized catalog pages.

As usual, we start with adding a module:

//app/etc/modules/Magently_CustomProductList.xml
<?xml version="1.0"?>
<config>
    <modules>
        <Magently_CustomProductList>
            <active>true</active>
            <codePool>local</codePool>
        </Magently_CustomProductList>
    </modules>
</config>

//app/code/local/Magently/CustomProductList/etc/config.xml
<?xml version="1.0"?>
<config>
    <modules>
        <Magently_CustomProductList>
            <version>1.0.0</version>
        </Magently_CustomProductList>
    </modules>

    <!-- we also add a router -->
    <frontend>
        <routers>
            <customproductlist>
                <use>standard</use>
                <args>
                    <module>Magently_CustomProductList</module>
                    <frontName>custom</frontName>
                </args>
            </customproductlist>
        </routers>
    </frontend>

    <!-- and layout -->
    <layout>
        <updates>
            <customproductlist>
                <file>CustomProductList.xml</file>
            </customproductlist>
        </updates>
    </layout>

</config>

Then, we add a controller:

//app/code/local/Magently/CustomProductList/IndexController.php
<?php

class Magently_CustomProductList_IndexController extends Mage_Core_Controller_Front_Action
{

    public function indexAction()
    {
        $this->loadLayout();
        $this->renderLayout();
    }

}

Now, we have a new page, so it’s time to think about the catalog with our own product list that we want to display there:

//app/design/frontend/base/default/layout/CustomProductList.xml
<?xml version="1.0"?>
<layout version="0.1.0">
    <customproductlist_index_index>
        <reference name="content">
            <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                <action method="setCollection">
                    <value helper="customproductlist/getCustomCollection"/>
                </action>
            </block>
        </reference>
    </customproductlist_index_index>
</layout>

As you can see, we’ve just pasted a product list block here. Additionally, we’re using the setCollection() method from Mage_Catalog_Block_Product_List, which will take the product collection returned by our getCustomCollection method from the helper as its parameter. Of course, here we can also set the page title or add some templates depending on what we want to achieve.

Then, we register our module’s helper:

//app/code/local/Magently/CustomProductList/etc/config.xml
<config>
    ...
    <global>
        <helpers>
            <customproductlist>
                <class>Magently_CustomProductList_Helper</class>
            </customproductlist>
        </helpers>
    </global>
</config>

Finally, we move on to creating our product collection. Let’s say that we want to display a list of products manufactured by Nike – in such case, the list will consist of products for which the value of the “manufacturer” attribute is 6, because that’s the ID for Nike in our test Magento installation.
This is not within the actual topic of our article, therefore, we assume that the reader knows how to take care of the above and we won’t focus on details here.

//app/code/local/Magently/CustomProductList/Helper/Data.php
<?php
class Magently_CustomProductList_Helper_Data extends Mage_Core_Helper_Abstract
{
    public function getCustomCollection()
    {
        $attr = 'manufacturer';
        $brand = 6;
        return Mage::getModel('catalog/product')->getCollection()->addAttributeToSelect(
            $attr)->addAttributeToFilter(
                    array(
                        array('attribute'=>$attr, 'eq'=>$brand)
                    )
                )->addAttributeToSelect(
                    array('price', 'name')
                );
    }
}

The result is the following:

The example we’ve given is very simple – we can create our filter based on various parameters or generate it dynamically on the basis of URL.