ecshop四级分类循环优化

最近一直早搞ecshop，越来越觉得ec一点都不人性化。而且那个库文件就是加大工作量的一个鸡肋。不过工作还是要做的！

在修改分类的时候，我发现ec默认只有2级分类循环，如果添加了3级或者4级分类的话，就无法显示了！经过大量的查找资料和实验，终于把ec的4级分类循环给做出来了！现在发布一个教程，方便下新手！

首先，我们找到ecshop模版目录下的/library/category_tree.lbi文件，然后我们把原始的内容给全部替换成以下文件

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript">
function expandIt(divId){
var objDiv = document.getElementById(divId);
var spobjDiv=document.getElementById("sp"+divId);
if (objDiv.style.display=="none"){
spobjDiv.src='/images/menu_minus.gif';
objDiv.style.display="block";
}else{
spobjDiv.src='/images/menu_plus.gif';
objDiv.style.display="none";
}}
</script>
<div class="mod1 mod2 blank" id="historybox">
<span class="lb"></span><span class="rb"></span>
<div class="cagegoryCon">
<h1 style="background:url(../images/cateBg.gif); height:27px; line-height:27px; padding-left:10px;"><a href="catalog.php"><font style=" font-size:14px;">{$lang.all_category}</font></a></h1>

<dl>
<!--{foreach from=$categories item=cat}-->
<dt>{if $cat.cat_id}<img src="/images/menu_plus.gif" id="spcattree{$cat.id}" onClick="expandIt('cattree{$cat.id}');" border=0>{/if}<a href="{$cat.url}">&nbsp;{$cat.name|escape:html}</a></dt>
<dd id="cattree{$cat.id}" style="display:none">
<!--{foreach from=$cat.cat_id item=child}-->
{if $child.cat_id}<p><img src="/images/menu_plus.gif" id="spcattree{$child.id}" onClick="expandIt('cattree{$child.id}');" border=0>{else}<p>{/if}<a href="{$child.url}" onfocus="this.blur()">&nbsp;{$child.name|escape:html}</a></p>
<ul id="cattree{$child.id}" style="display:none">
<!--{foreach from=$child.cat_id item=childe}-->
<li>&nbsp;&nbsp;&nbsp;&nbsp;{if $childe.cat_id}<img src="/images/menu_plus.gif" id="spcattree{$childe.id}" onClick="expandIt('cattree{$childe.id}');" border=0>{/if}<a href="{$childe.url}" onfocus="this.blur()">{$childe.name|escape:html}</a></li>
{if $childe.cat_id}<li id="cattree{$childe.id}" style="display:none">
<!--{foreach from=$childe.cat_id item=childer}-->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{$childer.url}" onfocus="this.blur()">{$childer.name|escape:html}</a></p>
<!--{/foreach}-->
</li>{/if}
<!--{/foreach}-->
</ul>
<!--{/foreach}-->
</dd>
<!--{/foreach}-->
</dl>
</div>
<div class="bottom"><span></span></div>
</div>

这个我就不一一解释了，使用了js可以收缩使分类更加方便了！然后打开模板目录下的style.css进行下美化加工

打开style.css查找

.cagegoryCon dl dt{
color:#C90C53; font-weight:bold; font-size:12px; margin-bottom:5px;
}

在其下面添加

.cagegoryCon dt a,.cagegoryCon dt a:visited{color:#FF9966; font-weight:bold;}
.cagegoryCon dl dd p a,.cagegoryCon dl dd p a:visited{color:#FC6; font-weight:bold;}
.cagegoryCon dl dd ul li a,.cagegoryCon dl dd ul li a:visited{color:#F99; font-weight:bold;}

这样就大功告成了！哦，对了，还有那个收缩的图片，点击下载记得把图片解压出来放到根目录的images文件夹哦！！！！