{ openzc:catelist }
catelist:产品分类调用,每个页面都可以使用
字段名称 | 说明 |
---|---|
[field:categories_id/] | 分类ID |
[field:categories_name/] | 分类名称 |
[field:categories_image/] | 分类代表图 |
[field:categories_description/] | 分类简介描述 |
[field:categories_link/] | 分类链接 |
[field:has_sub_cat/] | 是否有子分类 |
[field:count/] | 产品数量统计(包括子分类) |
[field:sort_index/] | 序号 |
[field:current_status/] | 当前栏目状态,如果是当前栏目的列表页则为1 |
参数名称 | 参数值 | 说明 |
---|---|---|
cid | ID|all(所有ID)|parent(上级分类)|current(当前分类) | 分类ID,多个ID用逗号隔开 |
type | top(当前分类顶级分类)|son(子分类) | 调用当前分类的顶级或子分类 |
row | 10 | 调用条数10 |
limit | 1,4 | 循环调用具体位置(1,4)代表调用第1条到第4条 |
① 调用多级分类
常用竖向、横向多级分类调用,这里演示三个级别调用,理论上级别不限
<!--
说明:cid="all"(遍历所有分类顶级分类) row="5"(调用条数5)
-->
<ul class="nav">
<li class="nav-item"> <a class="nav-link active" href="javascript:void(0);">Home</a> </li>
{openzc:catelist cid="all" row="5"}
<li class="nav-item">
{openzc:if $field['has_sub_cat']}
<a class="nav-link" href="[field:categories_link/]" data-toggle="dropdown">[field:categories_name/] <i data-feather="chevron-down" class="wd-15 ht-15"></i></a>
<div class="dropdown-menu ">
{openzc:loopson}
{openzc:if $field['has_sub_cat']}
<a class="nav-link" href="[field:categories_link/]" data-toggle="dropdown" id="droprightMenuButton" >[field:categories_name/] <i data-feather="chevron-right" class="wd-15 ht-15"></i></a>
<div class="dropdown-menu tx-14" aria-labelledby="droprightMenuButton" style="margin-left:153px">
{openzc:loopson}
<a href="[field:categories_link/]" class="dropdown-item">[field:categories_name/]</a> {/openzc:loopson}
</div>
{else}
<a href="[field:categories_link/]" class="dropdown-item">[field:categories_name/]</a>
{/openzc:if}
{/openzc:loopson}
</div>
{else}
<a class="nav-link" href="[field:categories_link/]">[field:categories_name/]</a>
{/openzc:if}
</li>
{/openzc:catelist}
</ul>
② 调用当前分类信息
调用当前分类的图片、描述以及子分类
Strategy
子分类
<div class="row">
<!-- 说明:cid="current"(当前分类) -->
<div class="col-sm">
<div class="card">
<div class="card-body">
{openzc:catelist cid="current"}
<h5 class="card-title" title="当前分类名称">[field:categories_name/]</h5>
<p class="card-text">
{openzc:if $field['categories_image']}<img class="d-flex" title="当前分类图片" src="[field:categories_image/]"/>{/openzc:if}
<span title="当前分类描述">[field:categories_description/]</span>
</p>
{/openzc:catelist}
</div>
</div>
</div>
<div class="col-sm">
<!-- 说明:cid="current"(当前分类) type="son"(子分类)-->
<div class="card">
<div class="card-body">
<h5 class="card-title">子分类</h5>
{openzc:catelist cid="current" type="son"}
<a href="[field:categories_link/]" class="badge badge-pill badge-primary">[field:categories_name/]</a>
{/openzc:catelist}
</div>
</div>
</div>
</div>
③ 调用指定ID分类信息
根据实际情况需要在指定位置调用指定ID分类导航
-
Hardware
We offer a variety of Hardware from printers to graphics cards and mice to keyboards. -
Printers
-
Action
Get into the action with our Action collection of DVD movies!
Don't miss the excitement and order your's today!
-
Hardware
-
Printers
没有子分类 -
Action
没有子分类
<div class="row">
<!-- 说明:cid="1,5,10"(用英文逗号隔开) -->
<div class="col-sm">
<ul class="list-group">
{openzc:catelist cid="1,5,10"}
<li class="list-group-item d-flex align-items-center">
{openzc:if $field['categories_image']}
<img src="[field:categories_image/]" class="wd-30 rounded-circle mg-r-15" alt="">
{/openzc:if}
<div>
<h6 class="tx-14 tx-dark tx-semibold mg-b-0">[field:categories_name/]</h6>
<span class="d-block tx-12 tx-color-04">[field:categories_description/]</span>
</div>
</li>
{/openzc:catelist}
</ul>
</div>
<div class="col-sm">
<!-- 说明:cid="1,5,10"(用英文逗号隔开) -->
<ul class="list-group">
{openzc:catelist cid="1,5,10"}
<li class="list-group-item d-flex align-items-center">
<h6 class="tx-14 tx-dark tx-semibold mg-b-0">[field:categories_name/]</h6>
<div class="p-3">
{openzc:if $field['has_sub_cat']}
{openzc:loopson}
<a href="[field:categories_link/]" class="badge badge-pill badge-primary">[field:categories_name/]</a>
{/openzc:loopson}
{else}
没有子分类
{/openzc:if}
</div>
</li>
{/openzc:catelist}
</ul>
</div>
</div>