{ openzc:filter }
filter:产品列表属性条件筛选,每个页面都可以使用
字段名称 | 说明 |
---|---|
[field:filter_item/] | 过滤项名称 |
[field:filter_name/] | 过滤条件值名称 |
[field:filter_link/] | 过滤条件链接 |
[field:filter_id/] | ID,偶尔会用到 |
[field:status/] | 状态 |
[field:symbol/] | 货币符号 |
[field:min/] | 当前产品分类的最小价格数值 |
[field:min/] | 当前产品分类的最大价格数值 |
[field:slide_min/] | 滑动后的最小价格数值 |
[field:slide_max/] | 滑动后的最大价格数值 |
参数名称 | 参数值 | 说明 |
---|---|---|
item | active|brand|price|attr|slideprice | 属性表单类型 |
options_id | 1,2,3 | 属性项ID,多个用‘,’隔开 |
mul | 1,4 | 不调用的属性项ID,多个用‘,’隔开 |
slide | true|false | "products_image"图片裁剪尺寸 |
field | symbol|min|max|slide_min|slide_max | "slideprice"字段调用 |
① 产品属性筛选功能
根据属性、价格、品牌筛选当前分类产品列表
$499.99
<!--
说明:item="brand,price,attr"(可自由指定要调用的过滤项目)
-->
<div class="mail-panel">
<div class="mail-sidebar pos-relative">
{openzc:if $filterStatus}
<button id="mailComposeBtn" class="btn btn-block btn-outline-secondary text-uppercase">Filtered By</button>
{openzc:filter item="active"}
<nav class="nav nav-classic flex-column mg-t-10 ">
{openzc:loopson}
<a href="[field:filter_link/]" class="nav-link tx-10"><i class="icon ion-close mr-2"></i> <span>[field:filter_name/]</span></a>
{/openzc:loopson}
</nav>
{/openzc:filter}
{/openzc:if}
{openzc:filter item="brand"}
<button id="mailComposeBtn" class="btn btn-block btn-outline-secondary text-uppercase">[field:filter_item/]</button>
<nav class="nav nav-classic flex-column mg-t-10 ">
{openzc:loopson}
<a href="[field:filter_link/]" class="nav-link {openzc:if $field['status']=='active'}active{/openzc:if} tx-10"> <span>[field:filter_name/]</span> <span class="badge">[field:filter_count/]</span></a>
{/openzc:loopson}
</nav>
{/openzc:filter}
<!--space="10" 价格区间跨度-->
{openzc:filter item="price" space="10"}
<button id="mailComposeBtn" class="btn btn-block btn-outline-secondary text-uppercase mg-t-20">[field:filter_item/]</button>
<nav class="nav nav-classic flex-column mg-t-10 ">
{openzc:loopson}
<a href="[field:filter_link/]" class="nav-link {openzc:if $field['status']=='active'}active{/openzc:if} tx-10"> <span>[field:filter_name/]</span> <span class="badge">[field:filter_count/]</span></a>
{/openzc:loopson}
</nav>
{/openzc:filter}
<!--options_id="all" all(该分类下的全部属性) 可以指定属性ID options_id="1,2,3"-->
{openzc:filter item="attr" options_id="all"}
<button id="mailComposeBtn" class="btn btn-block btn-outline-secondary text-uppercase mg-t-20">[field:filter_item/]</button>
<nav class="nav nav-classic flex-column mg-t-10 ">
{openzc:loopson}
<a href="[field:filter_link/]" class="nav-link {openzc:if $field['status']=='active'}active{/openzc:if} tx-10"> <span>[field:filter_name/]</span> <span class="badge">[field:filter_count/]</span></a>
{/openzc:loopson}
</nav>
{/openzc:filter}
</div>
<div id="mailBodyList" class="mail-body {openzc:if IS_MOBILE==false}pos-absolute t-0{/openzc:if}">
<div class="mail-body-content ht-auto">
<div class="mail-navbar">
<div class="align-items-center">
<!--自定义分页信息内容 详细参见 { openzc:pagelist } 使用教程-->
<h6 class="mail-from">{openzc:pagelist custom="text"/}</h6>
</div>
<!--产品列表排序和产品显示数量 详细参见 { openzc:listbar } 使用教程-->
<div {openzc:if IS_MOBILE}class="d-none"{/openzc:if}>
Order by :
<select class="custom-select wd-200 ml-2 mr-3 openzc-select" data-action="autoLink">
{openzc:listbar item="orderby" flag="sell,price,view,name"}
<option value="[field:orderby_link/]" {openzc:if $field['status']=="active"}selected=""{/openzc:if}>[field:orderby_name/]</option>
{/openzc:listbar}
</select>
Page Limit :
<select class="custom-select wd-200 ml-2 openzc-select" data-action="autoLink">
{openzc:listbar item="limit"}
<option value="[field:limit_link/]" {openzc:if $field['status']=="active"}selected=""{/openzc:if}>[field:limit_name/]</option>
{/openzc:listbar}
</select>
</div>
</div>
<div class="mail-msg ps ps--active-y">
<div class="row mg-b-20">
{openzc:if $listCount>0}
{openzc:list pagesize="12" imgsizer="190,245"}
<div class="col-6 col-md-3 col-lg-3 tx-center">
<div><img src="[field:products_image/]" style="max-width:100%"/></div>
<div><a class="tx-light tx-color-01 mg-b-0" href="[field:products_link/]">[field:products_name/]</a></div>
<span class="p-2">[field:products_price/]</span>
</div>
{/openzc:list}
</div>
{/openzc:if}
<!--分页调用--详细参考pagelist标签的使用教程-->
{openzc:if $listCount>0}
<nav aria-label="Page navigation example" class="mg-t-20 mg-b-20">
<ul class="pagination justify-content-center pagination-circle">
{openzc:pagelist listitem="prev,list,next" listsize="5"/}
</ul>
</nav>
{else}
<nav aria-label="Page navigation example">
<p class="pagination justify-content-center ">
The current category is empty.
</p>
</nav>
{/openzc:if}
</div>
</div>
</div>
</div>