最新文章

頁: « 1 2 3 4 5 6 7 8 9 10 »
51
ECSHOP 響應式設計的製作 / 16、RWD響應式網頁設計- goods 圖片和文字資訊
« 最新文章 由 andy 七月 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" /><!-- 自訂樣式表 -->
52
ECSHOP 響應式設計的製作 / 15、RWD響應式網頁設計-category 商品分類頁
« 最新文章 由 andy 七月 22, 2019, 03:42:59 下午 »
在開始商品分類頁(category.dwt)的RWD 響應式網頁設計之前,還是要提醒大家,DWT必須先將網頁整體排版布局好,而LBI(區塊)可能由多個DWT調用,因此只需負責自己的樣式即可,如果樣式只供該LBI使用可直接寫在檔案中,以減少style.css的檔案大小,過程中請多參考 官方文件

為了方便判別目前頁面,請在 includes/lib_main.php 的
代碼: [選擇]
$smarty->assign('tpl', "themes/".$GLOBALS['_CFG']['template']."/");
下一行加入
代碼: [選擇]
$smarty->assign('pname', basename($_SERVER['SCRIPT_NAME'],'.php'));
在模板中即可使用 {$pname} 獲取目前頁面,例如首頁即為 index,商品分類頁即為 category...

ECSHOP的商品分類頁(category.dwt)分成兩欄,讓主區域在左、側邊欄在右,在小螢幕時就會變成上下疊加,同時區塊的部份css仍然可以沿用之的樣式(部份需配合 {$pname} 使用),在開始之前我把程式碼整理一下,閱讀起來比較方便,頁首、頁尾和商品分類樹之前就已經做好了,只需要調用即可,我沒有作可編輯區域,是為了避免後台做了版型設定被重寫模板:
代碼: [選擇]
<body>
<!-- #BeginLibraryItem "/library/page_header.lbi" --><!-- #EndLibraryItem -->
<div class="row">
    <div class="col-md-9"><!-- 主區域 -->
        <!-- #BeginLibraryItem "/library/ur_here.lbi" --> <!-- #EndLibraryItem --><!-- 目前位置 -->
        <!-- #BeginLibraryItem "/library/goods_list.lbi" --> <!-- #EndLibraryItem --><!-- 搜尋結果 -->
        <!-- #BeginLibraryItem "/library/pages.lbi" --> <!-- #EndLibraryItem --><!-- 分頁 -->
    </div>
    <div class="col-md-3"><!-- 側邊欄 -->
        <div class="row">
            <div class="col-sm-6 col-md-12">
                <!-- #BeginLibraryItem "/library/category_tree.lbi" --> <!-- #EndLibraryItem --><!-- 商品分類樹 -->
            </div>
            <div class="col-sm-6 col-md-12">
                <!-- #BeginLibraryItem "/library/history.lbi" --> <!-- #EndLibraryItem --><!-- 瀏覽歷史 -->
            </div>
        </div>
    </div>
    <div class="col-md-12"><!-- 網站幫助 -->
        <!-- #BeginLibraryItem "/library/help.lbi" --> <!-- #EndLibraryItem -->
    </div>
</div>
<!-- #BeginLibraryItem "/library/page_footer.lbi" --><!-- #EndLibraryItem -->
</body>


