Custom top level category landing page in magento

0
votes

Within our magento site we have the root category for the shop (this is just "default category"). Under this we have set-up some top-level categories (let's for example call these "electronics" and "furniture"), with a bunch of sub categories.

So as an example our category structure might be

  • Electronics
    • DVD players
    • MP3 Players
    • Computers
  • Furniture
    • 3 Piece's
    • Armchairs
    • Tables
    • Sofabeds

I have managed to edit the layout/template for the "sub categories" such as "dvd players" so that we display a custom product list view.

Now what we want to do, is for the top level categories (the very first categories under the root category), is display a custom grid of all the subcategories and their associated thumbnail images, not the product list!

How do i assign a completely different template just for those top level categories?

If someone could provide an insight on how to do this and the step's we need to take (i should be ok with the code itself, its just how to implement it such as custom modules and templates)

Thanks

2
magentomagento-1.7

2 Answers

4
votes

Sounds like you want a custom page layout that you can apply to your top level categories. A page layout is essentially a named page template that you can select in a dropdown to apply to products or categories.

To define a layout, add it in the global/page/layouts node of a module's config.xml, like so:

<global>
    <page>
        <layouts>
            <my_custom_layout_name translate="label">
                <label>My Custom Layout</label>
                <template>page/my-custom-layout.phtml</template>
                <layout_handle>my_custom_layout</layout_handle>
            </my_custom_layout_name>
        <layouts>
    <page>
<global>

Then you just need to create the page/my-custom-layout.phtml template file somewhere in the app/design template fallback chain.

The layout_handle node specifies the name of a new layout handle that will be added to any page that uses this layout, allowing you to target it in layout XML files with a <my_custom_layout> node.

The .phtml file you're referencing will be the template for the entire HTML page, so it should include <html>, <head>, <body> tags and anything else you'd find in one of the default page/*.phtml templates (1column, empty, 2columns-left, etc). Between this and targeted layout XML, you can completely customize this page from scratch.

The final step is just to select this new layout under the "Custom Design" tab when editing each of your parent categories in Catalog->Manage Categories. If you don't see your layout in the dropdown, make sure your XML is configured properly (see app/code/core/Mage/Page/etc/config.xml for reference) and refresh your cache.

1
votes

One way to do this would be to create a new template which which will be your category grid, then call that template as a static block on your selected categories, which you will select via the CMS. See below.

Create the category grid template

  1. Navigate to “app/design/frontend/default/TEMPLATE/catalog/navigation”
  2. In this path, we will create a file call category_listing.phtml

  3. This file will have the following code:

    <?php $_maincategorylisting=$this->getCurrentCategory()?>
<?php $_categories=$this->getCurrentChildCategories()?>
<h2><?php echo $this->__('Browse Products') ?> </h2>
<div class="subcat-listing">
<ul class="subcat-products">
<? foreach ($_categories as $_category):?>
<? if($_category->getIsActive()): ?>
<?php $cur_category=Mage::getModel('catalog/category')->load($_category->getId()); ?>
<?php $layer = Mage::getSingleton('catalog/layer'); ?>
<?php $layer->setCurrentCategory($cur_category); ?>
<? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
<li> <a href="<?php echo $this->getCategoryUrl($_category) ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>">
<img src="<?php echo $_imageUrl ?>" width="auto" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />
</a>
<h3><?php echo $this->htmlEscape($_category->getName()) ?></h3>
<? if($_description=$this->getCurrentCategory()->getDescription()):?>
<p class="category-description">
<?php echo $_description ?></</p>
<?php endif; ?>
<? endif; ?>
<? endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php $layer->setCurrentCategory($_maincategorylisting); ?>

Call this template in a static block

  1. Go to the menu “CMS/Static block” and create new block.

  2. Add this to the content section of the CMS block:
    {{block type="catalog/navigation" name="catalog.categories" template="catalog/navigation/category_listing.phtml"}} . Then save the block.

Use this static block on category pages.

  1. Go to the menu Catalog/Manage Categories

  2. Now we need find the category that we want to show the new grid on

  3. Select the categorie that you want, and in the tab“DISPLAY SETTINGS we set the following information:

    DISPLAY MODE: STATIC BLOCK CMS Block: Category Listing (the block that we create before) Is Anchor: NO

  4. Click SAVE. Remember that in the tab “Custom Design” you may need select your template. Remember also that the category much have an image assigned to it.