商品展示内容页

1、制作商品展示内容页

内页模板布局主要分三部分，页头/页中/页底。

页面引用语法

1.1 引用页头模板header.html

{template 'header.html'}

1.2 页中部分制作

商品展示内容页其他调用项都与普通内容页雷同，区别在于多出了商品信息和图片轮播部分。

内容页页中调用可参考[ 查看 ]

1.3 引用页底模板footer.html

{template 'footer.html'}

2、内页多图轮播

2.1 商品信息列表

<table>
{if $archive['attr2']}//判断是否填写了价格
<tr>
<th>{lang('price')}：</th>
<td>{lang('unit')}<strong>{$archive['attr2']}</strong></td>//商品价格
</tr>
{if $archive['attr2']==$archive['oldprice']}//判断是否设置了会员组折扣
{else}
<tr>
<th>{lang('list_price')}：</th>
<td>{lang('unit')}<strong style="text-decoration:line-through;">{$archive['oldprice']}</strong></td>//原价
</tr>
<tr>
<th>{lang('discount')}：</th>
<td>{lang('unit')}<strong>{jsPrice($archive['aid'])}</span></td>//折扣价
</tr>
{/if}
{/if}
</table>
</div>
<div>
<table>
{if config::get('isecoding')=='1'}//判断是否生成防伪码
<tr>
<th>{lang('ecoding')}：</th>
<td>{if $archive['ecoding']}{$archive['ecoding']}{else}{lang('not')}{/if}</td>//防伪码
</tr>
{/if}
<tr>
<th>{lang('adddate')}：</th>
<td>{$archive['adddate']}</td>//发布时间
</tr>
<tr>
<th>{lang('strgrades')}：</th>
<td>{$archive['strgrade']}</td>//内容评级
</tr>
</table>
</div>
{if $archive['attr2']}//判断是否填写价格，填写则显示购买和购物车按钮
<p class="blank30"></p>
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a target="_blank" href="{url('archive/orders/aid/'.$archive['aid'],true)}">{lang('buy')} <span class="badge">Buy</span></a></li>//购买按钮
<li role="presentation" class="active"><a href="{url('archive/doorders/aid/'.$archive['aid'],true)}" id="dialog_link" data-toggle="modal" data-target=".bs-example-modal-lg-shopping" aria-hidden="true">{lang('makeorders')} <span class="badge">Shopping Cart</span></a></li>//购物车按钮
</ul>
<p class="blank30"></p>
{/if}

2.2 商品图片轮播代码

<link href="{$skin_path}/js/lightgallery/css/lightgallery.css" rel="stylesheet">
<div id="carousel-example-generic" class="carousel slide section clearfix" data-ride="carousel" style="max-height:700px; margin-top:10px; overflow:hidden;">
<!-- 大图切换 -->
<div class="carousel-inner demo-gallerylist-unstyled row" id="lightgallery" role="listbox">
{loop $archive['pics'] $i $pic}
<div class="item img-auto{if $i==1} active{/if}" data-src="{$pic['url']}" data-sub-html="{$pic['alt']}">
<a href="" rel="lightbox['roadtrip']"><img src="{$pic['url']}" alt="{$pic['alt']}" class="img-responsive" onerror='this.src="{config::get('onerror_pic')}"' /></a>
</div>
{/loop}
</div>
<!-- 左右按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

商品轮播必须加载js调用：

<script src="{$skin_path}/js/lightgallery/js/lightgallery.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-pager.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-fullscreen.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-zoom.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-hash.min.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>

用 CmsEasy 助您「轻松搭建」企业官网。