商品分類頁的主區域中包涵 顯示方式與組合搜尋兩個區塊的程式碼,看起來令人頭皮發麻,於是我把他獨立成 goods_display.lbi 和 goods_option.lbi ,然後引入 goods_list.lbi 中,這樣看起來就清爽多了...
代碼: [選擇]
<div class="goods_list">
  <div class="title">
    <i class="fa fa-list"></i>{$lang.goods_list}
    <div class="goods_display pull-right">
      {include file='library/goods_display.lbi'}
    </div>
  </div>
    {include file='library/goods_option.lbi'}<!-- 組合搜尋 -->
    {include file='library/recommend_best.lbi'}<!-- 精品推薦 -->
  <!-- {if $goods_list} 若有商品-->
  <div class="search_goods">
    <form name="compareForm" action="compare.php" method="post" onSubmit="return compareGoods(this);" class="form">
      <!-- {if $pager.display == 'list'} 列表檢視-->
      {include file='library/search_list.lbi'}
      <!-- {elseif $pager.display == 'grid'} 表格檢視-->
      {include file='library/search_grid.lbi'}
      <!-- {elseif $pager.display == 'text'} 文字檢視-->
      {include file='library/search_text.lbi'}
      <!-- {/if} -->
    </form>
  </div>
  <!-- {else} -->
  <h4 class="text-center red">
  <i class="fa fa-battery-empty"></i>此分類暫無商品
  </h4>
  <!-- {/if} -->
</div>


從上圖可以看出,顯示方式的圖片已經改為 font icon 了,精品推薦和商品分類樹都與首頁共用,但是所佔寬度不同,因此用前面新增的  {$pname} 來判斷,例如:
代碼: [選擇]
<div class="col-xs-6 col-sm-{if $pname eq 'index'}3{else}6{/if} col-md-12"><!-- 商品分類樹 -->
<div class="col-xs-4 col-sm-3 col-md-{if $pname eq 'index'}4{else}2{/if}"><!-- 精品推薦 -->



顯示方式有三種,習慣獨立成LBI方便編輯,列表檢視(search_list.lbi)、表格檢視(search_grid.lbi)、文字檢視(search_text.lbi),其中列表檢視(search_list.lbi)與文字檢視(search_text.lbi)用表格來作會比較方便:
代碼: [選擇]
<!-- {if $goods_list}-->      <!-- 列表檢視-->
<table class="table table-hover list">
<tr>
  <th>商品圖片</th>
  <th>商品名稱<span class="hidden-sm hidden-md hidden-lg"> / 商品價格</span></th>
  <th class="hidden-xs">簡單描述</th>
  <th class="hidden-xs">商品價格</th>
  <th class="hidden-xs">操作</th>
</tr>
<!--{foreach name=goods_list from=$goods_list item=goods} -->
<!-- {if $goods.goods_id} -->
<tr>
  <td class="img">
    <a href="{$goods.url}">
      <img src="{$goods.goods_thumb}" onerror="javascript:this.src='images/no_picture.gif'" alt="{$goods.goods_name}" />
    </a>
  </td>
  <td class="name">
    <a href="{$goods.url}">
      <!-- {if $goods.goods_style_name} -->
      {$goods.goods_style_name}
      <!-- {else} -->
      {$goods.goods_name}
      <!-- {/if} -->
    </a>
    <div class="hidden-sm hidden-md hidden-lg">
      <!-- {if $show_marketprice} if6-->
      <s>{$goods.market_price}</s>
      <!-- {/if} if6-->
      <!--{if $goods.promote_price neq "" } -->
      <strong class="red">{$goods.promote_price}</strong>
      <!--{else} -->
      <strong class="red">{$goods.shop_price}</strong>
      <!--{/if} -->
        <a href="javascript:collect({$goods.goods_id});" class="btn btn-default btn-xs">{$lang.favourable_goods}</a><a href="javascript:addToCart({$goods.goods_id})" class="btn btn-danger btn-xs">{$lang.btn_buy}</a>
    </div>
  </td>
  <td class="brief hidden-xs">
    <!-- {if $goods.goods_brief} -->
    {$lang.goods_brief}{$goods.goods_brief}
    <!-- {/if} if5-->
  </td>
  <td class="price hidden-xs">
    <!-- {if $show_marketprice} -->
    <s>{$goods.market_price}</s>
    <!-- {/if} if6-->
    <!--{if $goods.promote_price neq "" } -->
    <strong class="red">{$goods.promote_price}</strong>
    <!--{else} -->
    <strong class="red">{$goods.shop_price}</strong>
    <!--{/if} -->
  </td>
  <td class="buton hidden-xs">
    <a href="javascript:collect({$goods.goods_id});" class="btn btn-default btn-xs">{$lang.favourable_goods}</a><a href="javascript:addToCart({$goods.goods_id})" class="btn btn-danger btn-xs">{$lang.btn_buy}</a>
  </td>
