商品詳情頁(goods.dwt)的下半部有商品描述、商品屬性、超值組合、商品標記 、購買記錄、商品評論、相同外觀樣式的商品、相關商品、瀏覽歷史,為了讓頁面不至於過長,因此使用TAB的方式,但是TAB在超小螢幕時,還是可能受寬度限制,因此配合下拉選單,使用 hidden-xs 可以讓元素在超小營幕時隱藏,visible-xs 則相反,效果如圖:


給 TAG 表單加上 class="form-inline" 可以讓包在 class="form-group" 裡的元素顯示在同一行(需要給元素指定寬度為 auto),如要自訂元素寬度請加 pull-left,如下列的 name="tag",class="btn btn-xxxxx" 可以為 button, input, a 等標籤產生按鈕外觀,btn-xs 為小型按鈕,btn-lg 為大型按鈕,不指定則預設為中型按鈕,所有設置了 class="form-control" 的 input、textarea 和 select 元素都將被預設寬度屬性為 width: 100%;

評論表單程式碼分為列表、分頁與表單三部份,其中列表與表單部份都使用表格方便排版,列表加上 table-striped 可以有隔行變色的效果。如果你希望表格具有響應式效果,只需將表包裹在 class="table-responsive" 的 DIV 裡就行了,如果你的PHP版本大於5.2,可能產生驗證碼不顯示或表單無法提交的問題,需要特別留意,如果問題無法解決,請到 VIP 室發問:


瀏覽歷史與商品分類頁共用,但因寬度不同因此需要用 {$pname} 與 CSS3 的媒體查詢『@media screen and (){...}』來判斷並指定寬度,商品名稱的字數控制在 includes/lib_insert.php 裡的 insert_history() 函數





<div class=""> <ul id="gtabs" class="nav nav-tabs" role="tablist"> <!-- {if $goods.goods_desc} 描述--> <li role="presentation" class="active"> <a href="#goods_desc" id="goods_desc-tab" role="tab" data-toggle="tab" aria-controls="goods_desc" aria-expanded="false" title="商品描述"> <i class="fa fa-share-alt"></i> 描述 </a> </li> <!-- {/if} --> <!-- {if $properties} 商品屬性--> ..................略......................... <!-- {/if} --> <!-- {if $package_list} 超值組合--> ..................略......................... <!-- {/if} --> ..................略......................... <!--購買記錄 {if $notes} --> ..................略......................... <!-- {/if} --> <!-- 商品評論 --> ..................略......................... <!-- {if $linked.goods} --> ..................略......................... <!-- {/if} --> <!--相關商品 {if $related_goods} --> ..................略......................... <!-- {/if} --> ..................略......................... <!-- 下拉選單 --> <li role="presentation" class="dropdown visible-xs"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false"><i class="fa fa-list-ul"></i> 更多...<span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> <!-- {if $properties} 商品屬性--> <li> <a href="#properties" id="properties-tab" role="tab" data-toggle="tab" aria-controls="properties" aria-expanded="false" title="商品屬性"> <i class="fa fa-asterisk"></i> 屬性 </a> </li> <!-- {/if} --> <!-- {if $package_list} 超值組合--> ..................略......................... <!-- {/if} --> ..................略......................... <!--購買記錄 {if $notes} --> ..................略......................... <!-- {/if} --> <!-- 商品評論 --> ..................略......................... <!-- {if $linked.goods} --> ..................略......................... <!-- {/if} --> <!--相關商品 {if $related_goods} --> ..................略......................... <!-- {/if} --> ..................略......................... </ul> </li> </ul> </div> <div id="tabContent" class="tab-content"> <div role="tabpanel" class="tab-pane fade" id="goods_desc" aria-labelledby="goods_desc-tab"> {$goods.goods_desc} </div> <!-- 商品屬性 --> <div role="tabpanel" class="tab-pane fade" id="properties" aria-labelledby="properties-tab"> {include file='library/properties.lbi'} </div> <!-- 超值組合 --> <div role="tabpanel" class="tab-pane fade" id="package" aria-labelledby="package-tab"> {include file='library/package_goods.lbi'} </div> <!-- 商品標記 --> <div role="tabpanel" class="tab-pane fade active in" id="gtags" aria-labelledby="gtags-tab"> {include file='library/goods_tags.lbi'} </div> <!--購買記錄 --> <div role="tabpanel" class="tab-pane fade" id="bought_note_guide" aria-labelledby="bought_note_guide-tab"> {include file='library/bought_note_guide.lbi'} </div> <!-- 商品評論 --> <div role="tabpanel" class="tab-pane fade" id="comments" aria-labelledby="comments-tab"> {include file='library/comments.lbi'} </div> <!--相同外觀樣式的商品 --> <div role="tabpanel" class="tab-pane fade" id="attrlinked" aria-labelledby="attrlinked-tab"> {include file='library/attrlinked.lbi'} </div> <!--相關商品 --> <div role="tabpanel" class="tab-pane fade" id="related" aria-labelledby="related-tab"> {include file='library/related.lbi'} </div> <!--瀏覽歷史 --> <div role="tabpanel" class="tab-pane fade" id="history" aria-labelledby="history-tab"> {include file='library/history.lbi'} </div> </div>


