分类制作说明

首先我们来了解一个分类标签

  goodsCategoryTag

他返回一个分类的树型结构数组:[Category,...]

分类的属性为：

{
"name": "数码家电",
"url": "http://xxx.com/goods-list?catid=1",
"image":"http://www.xx.com/1.jpg",
"hasChildren":true,
children:[ Category,...]
}

• name: 分类的名称
• url :分类的连接
• image :分类的图片
• hasChildren:是否有子
• children :子分类数组

制作思路

1. 循环分类数组，根据hasChildren判读是否有子，以决定是否继续循环
2. 循环其children 来输出子
3. 组织样式及Javascript实现最终效果
4. 注：分类是放在缓存中的，在标签调用时，一次性由缓存中取出

示例

<div class="menu-items" id="cata-nav">
            <#list goodsCat.cat_tree as cat>
                <#if cat_index lt 7 >
                    <div class="menu-item">
                        <div class="item item-content">
                            <i style='background:url("${cat.image!''}") no-repeat center'></i>
                            <div class="menu-title">
                                <strong>
                                    <a href="${cat.url}" target="_blank">${cat.name}</a>
                                </strong>
                                <#if cat.hasChildren>
                                    <span>
                                        <#assign children2 = cat.children />
                                        <#list children2 as cat2>
                                            <#if cat2_index lt 2 >
                                                <a href="${cat.url}" target="_blank">${cat2.name} </a>
                                            </#if>
                                        </#list>
                                    </span>
                                </#if>
                            </div>
                        </div>
                        <div class="menu-items-layer" ectype="cateLayer" style="display: none;">
                            <div class="cate-layer-con clearfix">
                                <div class="cate-layer-left">

                                    <div class="cate_detail">
                                        <#if cat.hasChildren>
                                            <span>
                                                <#assign children2 = cat.children />
                                                <#list children2 as cat2>
                                                    <dl>
                                                        <dt><a href="${cat2.url}" target="_blank">${cat2.name}</a></dt>
                                                        <#if cat2.hasChildren >
                                                            <dd>
                                                                <#assign children3 = cat2.children />
                                                                <#list children3 as cat3>
                                                                    <a href="${cat3.url}" target="_blank">${cat3.name}</a>
                                                                </#list>
                                                            </dd>
                                                        </#if>
                                                    </dl>
                                                </#list>
                                            </span>
                                        </#if>
                                        <div class="item-brands">
                                            <ul>
                                            </ul>
                                        </div>
                                        <div class="item-promotions">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </#if>
            </#list>
        </div>