17、RWD響應式網頁設計- goods 商品描述和其他_ECSHOP響應式模版設計_Ecshop For PHP7+::繁體中文支援-原來如此 By we-shop.net

更多 HTML5 響應式模板免費下載

工廠製造產品商城響應式網頁模板

目前位置: 首頁 > ECSHOP響應式模版設計 > 17、RWD響應式網頁設計- goods 商品描述和其他

17、RWD響應式網頁設計- goods 商品描述和其他超大 稍大 微大

發表於： 2016-12-11 最後更新：現在時間：2022-05-25 20:11:36

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

<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>