給 TAG 表單加上 class="form-inline" 可以讓包在 class="form-group" 裡的元素顯示在同一行(需要給元素指定寬度為 auto),如要自訂元素寬度請加 pull-left,如下列的 name="tag",class="btn btn-xxxxx" 可以為 button, input, a 等標籤產生按鈕外觀,btn-xs 為小型按鈕,btn-lg 為大型按鈕,不指定則預設為中型按鈕,所有設置了 class="form-control" 的 input、textarea 和 select 元素都將被預設寬度屬性為 width: 100%;
<style type="text/css"> #ECS_TAGS .btn-xs {margin: 5px;} </style> <div id="" class="TabPage"> <form name="tagForm" onsubmit="return submitTag(this)" class="form-inline"> <div id="ECS_TAGS"> {$lang.goods_tag}: <!-- 標記{foreach from=$tags item=tag}--> <a href="search.php?keywords={$tag.tag_words|escape:url}" class="btn btn-info btn-xs">{$tag.tag_words|escape:html} (<strong>{$tag.tag_count}</strong>)</a> <!-- 結束標記{/foreach} --> </div> <div class="form-group"> <input type="text" name="tag" id="tag" class="form-control pull-left" placeholder="請輸入標籤名稱" style="width: 210px;margin-right: 6px;" /> <button name="submit" type="submit" class="btn btn-danger">增加標籤</button> <input type="hidden" name="goods_id" value="{$goods.goods_id}" /> </div> </form> </div>

評論表單程式碼分為列表、分頁與表單三部份,其中列表與表單部份都使用表格方便排版,列表加上 table-striped 可以有隔行變色的效果。如果你希望表格具有響應式效果,只需將表包裹在 class="table-responsive" 的 DIV 裡就行了,如果你的PHP版本大於5.2,可能產生驗證碼不顯示或表單無法提交的問題,需要特別留意,如果問題無法解決,請到 VIP 室發問:
<table class="table table-hover table-striped"> <tbody> <!--{foreach from=$comments item=comment}--> <tr> <td><i class="fa fa-user"></i> <!-- {if $comment.username} -->{$comment.username|escape:html} <!-- {else} --> {$lang.anonymous} <!-- {/if} --> </td> <td align="right"> <img src="../images/stars{$comment.rank}.gif" width="64" height="12" alt="{$comment.comment_rank}" /> <i class="fa fa-clock-o"></i> {$comment.add_time} </td> </tr> <tr> <td colspan="2" > <i class="fa fa-commenting pull-left"></i>{$comment.content} <!--{if $comment.re_content} 回覆--> <div class="bs-callout bs-callout-danger"> <h4> <i class="fa fa-clock-o"></i> {$comment.re_add_time} <i class="fa fa-pencil-square"></i> {$lang.admin_username} {$comment.re_username|escape:html} 回覆 </h4> <p>{$comment.re_content}</p> </div> <!--{/if}--> </td> </tr> <!--{foreachelse}--> <tr> <td colspan="2" class="text-center"> <h3 class="text-danger"> {$lang.no_comments} </h3> </td> </tr> <!--{/foreach}--> </tbody> </table> <!-- {if $comments} 分頁--> <div id="pager"> <i class="fa fa-pagelines"></i> {$lang.pager_1}{$pager.record_count}{$lang.pager_2}{$lang.pager_3}{$pager.page_count}{$lang.pager_4} <span> <a href="{$pager.page_first}">{$lang.page_first}</a> <a href="{$pager.page_prev}">{$lang.page_prev}</a> <a href="{$pager.page_next}">{$lang.page_next}</a> <a href="{$pager.page_last}">{$lang.page_last}</a> </span> </div> <!-- {/if} --> <!-- 評論表單 --> <div class="commentsList"> <style type="text/css"> #pager {line-height: 28px;text-align: right;background: #e3e3e3;border-radius: 5px;margin: 8px 0;} .comment_table th {min-width: 75px;max-width: 120px;text-align: left;} .comment_table .col-xs-6 {padding: 0;} </style> <form action="javascript:;" onsubmit="submitComment(this)" method="post" name="commentForm" id="commentForm" class="form"> <table class="table comment_table"> <tr class="text-left"> <th><i class="fa fa-user"></i> 帳號:</th> <td><!--{if $smarty.session.user_name}-->{$smarty.session.user_name}<!--{else}-->{$lang.anonymous}<!--{/if}--></td> </tr> <tr> <th><i class="fa fa-envelope-o hidden-xs"></i> {$lang.email}</th> <td><input name="email" type="text" id="email" class="form-control" placeholder="請輸入電子信箱" required="required" value="{$smarty.session.email|escape}" style="max-width: 500px;" /></td> </tr> <tr> <th><i class="fa fa-star hidden-xs"></i> {$lang.comment_rank}</th> <td> <div class="col-xs-6 col-sm-2 col-md-2"> <input name="comment_rank" type="radio" value="1" id="comment_rank1" /> <img src="../images/stars1.gif" /> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input name="comment_rank" type="radio" value="2" id="comment_rank2" /> <img src="../images/stars2.gif" /> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input name="comment_rank" type="radio" value="3" id="comment_rank3" /> <img src="../images/stars3.gif" /> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input name="comment_rank" type="radio" value="4" id="comment_rank4" /> <img src="../images/stars4.gif" /> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input name="comment_rank" type="radio" value="5" checked="checked" id="comment_rank5" /> <img src="../images/stars5.gif" /> </div> </td> </tr> <!-- 判斷是否啟用驗證碼{if $enabled_captcha} --> <tr> <th valign="top"><i class="fa fa-keyboard-o hidden-xs"></i> {$lang.comment_captcha}</th> <td style="line-height: 28px;"> <input type="text" style="width: 80px;margin-right: 10px;" class="form-control pull-left text-center" placeholder="請輸入驗證碼" required="required" name="captcha" /> <img src="captcha.php?{$rand}" alt="captcha" style="vertical-align: middle;cursor: pointer;" onClick="this.src='captcha.php?'+Math.random()" /> </td> </tr> <!--{/if}--> <tr> <th valign="top"><i class="fa fa-comments hidden-xs"></i> {$lang.comment_content}</th> <td><textarea name="content" class="form-control" placeholder="請輸入{$lang.comment_content}" required="required" id="content" style="max-width: 500px;"></textarea></td> </tr> <tr> <td colspan="2" class="text-center"> <input type="hidden" name="cmt_type" value="{$comment_type}" /> <input type="hidden" name="id" value="{$id}" /> <input type="submit" name="Submit" class="btn btn-danger" value="{$lang.submit_comment}" /> <input type="reset" name="Submit2" class="btn btn-warning" value="{$lang.button_reset}" /> </td> </tr> </table> </form> </div>


