如何在Magento页面左边增加分类菜单

[topvip]

有很多的人都比较喜欢在页面的左侧栏添加Magento网站的产品分类菜单，那应该怎么样添加上去的呢？下面是在网上找到的一种方法，是三层架构的显示，如果样式不合适的话可以自己修改CSS。

步骤 I.编辑layout/catalog.xml
在<default>标签下，加入如下代码


<reference name="left">
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" />
</reference>
<reference name="left">
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" />
</reference>


步骤II. 在 template/catalog/navigation/目录下创建一个名为vert_nav.phtml 的文件,代码如下:


<div class="vertical-nav-container box base-mini">
<div id="vertical-nav">
<div class="head">
<h4><?php echo $this->__('Categories') ?></h4>
</div>
<ul id="nav_vert">
<?php foreach ($this->getStoreCategories() as $_categoryNode): ?>
<?php $open = $this->isCategoryActive($_categoryNode); ?>
<?php $hasChildren = $_categoryNode->hasChildren(); ?>
<li>
<a href="<?php echo $this->getCategoryUrl($_categoryNode); ?>"<?php if($open) { echo ' class="open"'; } ?><?php if($hasChildren) { echo ' class="potential"'; } ?> >
<?php if($hasChildren&&$open) { echo '- '; } elseif($hasChildren) { echo '+ '; }else{ echo ' '; }?><?php echo $_categoryNode->getName();?>
</a>
<?php if ($open && $hasChildren): ?>
<ul>
<?php foreach ($_categoryNode->getChildren() as $sonCategoryNode): ?>
<?php $subCat = Mage::getModel('catalog/category')->load($sonCategoryNode); ?>
<?php $open = $this->isCategoryActive($subCat); ?>
<?php $hasChildren = $subCat->hasChildren(); ?>
<li>
<a href="<?php echo $this->getCategoryUrl($subCat); ?>"<?php if($open) { echo ' class="subopen"'; } ?><?php if($hasChildren) { echo ' class="potential"'; } ?><?php if(!$hasChildren&&$open) { echo ' class="final"'; } ?> >
<?php if($hasChildren&&$open) { echo '- '; } elseif($hasChildren) { echo '+ '; }?><?php echo $subCat->getName(); ?>
</a>
<?php if ($open && $hasChildren): ?>
<ul>
<?php foreach ($sonCategoryNode->getChildren() as $grandsonCategoryNode): ?>
<?php $subsubCat = Mage::getModel('catalog/category')->load($grandsonCategoryNode); ?>
<?php $open = $this->isCategoryActive($subsubCat) ?>
<?php $hasChildren = $grandsonCategoryNode->hasChildren(); ?>
<li>
<a href="<?php echo $this->getCategoryUrl($subsubCat); ?>" <?php if($open) { echo ' class="final"'; } ?>>
<?php if($hasChildren) { echo '+ '; }?><?php echo $subsubCat->getName(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach ?>
</ul>
</div>
</div>
<div class="vertical-nav-container box base-mini">
<div id="vertical-nav">
<div class="head">
<h4><?php echo $this->__('Categories') ?></h4>
</div>
<ul id="nav_vert">
<?php foreach ($this->getStoreCategories() as $_categoryNode): ?>
<?php $open = $this->isCategoryActive($_categoryNode); ?>
<?php $hasChildren = $_categoryNode->hasChildren(); ?>
<li>
<a href="<?php echo $this->getCategoryUrl($_categoryNode); ?>"<?php if($open) { echo ' class="open"'; } ?><?php if($hasChildren) { echo ' class="potential"'; } ?> >
<?php if($hasChildren&&$open) { echo '- '; } elseif($hasChildren) { echo '+ '; }else{ echo ' '; }?><?php echo $_categoryNode->getName();?>
</a>
<?php if ($open && $hasChildren): ?>
<ul>
<?php foreach ($_categoryNode->getChildren() as $sonCategoryNode): ?>
<?php $subCat = Mage::getModel('catalog/category')->load($sonCategoryNode); ?>
<?php $open = $this->isCategoryActive($subCat); ?>
<?php $hasChildren = $subCat->hasChildren(); ?>
<li>
<a href="<?php echo $this->getCategoryUrl($subCat); ?>"<?php if($open) { echo ' class="subopen"'; } ?><?php if($hasChildren) { echo ' class="potential"'; } ?><?php if(!$hasChildren&&$open) { echo ' class="final"'; } ?> >
<?php if($hasChildren&&$open) { echo '- '; } elseif($hasChildren) { echo '+ '; }?><?php echo $subCat->getName(); ?>
</a>
<?php if ($open && $hasChildren): ?>
<ul>
<?php foreach ($sonCategoryNode->getChildren() as $grandsonCategoryNode): ?>
<?php $subsubCat = Mage::getModel('catalog/category')->load($grandsonCategoryNode); ?>
<?php $open = $this->isCategoryActive($subsubCat) ?>
<?php $hasChildren = $grandsonCategoryNode->hasChildren(); ?>
<li>
<a href="<?php echo $this->getCategoryUrl($subsubCat); ?>" <?php if($open) { echo ' class="final"'; } ?>>
<?php if($hasChildren) { echo '+ '; }?><?php echo $subsubCat->getName(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach ?>
</ul>
</div>
</div>


注意上面的代码$this->getStoreCategories()得到的不是Mage_Catalog_Model_Category类的实例，而是Varien_Data_Tree_Node类的实例

步骤III. 在添加到 skin/[yourinterface]/[yourtheme]/css/menu.css 文件里增加下面的代码


#vertical-nav ul {
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}

#vertical-nav ul li {
margin: 0;
padding: 0;
display:block;
margin-top: 1px; /* lines */
}

#vertical-nav ul ul li a,#vertical-nav ul li{
background-color: #FFFFFF;
}

#vertical-nav ul li a {
display: block;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
background-color: #CCCCCC;
}

#vertical-nav ul li .open, #vertical-nav .activesubsub, #vertical-nav .subopen {
font-weight: bolder;
text-decoration: underline;
color:#000000
}

#vertical-nav .final{
background-color:#ECECEC;
}

#vertical-nav ul ul li a {
margin-left: 20px;
}

#vertical-nav ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}

#vertical-nav a {
color:#999999;
}

#vertical-nav a:hover {
color:#666666;
}
#vertical-nav ul li ul li a {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
margin-bottom:0px;
margin-top:0px;
}

#vertical-nav ul li ul li {
margin-bottom:0px;
margin-top:0px;
}
#vertical-nav ul {
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}
#vertical-nav ul li {
margin: 0;
padding: 0;
display:block;
margin-top: 1px; /* lines */
}
#vertical-nav ul ul li a,#vertical-nav ul li{
background-color: #FFFFFF;
}
#vertical-nav ul li a {
display: block;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
background-color: #CCCCCC;
}
#vertical-nav ul li .open, #vertical-nav .activesubsub, #vertical-nav .subopen {
font-weight: bolder;
text-decoration: underline;
color:#000000
}
#vertical-nav .final{
background-color:#ECECEC;
}
#vertical-nav ul ul li a {
margin-left: 20px;
}
#vertical-nav ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}
#vertical-nav a {
color:#999999;
}
#vertical-nav a:hover {
color:#666666;
}
#vertical-nav ul li ul li a {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
margin-bottom:0px;
margin-top:0px;
}
#vertical-nav ul li ul li {
margin-bottom:0px;
margin-top:0px;
}