</tr>
<!--{/if} -->
<!--{/foreach} -->
</table>
<!--{/if}-->

53
ECSHOP 響應式設計的製作 / 14、RWD響應式網頁設計-index 網站幫助與友情連結
« 最新文章 由 andy 七月 22, 2019, 03:20:39 下午 »
網站幫助與友情連結這兩個區塊可以放在網頁的任何位置,或任何頁面上,只要將css調整好即可,所以我將檔案分成 help.lbi 和 links.lbi 方便調用,其實還有一個底部導航,我希望它全站顯示因此直接寫到 page_footer.lbi 了,:
代碼: [選擇]
    <!-- #BeginLibraryItem "/library/help.lbi" --><!-- #EndLibraryItem -->
    <!-- #BeginLibraryItem "/library/links.lbi" --><!-- #EndLibraryItem -->
  <!-- {if $navigator_list.bottom} -->
  <!-- 底部導航 -->
  <div class="row">
    <div class="col-md-12 text-center">
      <!-- {foreach name=nav_bottom_list from=$navigator_list.bottom item=nav} -->
        <a href="{$nav.url}"{if $nav.opennew eq 1} target="_blank"{/if}>{$nav.name}</a>
        <!-- {if !$smarty.foreach.nav_bottom_list.last} --> - <!-- {/if} -->
      <!-- {/foreach} -->
    </div>
  </div>
  <!-- {/if} -->


網站幫助與友情連結依項目多寡決定佔12格或6格,避免頁面過多空白區域:
代碼: [選擇]
<!--{if $helps}-->
<div class="block">
  <div class="col-md-12">
    <div class="title"><i class="fa fa-question-circle"></i>  網站幫助<span class="tip"><em>HELP</em></span></div>
    <table class="table table-hover table-bordered">
      <tr>
        <!-- {foreach from=$helps item=help_cat} -->
        <th class="help-name"><i class="fa fa-question"></i>  {$help_cat.cat_name}</th>
        <!-- {/foreach} -->
      </tr>
      <tr>
        <!-- {foreach from=$helps item=help_cat} -->
        <td valign="top">
          <!-- {foreach from=$help_cat.article item=item} -->
          <div class="help-link">  <i class="fa fa-angle-double-right"></i>  <a href="{$item.url}" title="{$item.title|escape:html}" class="">{$item.short_title}</a></div>
          <!-- {/foreach} -->
        </td>
        <!-- {/foreach} -->
      </tr>
    </table>
  </div>
</div>
<!--{/if}-->
<!-- {if $img_links  or $txt_links } -->
<div class="block">
  <div class="col-md-12">
    <div class="title"><i class="fa fa-link"></i>  友情連結<span class="tip"><em>LINKS</em></span></div>
    <div class="col-md-12 links">
      <div class="">
        <!-- {if $txt_links} -->
        <!-- {foreach from=$txt_links item=link} -->
        <a class="btn btn-info" href="{$link.url}" target="_blank" title="{$link.name}">{$link.name}</a>
        <!-- {/foreach} -->
        <!-- {/if} -->
       
        <!-- {if $img_links} -->
        <!-- {foreach from=$img_links item=link} -->
        <a href="{$link.url}" target="_blank" title="{$link.name}"><img src="{$link.logo}" alt="{$link.name}" /></a>
        <!-- {/foreach} -->
        <!-- {/if} -->
      </div>
    </div>
  </div>
</div>
<!-- {/if} -->


