作者 主題: 17、RWD響應式網頁設計- goods 商品描述和其他  (閱讀 610 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
17、RWD響應式網頁設計- goods 商品描述和其他
« 於: 七月 22, 2019, 04:16:30 下午 »
商品詳情頁(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>&nbsp;&nbsp;
      <!-- 結束標記{/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>




LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php