« 上一篇 下一篇 »
頁: 1   向下

作者 主題: 16、RWD響應式網頁設計- goods 圖片和文字資訊  (閱讀 526 次)

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

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
16、RWD響應式網頁設計- goods 圖片和文字資訊
« 於: 七月 22, 2019, 03:59:54 下午 »
商品詳情頁（goods.dwt）程式碼蠻多的，很容易就搞錯，因此還是建議將程式碼分區塊獨立出來，不但能降低出錯率，就算出錯了也很容易找出錯誤位置，另外關於一開始提到的 ecshop 修改使用 jquery 的方法，過程中還是會發生衝突問題，除非你有能力解決，否則請參考 ecshop 如何正確使用 jquery ？

商品詳情頁（goods.dwt）經過整理後就比較容易閱讀了，下列的程式碼尚未包含商品描述及評論等區塊，因為還沒作到那裡，你可以看出商品的圖片資訊（goods_img.lbi）和文字資訊（goods_info_text.lbi）都已經獨立成樣板檔，這樣針對區塊進行修改就比較不會出錯，不同的螢幕尺寸布局也不盡相同...
代碼: [選擇]
<body>
<!-- #BeginLibraryItem "/library/page_header.lbi" -->
<!-- #EndLibraryItem --><!-- 頁首 -->
<div class="row">
    <div class="col-md-12">
        <!-- #BeginLibraryItem "/library/ur_here.lbi" -->
        <!-- #EndLibraryItem --><!-- 目前位置 -->
    </div>
</div>
<div class="row" id="goods"><!--商品詳情-->
    <div class="col-md-12"><a name="goods"></a>
        <div class="title"><!--商品標題 -->
            <i class="fa fa-cog fa-spin"></i>{$goods.goods_style_name}
            <span class="pull-right">
                <!-- {if $prev_good} -->
                <a href="{$prev_good.url}" class="btn btn-default  btn-xs"><i class="fa fa-angle-double-left"></i>  上一個</a>
                <!-- {/if} -->
                <!-- {if $next_good} -->
                <a href="{$next_good.url}" class="btn btn-default btn-xs">下一個  <i class="fa fa-angle-double-right"></i></a>
                <!-- {/if} -->
            </span>
        </div>
    </div><!--商品標題 -->
    <div class="row"> <!--商品資訊-->
        <div class="col-md-12">
            <div class="col-xs-6 col-sm-4 col-md-3 imginfo">
                <!-- #BeginLibraryItem "/library/goods_img.lbi" --><!-- #EndLibraryItem --><!--圖片資訊-->
            </div>
            <div class="col-xs-6 col-sm-8 col-md-9 txtinfo">
                <!-- #BeginLibraryItem "/library/goods_info_text.lbi" --><!-- #EndLibraryItem --><!--文字資訊-->
            </div>
        </div>
    </div><!--商品資訊-->
</div><!--商品詳情-->
<script type="text/javascript">
var goods_id = {$goods_id};
var goodsattr_style = {$cfg.goodsattr_style|default:1};
var gmt_end_time = {$promote_end_time|default:0};
{foreach from=$lang.goods_js item=item key=key}
var {$key} = "{$item}";
{/foreach}
var goodsId = {$goods_id};
var now_time = {$now_time};
<!-- {literal} -->
onload = function(){
  changePrice();
  try { onload_leftTime(); }
  catch (e) {}
}
/**
 * 點選可選屬性或改變數量時修改商品價格的函數
 */
function changePrice()
{
  var attr = getSelectedAttributes(document.forms['ECS_FORMBUY']);
  var qty = document.forms['ECS_FORMBUY'].elements['number'].value;
  Ajax.call('goods.php', 'act=price&amp;id=' + goodsId + '&amp;attr=' + attr + '&amp;number=' + qty, changePriceResponse, 'GET', 'jsON');
}
/**
 * 接收返回的內容
 */
function changePriceResponse(res)
{
  if (res.err_msg.length > 0)
  {
    alert(res.err_msg);
  }
  else
  {
    document.forms['ECS_FORMBUY'].elements['number'].value = res.qty;
    if (document.getElementById('ECS_GOODS_AMOUNT'))
      document.getElementById('ECS_GOODS_AMOUNT').innerhtml = res.result;
  }
}
<!-- {/literal} -->
</script>
<!-- #BeginLibraryItem "/library/page_footer.lbi" -->
<!-- #EndLibraryItem -->
</body>