截至目為止已經完成頁首、頁尾和首頁的模板,你應該會發現自己設定的樣式並不多,除了區塊共用樣式之外,很多樣式在 BootStrap 都已經幫你寫好了,不用死記只要記住網址,像我一樣用到的時候再來查就好了, BootStrap
54
ECSHOP 響應式設計的製作 / 13、RWD響應式網頁設計-index 首頁的右側邊欄
« 最新文章 由 andy 七月 22, 2019, 03:09:53 下午 »
ECSHOP 首頁剩下的區塊都放在側邊欄了,你應該只放需要用到的區塊以減低伺服器負擔,因為與主區域的布局不太一樣,因此另外使用側邊欄共用的css樣式設定,共用的樣式設定也是放在 style.css 裡方便引用,建議不要設置可編輯區域(除非是公用模板),否則能造成自己困擾,如需調整區塊順序可以直接移動代碼,側邊欄在中大螢幕時佔用3格寬度,小螢幕則佔全寬並移到主區域下方,因此需留意不同的寬度變化:
代碼: [選擇]
<div class="col-md-3" id="indexRight">
  <!-- #BeginLibraryItem "/library/recommend_promotion.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/promotion_info.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/top10.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/invoice_query.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/order_query.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/shop_notice.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/new_articles.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/brands.lbi" --><!-- #EndLibraryItem -->
  <!-- #BeginLibraryItem "/library/email_list.lbi" --><!-- #EndLibraryItem -->
</div>

