这篇文章主要是介绍如何在Magento侧栏包括首页侧栏显示产品分类的方法。在安装好Magento以后，一般除了在网站导航栏显示产品分类以外，我们常用的方法是直接在首页侧栏显示产品分类，这是很多Magento新手会遇到的一个比较棘手的问题。下面就详细介绍如何操作。
第一步，在app/design/frontend/base/default/template/catalog/navigation新建一个vert_nav.phtml in 如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="vertical-nav-container box base-mini"> <div class="vertical-nav"> <!--<div class="head">--> <!--<h4>--> <div class="block block-cart"> <div class="block-title"> <strong><span><?php echo $this->__('Categories') ?></span></strong> </div><!--End block block-cart--> <div class="block-content"> <!--</h4>--> <!--</div>--><!--End Of head--> <h4 class="no-display"> <?php echo $this->__('Category Navigation:') ?></h4> <ul id="nav_vert"> <?php foreach ($this->getStoreCategories() as $_category): ?> <?php echo $this->drawItem($_category) ?> <?php endforeach ?> </ul> </div> </div><!--End Of vertical-nav--> <?php echo $this->getChildHtml('topLeftLinks') ?> </div></div><!--End Of vertical-nav-container box base-mini--> |
第二步，修改你的app/design/frontend/default/modern/layout/catalog.xml文件，在合适位置插入以下代码，这个要根据自己的主题情况去修改：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- Category default layout --> <catalog_category_default translate="label"> <label>Catalog Category (Non-Anchor)</label> <reference name="root"> <action method="setTemplate"><template>page/2columns-left.phtml</template></action> </reference> <reference name="left"> <!-- <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>--> <block type="catalog/navigation" before="-" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml"/> </reference> |
第三步，修改相对应的CSS，在skin/frontend/default/modern/css/widgets.css，也可以直接把下面的CSS添加到你的skin.css文件内
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 |
/**********************************************Vertical Nav ****************************************/ #nav { float:left; margin-top:15px; margin-left:15px; font-size:1.1em; } /************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */ #nav li { position:relative;text-transform:uppercase; text-align:left; } #nav li.over { z-index:999; } #nav a, #nav a:hover { display:block; line-height:1.3em; text-decoration:none; } #nav span { display:block; cursor:pointer; white-space:nowrap; } #nav li ul span {white-space:normal; } /************ 0 LEVEL ***************/ #nav li { float:left; margin:1px 8px 11px 1px; padding:3px 8px; } #nav li.active a { color:#444; } #nav a { float:left; background:url(../images/nav_top_level_arrow.gif) no-repeat 100% 50%; padding-right:11px; color:#444; font-weight:bold; } #nav li.over a, #nav a:hover { color:#444; } #nav li.over, #nav li.active { margin:0 7px 10px 0; border:1px solid #bbb; background:#ececec; } /************ 1ST LEVEL ************/ #nav ul li, #nav ul li.active, #nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; } #nav ul li.parent { background:url(../images/nav_parent_arrow.gif) no-repeat 100% 50%; } #nav ul li.last { padding-bottom:0; } #nav ul li.active { margin:0; border:0; background:none; } #nav ul a, #nav ul a:hover { float:none; padding:0; background:none; } #nav ul li a { font-weight:normal !important; } /************ 2ND LEVEL ************/ #nav ul { position:absolute; width:15em; top:22px; left:-10000px; border:1px solid #bbb; border-bottom:2px solid #999; padding:3px 8px; background:#fcfcfc; font-size:11px; } /* Show menu */ #nav li.over > ul { left:-1px; } #nav li.over > ul li.over > ul { left:100px; } #nav li.over ul ul { left:-10000px; } #nav ul li a { padding:3px 0; color:#444 !important; } #nav ul li a:hover { padding:3px 0; color:#5a7f00 !important; } /************ 3RD+ LEVEL ************/ #nav ul ul { top:5px; } /**********************************************Vertical Nav ****************************************/ #nav_vert { padding:0 8px; font-size:1em; z-index:999; width:180px; background-color: #F6F6F6; } /************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */ #nav_vert li { width:200px; list-style:none; position:relative; text-align:left; background-color: #F6F6F6; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #nav_vert li.over { z-index:999; } #nav_vert li.active { z-index:999; } /* to prevent the li separator from showing through on mouseover on li */ #nav_vert a { line-height:1.3em; } #nav_vert a, #nav_vert a:hover { display:block; text-decoration:none; } #nav_vert span { display:block; cursor:pointer; color: #000; } /************ 1ST LEVEL ***************/ #nav_vert li { float:left; background:url(../images/nav_bg.gif) repeat-x 50%; height:30px; margin-right:1px; } #nav_vert li.active a { color:#4c6a16; } #nav_vert a { float:left; padding:5px 12px 6px 8px; color:#4c6a16; font-weight:bold; font-family:Trebuchet MS; font-size:13px;} #nav_vert li.over a, #nav_vert a:hover { color:#CCCCCC; } /************ 1ST LEVEL RESET ************/ #nav_vert ul li, #nav_vert ul li.active { float:none; height:auto; background:none; margin:0; } #nav_vert ul a, #nav_vert ul a:hover { float:none; padding:0; background:none; } #nav_vert ul li a { font-weight:normal !important; } /************ 2ND LEVEL ***********/ #nav_vert ul { position: absolute; width:200px; margin-left:180px; top:0px; left:-10000px; border:1px solid #666666; } /* Show menu */ #nav_vert li.over ul { left:0; } #nav_vert li.over ul ul { left:-10000px; } #nav_vert li.over ul li.over ul { left:0px; } #nav_vert ul li a { background:#FFFFFF/*#ecf3f6*/; } #nav_vert ul li a:hover { background: #F2F1D2; /*#d5e4eb;*/ } #nav_vert ul li a span { background:url(../images/nav_divider.gif) repeat-x 0 100%; } #nav_vert ul li a, #nav_vert ul li a:hover { color:#2f2f2f !important; } #nav_vert ul span, #nav_vert ul li.last li span { padding:6px 15px 6px 15px; } #nav_vert ul li.last span { background:none; } /************ 3RD+ LEVEL ************/ #nav_vert ul ul { top:5px;} #nav_vert ul ul ul { left:-10000px;} #nav_vert li.over ul li.over ul ul { left:-10000px;} #nav_vert li.over ul li.over ul li.over ul { left:100px; } /* Fix for the IE bug */ #nav_vert iframe { position: absolute; left: -1px; top: 0; z-index: -1; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); } |
第四步，如果想在首页显示产品分类，需要将app/design/frontend/base/default/template/catolog/navigation/top.phtml用以下内容替换：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package base_default * @copyright Copyright (c) 2009 Irubin Consulting Inc. DBA Varien (http://www.varien.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ ?> <?php /** * Top menu for store * * @see Mage_Catalog_Block_Navigation */ ?> <!--<?php $_menu = ''?> <?php foreach ($this->getStoreCategories() as $_category): ?> <?php $_menu .= $this->drawItem($_category) ?> <?php endforeach ?> <?php if ($_menu): ?> <div class="nav-container"> <ul id="nav"> <?php echo $_menu; ?> </ul> </div> <?php endif; ?>--> |
第五步：在Magento管理后台CMS»Pages»Home page»design,选择左栏或者右栏布局，然后插入以下代码：
|
1 2 3 4 |
<reference name="left"> <!-- <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>--> <block type="catalog/navigation" before="-" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml"/> </reference> |
这样再看看你的网站，是不是都可以了，然后在在Firefox或者Chrome的网页调试工具如firebug下对一些细节进行处理就OK了。