作者 主題: 15、RWD響應式網頁設計-category 商品分類頁  (閱讀 610 次)

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

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
15、RWD響應式網頁設計-category 商品分類頁
« 於: 七月 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}-->

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