listbar:产品列表排序,以及每页展示产品数量控制
Order By可调用字段 |
说明 |
[field:orderby_link/] | 排序链接 |
[field:orderby_name/] | 排序名称 |
[field:status/] | 当前选择的排序状态 |
Limit可调用字段 |
说明 |
[field:limit_link/] | 页面展示产品个数链接 |
[field:limit_name/] | 页面展示产品个数链接名称 |
[field:status/] | 当前选择的状态 |
参数名称 |
参数值 |
说明 |
item | orderby | limit | 列表排序 | 显示列表条数 |
flag | sell,price,viewed,name | 列表排序方式 |
start | 10 | limit起始显示列表条数 |
space | 5 | limit显示条数列表间隔跨度 |
① 当前分类列表调用,当前分类产品数量()
listbar 可以有两种方式展示:表单方式 & 链接方式
<!-- 说明:pagesize='12'(每页显示数量) imgsizer="190,245"(裁剪图片大小为:宽190px,高245px)
变量:$listCount(判断当前分类是否有产品)
-->
<div class="row mb-5">
{openzc:if $listCount>0}
<div class="tt-filters-options col-12">
<h1 class="tt-title">
{openzc:catelist cid="current"}
[field:categories_name/]<span class="tt-title-total">([field:count/])</span>
{/openzc:catelist}
</h1>
<div class="tt-sort">
<!-------------------表单式切换------------------->
<select class="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>
<select class="openzc-select" data-action="autoLink">
{openzc:listbar item="limit" start="10" space="10"}
<option value="[field:limit_link/]" {openzc:if $field['status']=='active'}selected=""{/openzc:if}>[field:limit_name/]</option>
{/openzc:listbar}
</select>
<!-------------------表单式切换------------------->
</div>
</div>
<div class="row col-12">
{openzc:list pagesize="12" imgsizer="205,256"}
<div class="col-6 col-md-3 col-lg-2 tt-col-item">
<div class="tt-product thumbprod-center">
<div class="tt-image-box">
<a href="#" class="tt-btn-quickview" data-toggle="modal" data-target="#ModalquickView" data-tooltip="Quick View" data-tposition="left"></a>
<a href="#" class="tt-btn-wishlist" data-tooltip="Add to Wishlist" data-tposition="left"></a>
<a href="#" class="tt-btn-compare" data-tooltip="Add to Compare" data-tposition="left"></a>
<a href="[field:products_link/]">
<span class="tt-img">
<img src="[field:products_image/]" data-src="[field:products_image/]" alt="" class="loaded" data-was-processed="true">
</span>
<span class="tt-img-roll-over">
<img src="[field:products_image_flip/]" data-src="[field:products_image_flip/]" alt="" class="loaded" data-was-processed="true">
</span>
</a>
</div>
<div class="tt-description">
<div class="tt-row">
<ul class="tt-add-info">
<li><a href="#">VENDER</a></li>
</ul>
<div class="tt-rating">
{openzc:rating star='<i class="icon-star"></i>' half='<i class="icon-star-half"></i>' empty='<i class="icon-star-empty"></i>'/}
</div>
</div>
<h2 class="tt-title"><a href="[field:products_link/]">[field:products_name/]</a></h2>
<div class="tt-price">[field:products_price/]</div>
<div class="tt-product-inside-hover" style="">
<div class="tt-row-btn">
<a href="#" class="tt-btn-addtocart thumbprod-button-bg" data-toggle="modal" data-target="#modalAddToCartProduct">ADD TO CART</a>
</div>
<div class="tt-row-btn">
<a href="#" class="tt-btn-quickview" data-toggle="modal" data-target="#ModalquickView"></a>
<a href="#" class="tt-btn-wishlist"></a>
<a href="#" class="tt-btn-compare"></a>
</div>
</div>
</div>
</div>
</div>
{/openzc:list}
{/openzc:if}
<!-------------------链接式切换------------------->
<div class="col-12 tx-right mg-t-20">
<div class="dropdown float-right ml-2">
<button class="btn btn-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Order By Default
</button>
<div class="dropdown-menu tx-14" aria-labelledby="dropdownMenuButton">
{openzc:listbar item="orderby" flag="sell,price,view,name"}
<a class="dropdown-item {openzc:if $field['status']=='active'}active{/openzc:if}" href="[field:orderby_link/]">[field:orderby_name/]</a>
{/openzc:listbar}
</div>
</div>
<div class="dropdown float-right">
<button class="btn btn-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default Show List
</button>
<div class="dropdown-menu tx-14" aria-labelledby="dropdownMenuButton">
{openzc:listbar item="limit" start="10" space="10"}
<a class="dropdown-item {openzc:if $field['status']=='active'}active{/openzc:if}" href="[field:limit_link/]">[field:limit_name/]</a>
{/openzc:listbar}
</div>
</div>
</div>
<!-------------------链接式切换------------------->
</div>
</div>
<!--分页调用--详细参考pagelist标签的使用教程-->
{openzc:if $listCount>0}
<nav aria-label="Page navigation example">
<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}