Category Archives: EnvatoTutsCode

Magento Theme Development: Category Page, Part 2

In the previous article on category pages, we edited the toolbar, grid and list layout. In this second article on customizing the category page, we’ll customize the sidebar and do some CSS fixes.

First of all, we’ll add some components in the sidebar, so that we can style them. Here, for the purpose of demonstration, we’ll just add one or two components and modify them. That’ll give you ample understanding of how you can modify the other sidebar components as well. 

For now we’ll just add ‘compare products’ and a sidebar banner to the sidebar. We’ll do that from the local.xml code. If you remember from the first articles of the series, you can find the local.xml file in the layout folder of your theme file.

We’ll add a reference to the left section, and then add a banner and compare product module in the sidebar, using the code below:

<reference name="left">
    <block type="catalog/navigation" name="left_categories_nav" before="-" template="catalog/navigation/left.phtml"/>
    <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
        <action method="setImgSrc"><src>images/banner-small-01.png</src></action>
        <action method="setImgAlt" translate="alt" module="catalog"><alt>Our customer service is available 24/7. Call us at (555) 555-0123.</alt></action>
        <action method="setLinkUrl"><url>checkout/cart</url></action>
    </block>
    <block type="catalog/product_compare_sidebar" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
</reference>

read more