商品展示內容頁

1、制作商品展示內容頁

內頁模板布局主要分三部分，頁頭/頁中/頁底。

頁面引用語法

1.1 引用頁頭模板header.html

{template 'header.html'}

1.2 頁中部分制作

商品展示內容頁其他調用項都與普通內容頁雷同，區(qū)別在于多出了商品信息和圖片輪播部分。

內容頁頁中調用可參考[ 查看 ]

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>//發(fā)布時間
</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 助您「輕松搭建」企業(yè)官網。