Expanding Left Hand Category Menu in Magento

The below code will create a menu that shows the siblings of an active category as well as showing its grandchildren. This will allow a user to jump between categories easily. Active classes are provided and the parent category is used to create a title. Again I am not a PHP developer so any bug fixes or tips are welcome.

Modify app/design/frontend/YOUR THEME/default/template/catalog/navigation/left.phtml to contain:

<?php $helper = $this->helper('catalog/category') ?>
<?php $categories = $this->getStoreCategories() ?>
<?php $categoriescount = $this->getStoreCategories()->count();?>
 
<div class="block block-layered-nav">
<?php 
//If there are any root categories
if ($categoriescount > 0): 
	foreach($categories as $category): 
		//Get sub categories 
		$subcategories = $category->getChildren();
		//Number of sub categories
		$subcategoriescount = $category->getChildren()->count(); 
		// Display active root category as block title only if there are sub categories
		if ($this->isCategoryActive($category) && $subcategoriescount > 0): 
?>
		<div class="block-title">
		<a href="<?php echo $helper->getCategoryUrl($category) ?>">
			<strong><span><?php echo $this->escapeHtml($category->getName()) ?></span></strong>
		</a>
		</div>
		<div class="block-content">
			<ul class="level1">
				<?php 
				//Build sub category menu
				foreach($subcategories as $subcategory): 
					//Get sub sub categories
					$subsubcategories = $subcategory->getChildren();
					//Number of sub sub categories
					$subsubcategoriescount = $subcategory->getChildren()->count();?>
 
					<li class="level1<?php if($subsubcategoriescount > 0): ?> parent<?php endif; ?>">
					<a href="<?php echo $helper->getCategoryUrl($subcategory) ?>" <?php if ($this->isCategoryActive($subcategory)): ?>class="active"<?php endif; ?>><?php echo $this->escapeHtml(trim($subcategory->getName(), '- ')) ?></a>
					<?php 
					//Display sub sub categories if sub category is active
					if ($this->isCategoryActive($subcategory) && $subsubcategoriescount > 0): 
					?>
						<ul class="level2">
							<?php foreach($subsubcategories as $subsubcategory): ?>
							<li class="level2">
								<a href="<?php echo $helper->getCategoryUrl($subsubcategory) ?>" <?php if ($this->isCategoryActive($subsubcategory)): ?>class="active"<?php endif; ?>><?php echo $this->escapeHtml(trim($subsubcategory->getName(), '- ')) ?></a>
							</li>
							<?php endforeach; ?>
						</ul>
					<?php endif; ?>
				</li>
				<?php endforeach; ?>
			</ul>
		</div>
		<?php endif; ?>
	<?php endforeach; ?>
<?php endif; ?>
</div>

See below for a quick wirefame mockup of how it should look:
nav

Comments

Be the first to write a comment about Expanding Left Hand Category Menu in Magento…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>