Version 5.1.5

{ openzc:listbar }

listbar:产品列表排序,以及每页展示产品数量控制

Order By可调用字段 说明
[field:orderby_link/]排序链接
[field:orderby_name/]排序名称
[field:status/]当前选择的排序状态
Limit可调用字段 说明
[field:limit_link/]页面展示产品个数链接
[field:limit_name/]页面展示产品个数链接名称
[field:status/]当前选择的状态
参数名称 参数值 说明
itemorderby | limit列表排序 | 显示列表条数
flagsell,price,viewed,name列表排序方式
start10limit起始显示列表条数
space5limit显示条数列表间隔跨度
① 当前分类列表调用,当前分类产品数量(6)

listbar 可以有两种方式展示:表单方式 & 链接方式

Hardware(6)


           
<!-- 说明: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}