Reputation: 98
I am trying to split up the 2-columns-left template on the category pages.
Right now it looks like this:
_________________________________
| | |
| | Page Title |
| | |
|(sidebar) | (main content) |
| | |
| | |
|__________|____________________|
I need the category name and description to move up over the left menu, and fill the width 100% like this:
_________________________________
| |
| Page Title |
|_______________________________|
| | |
|(sidebar) | (main content) |
| | |
| | |
|__________|____________________|
I cant figure out where to start. When I look in the XML it seems to not be a separate part that I can place elsewhere.
Upvotes: 3
Views: 5531
Reputation: 116
First update the catalog layout to use the single column template. Then copy the catalog.leftnav block into the category.products block.
<!-- {THEME_PATH}/design/layout/catalog.xml -->
<catalog_category_default translate="label">
<!-- Update the layout to use the single column template -->
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
<!-- Move the catalog navigation block into the category view block -->
<block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
</block>
</reference>
</catalog_category_default>
Once the catalog.leftnav block is a child of the category.products block, you can use the getChildHtml() method to display it in the category.products view template.
<!-- {THEME_PATH}/design/template/catalog/category/view.phtml -->
<div class="category-view">
<div class="page-header">
...
</div>
<div class="category-nav">
<?php echo $this->getChildHtml('catalog.leftnav'); ?>
</div>
<div class="category-content">
...
<?php echo $this->getProductListHtml(); ?>
...
</div>
</div>
Style to your liking. Hope that helps.
Upvotes: 3