圖片資訊的部分為了讓手機載入速度快一點，因此展示圖片只有235*235，當然後台設定也需相同，除了有圖片放大鏡效果點擊圖片也可以放大檢視，商品相冊（goods_gallery.lbi）顯示張數會自動調整，可以使用按鈕或滑鼠或手指撥動（手機）導覽縮圖，沒有相冊按鈕不會顯示：
代碼: [選擇]
<style type="text/css">
      #goods div.goods_caption {background-color: rgb(110, 110, 110);overflow: hidden;height: auto;border-radius: 6px;border: 1px solid #aaa;padding-left:5px;line-height:3em;}
    #goods div.goods_caption h1 {margin-top: 15px;}
    #goods .pn {margin-top: 6px;}
    #goods table td#img {background-color: #FFF;}
    #goods table td#img img {border: none;box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);border-radius: 8px}
    #goods .imginfo table {height: 235px;width: 100%;margin:  0 auto;}
    #goods .imginfo table td.picture {padding-top:10px;width: 100%;height: auto;overflow: hidden;}
    #goods img.onbg {background: url(../images/bg_pic.gif) no-repeat 0 0;padding: 10px 4px 4px;height: 61px;width: 56px;}
    #goods img.autobg {border: 3px solid #eee;}
    #goods img.autobg:hover {border: 3px solid #3b270f;}
    #goods .goods_txtInfo {width: 60%;margin: 10px 0 10px 20px;}
    #goods .nav-pills {margin: 0 10px 10px;clear: both;}
    #goods .nav-tabs a {display: block;}
  .MagicZoomBigImageCont {background: #fff;border: 1px solid #aaa;border-radius: 8px;box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1);}
  .MagicZoomPup {background: rgba(255, 255, 255, 0.85);}
  .MagicZoomHeader {display: none;}
  .owl-stage-outer {width: 235px;margin: 0 auto;}
</style>
<table width="100%" border="0">
  <tr><td></td>
    <td align="center" valign="middle" width="235" id="img" height="235">
      <!-- {if $pictures}-->
      <a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom MagicThumb" title="點擊放大檢視圖片"> <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" class="thumb" style="max-width: 235px;max-height: 235px;" /> </a>
      <!-- {else} -->
      <a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom MagicThumb" title="點擊放大檢視圖片"> <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" class="thumb" style="max-width: 235px;max-height: 235px;" /> </a>
      <!-- {/if}-->
    </td><td></td>
  </tr>
  <tr>
    <td class="picture" id="imglist" colspan="3">
      <!--相簿 -->
      {include file='library/goods_gallery.lbi'}
    </td>
  </tr>
</table>



文字資訊也包含很多程式碼，因此將優惠活動（goods_info_pro.lbi）、商品屬性（specification.lbi）再獨立出來，如有套用共用的樣式，就必須留意牽一髮動全身的問題，並經常檢查程式碼是否有錯，否則隨著模板數量的增加，可能讓人眼花撩亂不知所措..
代碼: [選擇]
<style type="text/css">
  #ECS_GOODS_AMOUNT {font-size: 1.2em;font-weight: bold;color: red;}
</style>
{insert_scripts files='transport.js,utils.js'}
<form action="javascript:addToCart({$goods.goods_id})" method="post" name="ECS_FORMBUY" id="ECS_FORMBUY" class="form-inline">
  <div class="row"><!-- 優惠活動-->
    <div class="col-md-12">
      {include file='library/goods_info_pro.lbi'}
    </div>
  </div>
<div class="row text">
  <div class="col-md-12">
    <!-- {if $cfg.show_goodssn} 顯示商品貨號-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.goods_sn}{$goods.goods_sn}
    </div>
    <!-- {/if} -->
    <!-- {if $goods.goods_number neq "" and $cfg.show_goodsnumber} 商品庫存-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      <!-- {if $goods.goods_number eq 0} 無庫存-->
      {$lang.goods_number}{$lang.stock_up}
      <!-- {else} -->
      {$lang.goods_number}{$goods.goods_number} {$goods.measure_unit}
      <!-- {/if} -->
    </div>
    <!-- {/if} -->
    <!-- {if $goods.goods_brand neq "" and $cfg.show_brand} 品牌-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.goods_brand}<a href="{$goods.goods_brand_url}" class="btn btn-default">{$goods.goods_brand}</a>
    </div>
    <!--{/if}-->
    <!-- {if $cfg.show_godsweight} 商品重量-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.goods_weight}{$goods.goods_weight}
    </div>
    <!-- {/if} -->
    <!-- {if $cfg.show_addtime} 上架時間-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.add_time}{$goods.add_time}
    </div>
    <!-- {/if} -->
    <!--點閱數-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.goods_click_count}：{$goods.click_count}
    </div>
    <!-- {if $cfg.show_marketprice} 市場價格-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.market_price}<s>{$goods.market_price}</s>
    </div>
    <!-- {/if} -->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.shop_price}
      <span class="red">{$goods.shop_price_formated}</span>
    </div>
    <!-- {foreach from=$rank_prices item=rank_price key=key} 會員等級對應的價格-->
    <!-- {if $key eq $smarty.session.user_rank} -->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$rank_price.rank_name}
      <span id="ECS_RANKPRICE_{$key}">{$rank_price.price}</span>
    </div>
    <!-- {/if} -->
    <!--{/foreach}-->
    <!-- 評論等級 -->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.goods_rank}
      <img src="images/stars{$goods.comment_rank}.gif" alt="comment rank {$goods.comment_rank}" />
    </div>
    <!-- {if $goods.give_integral > 0} 購買此商品贈送積點-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.goods_give_integral}{$goods.give_integral} {$points_name}
    </div>
    <!-- {/if} -->
    <!-- {if $goods.bonus_money} 折價券-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.goods_bonus}{$goods.bonus_money}
    </div>
    <!-- {/if} -->
    <div class="col-sm-6 col-md-6 col-lg-4"><!-- 購買數量 -->
      <table class=""><tr><td>{$lang.number}：</td><td><input name="number" type="text" id="number" value="1" size="3" onfocus="changePrice()" onkeyup="changePrice();" class="form-control" /></td></tr></table>
    </div>
    <!-- {if $cfg.use_integral} 購買此商品可使用積點-->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.goods_integral}  <strong class="red">{$goods.integral}</strong> {$points_name}
    </div>
    <!-- {/if} -->
    <!-- 商品總價 -->
    <div class="col-sm-6 col-md-6 col-lg-4">
      {$lang.amount}：<span id="ECS_GOODS_AMOUNT"></span>
    </div>
  </div><!--文字內容-->