這個側邊欄也有共通點,和主區域也非常接近,不過為了有所區分和往後可能用到,在指定樣式的過程中有些區塊的樣式是需要獨立設定的,例如:銷售排行:
代碼: [選擇]
/* 右側邊欄 */
#indexRight {}
.small-block {padding: 8px;border-radius: 6px;margin-bottom: 15px;box-shadow: 0px 1px 5px 5px rgba(0, 0, 0, 0.1);}
.small-block .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;}
.small-block .title a {color:#fff;font-size: 1.1em;}
.small-block .title a:hover {color:orange;}
.small-block .title > .tip {margin-left:15px;font-size: 0.9em;color:orange;font-weight: bold; font-family:"Monotype Corsiva","sans-serif";}
.small-block .title > .more a {font-size: 0.5em;color:yellow;font-weight: bold;margin-top: 6px;}
.small-block .content {margin-bottom: 10px;}
.small-block .box {padding-bottom: 5px;overflow: hidden;position: relative;margin-top: 8px;}
.small-block .img {text-align: center;}
.small-block img {max-width: 100%;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;}
.small-block img:hover {opacity:0.5;}
.small-block .name, .block .name a {text-decoration: none;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;}
.small-block .price {font-weight: bold;text-align: center;}
/* top10 */
.top10 img {width: 60px;height: 60px;margin-right: 8px;}
.top10 .red, .to10 .black {width: 20px;height: 20px;line-height:20px;color:#fff;border-radius:50%;text-align:center;overflow:hidden;margin-right: 8px;}
.top10 .red {background: #c00;}
.top10 .black {background: #363636;}
.top10 .namen {height: 40px;overflow: hidden;}
.top10 .price {font-weight: bold;}



底下是銷售排行(top10.lbi)的代碼,類似這樣的共用樣式可以減輕日後維護的負擔
有幾個地方要留意一下:
1、能夠使用色塊或文字代替的地方就不要使用圖片
2、所有css和html代碼都是小寫
3、屬性與屬性之間必須留有空格
4、隨時存檔並預覽結果是否如預期
代碼: [選擇]
<!-- {if $top_goods} -->
<!-- 銷售排行 -->
<div class="col-xs-6 col-sm-4 col-md-12 small-block">
  <div class="title">{$lang.top10}</div>
  <div class="row content top10">
    <!-- {foreach name=top_goods from=$top_goods item=goods}-->
    <div class="col-md-12">
      <div class="box">
        <!-- {if $smarty.foreach.top_goods.iteration > 1} -->
        <div class="line"></div>
        <!-- {/if} -->
        <div class="img pull-left">
          <a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}" /></a>
        </div>
        <div class="namen">
          <!-- {if $smarty.foreach.top_goods.iteration<4}-->
          <div class="red pull-left">
            {$smarty.foreach.top_goods.iteration}
          </div>
          <!-- {else} -->
          <div class="black pull-left">
            {$smarty.foreach.top_goods.iteration}
          </div>
          <!-- {/if} -->
          <a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_name}</a>
        </div>
        <div class="text-danger">
          {$goods.price}
        </div>
      </div>
    </div>
    <!--{/foreach}-->
  </div>
</div>
<!--{/if}-->

55
ECSHOP的首頁新品、熱賣、精品、分類商品(recommend_new.lbi、recommend_hot.lbi、recommend_best.lbi、cat_goods.lbi)四個區塊的內容結構大同小異,因此可以使用相同的css樣式設定,共用的樣式設定都要放在 style.css 裡方便引用,順道一提的是如果你設置了可編輯區域,需要留意不同寬度的響應結果,主區我放了主廣告和新品、熱賣、精品、分類商品,在中大螢幕時佔用6格寬度,小螢幕則佔全寬,代碼如下:
代碼: [選擇]
    <div class="col-md-6" id="indexMiddle">
        <!-- #BeginLibraryItem "/library/index_ad.lbi" --><!-- #EndLibraryItem -->
        <!-- #BeginLibra{ryItem "/library/recommend_best.lbi" --><!-- #EndLibraryItem -->
        <!-- #BeginLibraryItem "/library/recommend_new.lbi" --><!-- #EndLibraryItem -->
        <!-- #BeginLibraryItem "/library/recommend_hot.lbi" --><!-- #EndLibraryItem -->
        <!-- #BeginLibraryItem "/library/cat_goods.lbi" --><!-- #EndLibraryItem -->
    </div>

以新品為例,重新給予新列並將整個新品區塊指定一個 class,並重新分配12格寬度,class="title"是標題樣式,class="tip"是英文字樣式,class="more pull-right"是更多連結樣式,這些都是 BootStrap 的內建樣式,目的是讓元素靠右浮動,class="row content"又是一個新列,在 foreach 循環裡指定各種寬度每列顯示幾張圖,並且用 class="box" 將商品圖片、商品名稱及價格包起來(熱賣、精品、分類商品作法相同):
代碼: [選擇]
<!-- {if $new_goods}-->
<div class="row block">
  <div class="col-md-12">
    <div class="title"><i class="fa fa-newspaper-o"></i>  最新商品<span class="tip"><em>NEW</em></span>
    <div class="more pull-right"><a href="../search.php?intro=new">more  »</a></div></div>
    <div class="row content">
      <!--{foreach from=$new_goods item=goods}-->
      <div class="col-xs-4 col-sm-3 col-md-4">
        <div class="box">
          <div class="img"><a href="{$goods.url}"><img src="{$goods.thumb}" onerror="javascript:this.src='images/no_picture.gif'" alt="{$goods.name|escape:html}" /></a></div>
          <div class="name"><a href="{$goods.url}">{$goods.short_style_name}</a></div>
          <div class="price">
            <!-- {if $goods.promote_price neq ""} -->
            {$goods.promote_price}
            <!-- {else}-->
            {$goods.shop_price}
            <!--{/if}-->
          </div>
        </div>
      </div>
      <!--{/foreach}-->
    </div>
  </div>
</div>
<!-- {/if} -->



底下列出共用的樣式設定僅供參考,過程中可能會根據實際情況進行調整:
代碼: [選擇]
/*新品、熱賣、精品、分類商品*/
.block {margin-top: 10px;margin-bottom: 10px;background: #FFF;}
.block .title {background: #363636;color:#fff;font-size: 1.3em;font-weight: bold;line-height: 32px;font-family:  "微軟正黑體", Verdana, Arial,sans-serif;padding: 0 15px;border-radius: 10px 10px 0 0;}
.block .title > .tip {margin-left:15px;font-size: 0.9em;color:orange;font-weight: bold; font-family:"Monotype Corsiva","sans-serif";}
.block .title > .more a {font-size: 0.5em;color:yellow;font-weight: bold;margin-top: 6px;}
.block .content {margin-bottom: 10px;}
.block .box {padding-bottom: 5px;overflow: hidden;position: relative;margin-top: 8px;box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.1);}
.block .img {text-align: center;}
.block img {max-width: 100%;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;}
.block img:hover {opacity:0.5;}
.block .name, .block .name a {text-decoration: none;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;}
.block .price {font-weight: bold;color: red;text-align: center;}

56
ECSHOP 響應式設計的製作 / 11、RWD響應式網頁設計-首頁調用主廣告圖片輪播
« 最新文章 由 andy 七月 22, 2019, 02:24:32 下午 »
ECSHOP的首頁主廣告圖片輪播(index_ad.lbi)自帶的是使用FLASH播放器,但是FLASH播放器在手機上是無法播放的,所以必須使用純  javascript 來控制,如果你使用了 jquery 插件,請留意 jquery 版本和插件載入位置,要在首頁調用主廣告圖片輪播請使用如下語法:
代碼: [選擇]
<!-- #BeginLibraryItem "/library/index_ad.lbi" --><!-- #EndLibraryItem -->

以本例子來說圖片寬都約550px即可,高度則沒有限制,但是每張輪播圖的尺寸應該都一樣:


要調用輪播圖之前你必須先在 index.php 的最後加入:
代碼: [選擇]
function get_flash_xml()
{
    $flashdb = array();
    if (file_exists(ROOT_PATH . DATA_DIR . '/flash_data.xml'))
    {
        // 兼容v2.7.0及以前版本
        if (!preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"\ssort="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER))
        {
            preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER);
        }
        if (!empty($t))
        {
            foreach ($t as $key => $val)
            {
                $val[4] = isset($val[4]) ? $val[4] : 0;
                $flashdb[] = array('src'=>$val[1],'url'=>$val[2],'text'=>$val[3],'sort'=>$val[4]);
            }
        }
    }
    return $flashdb;
}

然後在 index_ad.lbi 裡用SMARTY的 foreach 標籤來循環獲取圖片資訊,例如:
代碼: [選擇]
<!--{foreach from=get_flash_xml() item=playerdb name=get_flash_xml}-->
    <a href="{$playerdb.url}" title="{$playerdb.text}"><img src="{$playerdb.src}" /></a>
<!--{/foreach}-->



多圖顯示的首頁廣告圖片輪播 VIP下載 DEMO
57
ECSHOP 響應式設計的製作 / 10、RWD響應式網頁設計-DWT調用商品分類樹
« 最新文章 由 andy 七月 22, 2019, 02:10:12 下午 »
商品分類樹(category_tree.lbi)會有多個DWT調用,所以獨立成一個LBI,在DWT如果要調用他,可以使用:
代碼: [選擇]
<!-- #BeginLibraryItem "/library/category_tree.lbi" --><!-- #EndLibraryItem -->

如果在LBI要調用他,則必須使用:
代碼: [選擇]
{include file='library/category_tree.lbi'}

前面說過首頁的布局是為三欄,如果網站是以商品為主的,左側邊欄可以放置商品分類樹,如果網站是以文章為主的,左側邊欄可以放置文章分類樹或最新文章區塊,在不同的設備會呈現不同效果:






底下列出的是我給 category_tree.lbi 的html結構,僅供參考,因為沒有打算共用,所以把css也放到檔案裡...
代碼: [選擇]
<style type="text/css">
    .categore_tree {margin: 0;}
    .categore_tree .title {background: #3b270f;color: #FFF;line-height: 36px;text-align: center;font-size: 1.2em;border-radius: 10px 10px 0 0;}
    .categore_tree .content .parent {background: #d3c08d ;color: #3b270f;line-height: 32px;margin: 3px 0;}
    .categore_tree .content .parent a {color: #3b270f;text-decoration: none;}
    .categore_tree .content .parent a:hover {color: #fff;text-decoration: none;}
    .categore_tree .content .sub {margin-left: 15px;}
    .categore_tree .content .sub a {color: #3b270f;text-decoration: none;}
    .categore_tree .content .sub a:hover {color: #f00;text-decoration: none;}
</style>
<div class="row categore_tree">
  <div class="title"><i class="fa fa-sitemap"></i>  {$lang.goods_category}</div>
  <div class="content">
    <!--{foreach from=$categories item=cat}-->
    <div class="col-md-12 parent"><i class="fa fa-folder-open"></i>  <a href="{$cat.url}"{if $category eq $cat.id} class="active"{/if}>{$cat.name|escape:html}</a></div>
    <!--{if $cat.cat_id}-->
    <div class="row sub">
      <!--{foreach from=$cat.cat_id item=child}-->
      <div class="col-xs-6 col-sm-4 col-md-12"><i class="fa fa-file-text-o"></i>  <a href="{$child.url}""{if $category eq $child.id} class="active"{/if}>{$child.name|escape:html}</a></div>
      <!--{/foreach}-->
    </div>
    <!--{/if}-->
    <!--{/foreach}-->
  </ul>
</div>
</div>
58
ECSHOP 響應式設計的製作 / 9、RWD響應式網頁設計-index 首頁
« 最新文章 由 andy 七月 22, 2019, 01:55:21 下午 »
RWD 響應式網頁設計教學其實適用在任何網站,只是有些人因為不懂html與css,自然做起來就有點吃力,RWD 響應式網頁設計不過就是將寬度用css的媒體查詢來自動調整,其他的樣式並不需要改變,只要懂得簡單的html和css3應該就沒太大問題,很多指令不需要死記,準備好手冊隨時待查即可...

在動態網站裡除了前面提過的頁首和頁尾之外,就剩下內容區了,頁首和頁尾整個網站共用,但是網頁內容是隨著頁面不同而顯示相應資料,因此需要逐頁檢查修改,lativ 的首頁內容區分成三欄,為了全站方便控制整體寬度,因此在 page_header.lbi 最後和 page_footer.lbi 最前加上 container div 以便包裹整個內容區
代碼: [選擇]
<div class="container" style="min-height: 320px;">
    內容區...
</div>
至於內容區的布局是為三欄,因此在PC以3、6、3的布局,而在平板或手機則變成都是12,也就是上下堆疊的方式排列:
代碼: [選擇]
        <div class="col-md-3" id="indexLeft">
            左側邊欄...
        </div>
        <div class="col-md-6" id="indexMiddle">
            主區域...
        </div>
        <div class="col-md-3" id="indexRight">
            右側邊欄...
        </div>


購物系統本身就要顯示大量商品圖片,雖然是使用縮圖不過加起來也不小,除了消耗流量更容易拖慢網頁載入速度,因此應斟酌商品圖片的顯示數量,廣告位若使用圖片,建議用  SVG 格式的向量圖,可編輯區域除非是公用模板,否則不建議設置,如果設置了可編輯區域,需注意若後台進行模板設置,相應的DWT檔也會被重寫


首頁主廣告使用FLASH播放器在PC是沒有問題的,但在手機或平板中是無法播放的,因此必須改用 javascript 的圖片輪播,同時也支援寬度自動適應...
以這個模板來說,圖片的最大寬度為550px,高度則沒限制,但必須每張圖尺寸都一樣,否則會如圖一樣:
59
ECSHOP 響應式設計的製作 / 8、ECSHOP響應式網頁製作-footer 頁面底部資訊
« 最新文章 由 andy 七月 18, 2019, 10:50:03 上午 »
footer 是每個頁面的底部,由 page_footer.lbi 負責,和 header 一樣共用於每個網頁,因此你只需修改  page_footer.lbi ,整個網站的網頁底部也會跟著改變,footer 包含網站版權文字、其他訊息與客服資訊,你也可以加入自訂的文字或圖片,現在用瀏覽器(建議 FireFox) 開啟本機的網站首頁,用文字編輯器(建議 sublime  Text) 開啟 page_footer.lbi
代碼: [選擇]
<footer class="container">
    footer...
</footer>

為了讓程式碼更容易閱讀,首頁部份只留頁首和頁尾,其他都先刪除:



為了讓 footer 常駐於頁面底部不會隨著頁面捲動,所以加上  navbar-fixed-bottom,版權文字靠左,右邊加上一個回頂部按鈕
代碼: [選擇]
<footer class="container navbar-fixed-bottom">
  <div class="row">
    <div class="col-xs-10 col-sm-11 col-md-11 info">Copyright {$copyright}</div>
    <div class="col-xs-2 col-sm-1 col-md-1"><a href="#" title="回頂部"><i class="fa fa-sort-asc"></i>TOP</a></div>
  </div>
</footer>


另外還有一些客服資訊,為了避免佔太多版面因此先隱藏,待訪客點擊後在展開,為了讓程式碼更容易閱讀,所以將這部份獨立出來,還有像ECSHOP的版權,網站的統計資訊等,當然你也能自行增減顯示的元素
代碼: [選擇]
  <div class="row">
    <div class="col-xs-10 col-sm-11 col-md-11 info">
      {include file='library/service.lbi'}
      {foreach from=$lang.p_y item=pv}{$pv}{/foreach}{$licensed}
      {if $stats_code}<div>{$stats_code}</div>{/if}
    </div>
    <div class="col-xs-2 col-sm-1 col-md-1">
      <a href="{$feed_url}" title="RSS訂閱"><i class="fa fa-rss fa-2x"></i></a>
    </div>
  </div>


至此為止,header 和 footer 的部份已經完成,請使用瀏覽器縮放寬度,或實際使用各種移動設備測試一下響應效果是否符合你的期待,特別注意的是,有些手機的螢幕仍是360像素,如果你很在意,請針對此寬度進行微調...
60
ECSHOP 響應式設計的製作 / 7、ECSHOP響應式網頁製作-header 中間導航欄
« 最新文章 由 andy 七月 18, 2019, 10:39:38 上午 »
當你在後台設置了中間導航欄之後,在頁面中便能看到選單,並且自動根據瀏覽器寬度做出響應,下圖是PC和手機的差異:



中間導航欄的基本程式碼如下,這是 BootStrap 的組件,大部分情況下只需照樣複製貼上即可,然後將選單的程式碼放到 ul 裡面,類似這樣:
代碼: [選擇]
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <!-- 中間導航欄... -->
                <li><a href="連結網址">連結名稱</a></li>
            </ul>
        </div>
    </nav>

ECSHOP 的中間導航欄語法類似這樣,html部份可以針對個人需求調整,foreach 是一個 SMARTY 的循環標籤,active 是 BootStrap 的樣式,可以讓作用中的連結有不同的樣式,{if $nav.opennew eq 1} target="_blank"{/if} 判斷連結是否需要開新視窗
代碼: [選擇]
    <!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
    <li{if $nav.active eq 1} class="active"{/if}>
        <a href="{$nav.url}"{if $nav.opennew eq 1} target="_blank"{/if}>
            <i class="fa fa-mouse-pointer"></i>{$nav.name}
        </a>
    </li>
    <!-- {/foreach} -->

如果你想讓行導航欄常駐於頁面頂部,而不會隨著頁面捲動,請加上 navbar-fixed-top,例如:
代碼: [選擇]
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        ...
    </nav>

頁: « 1 2 3 4 5 6 7 8 9 10 »