Mini Tutorial: How to Add a Category Landing Page in Magento

Here at Demac Media we see a lot of customization on our websites as all clients are different and have different needs. A common trend I’ve seen among a few large sites is the ability to have category landing pages. Essentially, a landing page allows customers who haven’t clued in to what specifically they’re looking for, or perhaps what deeper category the item they’re searching for exists in. I have developed landing pages in Magento which feature pictures of the products in these child categories as a way to help the potential customer. Here’s how it can be done, easily and simply.

First, let’s create the code that generates this landing page. In your custom theme for your site, create a new file called landing.phtml in app/design/frontend/default/your_theme/template/catalog/category. This will be the template file for our landing page. The first two lines will be:

<?php $_categories = $this->getCurrentChildCategories() ?>
<?php $_collectionSize = $_categories->count() ?>

Essentially, we’re using the built-in method for getting child categories of a parent category. We have access to this as we are later going to define the block type of this template as catalog/category – but we’ll get to this in a minute. The collection size just uses the built in count() method found within Magento product collections. The next lines will read:

<div>
<?php $i=0; foreach ($_categories as $_category): ?>
<?php
$layer = Mage::getSingleton(‘catalog/layer’);
$layer->setCurrentCategory(Mage::getModel(‘catalog/category’)->load($_category->getId()));
$helper     = Mage::helper(‘catalog/category’);
?>

The foreach is setup to loop through all of the child categories. The line defining the $layer variable and fetching the current category is necessary as we have more data about the current category in question – such as the category image. The remainder of the code is:

<div>
<?php $_img = $this->getCurrentCategory()->getImageUrl() ?>
<?php if($_img): ?>
<div>
<a href=”<?php echo $helper->getCategoryUrl($_category);?>”>
<img src=”<?php echo $_img?>” title=”<?php echo $_category->getName() ?>”/>
</a>
</div>
<?php endif; ?>
<div>
<a href=”<?php echo $_category->getURL() ?>” title=”<?php echo $this->htmlEscape($_category->getName()) ?>”>
<?php echo $this->htmlEscape($_category->getName()) ?>
</a>
</div>
</div>
<?php
$i++;
endforeach;
?>
</div>

The ‘additional rows’ class you can omit if you like – this was purely for my personal styling purposes. As well, in the category-name div you’ll see a check for string length – this is again my own check for styling. If the text is over 32 characters, I just make it smaller. As you can see, this just loops through the categories placing them on a grid.

Secondly, we must create the static block that Magento will use to display this template. Go into the Magento backend and click on CMS > Static Blocks and add a new static block. Call it ‘Category Landing Page’. The content of the static block is just going to tell Magento which template to use and what block it should be defined as:

{{block type=’catalog/navigation’ name=’categoryLandingPage’ template=’catalog/category/landing.phtml’}}

Save it and navigate to Catalog > Manage Categories.

Third, you decide on which categories are going to have category landing pages. I recommend the highest possible categories that you have, except for the Magento root category (the category that all of your main categories fall under.) One by one, click on these parent categories, click ‘Display Settings’ and choose ‘Static Block Only’. Then, for the static block choose the one you just created: ‘Category Landing Page’. Every category that you change like this will become a landing page.

Make sure to dump your cache, and now visit the parent category and see how it looks! Of course you will need to style these sections in CSS, but the skeleton should be there.

Click here to download all of layout.phtml.