</div><!--商品資訊-->
    <!-- {if $specification} 循環可選屬性-->
    <div class="row">
      <div class="col-md-12">
        {include file='library/specification.lbi'}
      </div>
    <div style="width: 100%;height:10px;overflow: hidden;;"></div>
    </div>
    <!--- {/if} -->
  <div class="row">
  <!--{if $volume_price_list } -->
    <div class="col-md-12 col-lg-6">
      <div class="panel panel-danger">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-hourglass-half"></i>大量購買可享受以下優惠</h3>
        </div>
        <div class="panel-body">
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th class="text-center">{$lang.number_to}</th>
                <th class="text-center">優惠價格</th>
              </tr>
              <!-- {foreach from=$volume_price_list item=price_list key=price_key} -->
              <tr class="text-center">
                <td>{$price_list.number}{$goods.measure_unit}</td>
                <td>{$price_list.format_price}</td>
              </tr>
              <!-- {/foreach} -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  <!--{/if}-->
  <!--{if $goods.is_promote and $goods.gmt_end_time } 促銷-->
    <div class="col-md-12 col-lg-6">
      {insert_scripts files='lefttime.js'}
      <div class="panel panel-danger">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-hourglass fa-spin"></i>  本商品促銷中</h3>
        </div>
        <div class="panel-body">
          {$lang.promote_price}<strong>{$goods.promote_price}</strong><br>
          {$lang.residual_time} <span id="leftTime" class="b red">{$lang.please_waiting}</span>
        </div>
      </div>
    </div>
  <!--{/if}-->
  <!-- {if $goods.is_shipping} 為免運費商品則顯示-->
    <div class="col-md-12 col-lg-6">
      {$lang.goods_free_shipping}
    </div>
  <!-- {/if} -->
    <div class="col-md-12 text-center col-lg-6"><!-- 按鈕 -->
      <a href="javascript:addToCart({$goods.goods_id})" class="btn btn-danger" title="放入購物車"><i class="fa fa-cart-arrow-down"></i>  放入購物車</a>
      <a href="javascript:collect({$goods.goods_id})" title="此商品加入我的最愛" class="btn btn-default"><i class="fa fa-heart red"></i>  加入我的收藏</a>
      <!-- {if $affiliate.on} -->
      <a href="user.php?act=affiliate&amp;goodsid={$goods.goods_id}" title="推薦此商品給好友" class="btn btn-default"><i class="fa fa-thumbs-o-up red"></i>  推薦給好友</a>
      <!-- {/if} -->
    </div><!-- 按鈕 -->
  </div>
</form>



養成註解的好習慣才不會隨時間淡忘，並記得隨時存檔，雖然 BootStrap 的css很齊全，但是你也可以使用自己的，只需注意css的順序即可：
代碼: [選擇]
        <link href="{$tpl}css/BootStrap.min.css" rel="stylesheet">
        <link href="{$tpl}css/font-awesome.min.css" rel="stylesheet">
        <link href="{$ecs_css_path}" rel="stylesheet" type="text/css" /><!-- 自訂樣式表 -->
記錄
LINE ID：ecshop_weshop
Email：andy@we-shop.net
聯絡我：https://we-shop.net/contactus.php
頁: 1   向上
« 上一篇 下一篇 »