瀏覽歷史與商品分類頁共用,但因寬度不同因此需要用 {$pname} 與 CSS3 的媒體查詢『@media screen and (){...}』來判斷並指定寬度,商品名稱的字數控制在 includes/lib_insert.php 裡的 insert_history() 函數
function insert_history() { .....................sub_str($goods['short_name'], 14)......................... }你可以修改(增減)其中的 14 來改變商品名稱的顯示長度
{insert_scripts files='transport.js'} <style type="text/css"> .history-block {margin-bottom: 15px;} {if $pname eq 'category'} .history-title {background: #3b270f;color:#fff;font-size: 1.3em;font-weight: bold;line-height: 32px;font-family:"微軟正黑體", Verdana, Arial,sans-serif;padding: 0 15px;border-radius: 6px 6px 0 0;} {else} .history-title {display: none;} {/if} .history-content {margin-bottom: 10px;} .history-content img {max-width: 50px;max-height: 50px;border: none;transition: All 0.5s ease-in-out;-webkit-transition: All 0.5s ease-in-out;-moz-transition: All 0.5s ease-in-out;-o-transition: All 0.5s ease-in-out;float:left;margin-right: 6px;} .history-content img:hover {opacity:0.5;} {if $pname eq 'category'} #history_list ul {margin: 8px 0 0 -40px;height: 70px;overflow: hidden;} {else} #history_list ul {height: 70px;overflow: hidden;margin: 8px auto 0 -40px;} @media screen and (min-width: 1200px){ #history_list ul {float: left;width: 28%;} } @media screen and (max-width: 1200px){ #history_list ul {float: left;width: 37.2%;} } @media screen and (max-width: 992px){ #history_list ul {float: left;width: 39.1%;} } @media screen and (max-width: 768px){ #history_list ul {float: left;width: 55%;} } @media screen and (max-width: 480px){ #history_list ul {clear: both;width: 100%;} } {/if} #clear_history a {cursor: pointer;float:right;border:1px solid #aaa;background: #500;border-radius: 5px;color:#fff;} </style> <div class="" id='history_div'> <div class="history-title">{$lang.view_history}</div> <div class="history-content" id='history_list'> {insert name='history'} </div> </div>




