ECSHOP 響應式模板DIY-頁首
2022-03-05
345
相關文章
原本希望能詳細說明模板修改方法，但是 ecshop 的模板實在太多了，除了原有的檔案之外，在修改的過程中還會將部分程式碼獨立成 lbi ，以免代碼過長而不利閱讀與編輯，編輯器 Hbuider 和 Editplus 交叉使用，如果你有自己慣用的編輯器，也可以繼續使用...，由於我對配色沒啥概念，因此若顏色相關修改有不適用的地方，歡迎不吝賜教 ...
在修改之前我先把下列檔案的 1 都去掉，page_footer1、page_header1 改為 page_footer、page_header，這樣才不會相同的檔案要編輯兩次
底下是編輯後的 page_header.lbi 的程式碼
為了日後方便維護，只有多頁共用的樣式設定才會放在 style.css 內
LOGO圖片使用透明的PNG格式，放在自訂的 public/images 目錄裡
導航欄部分是為了代碼容易閱讀，因此獨立出來再以 {include file='library/nav.lbi'} 的方式引入
整個頁首共用於所有頁面，為了盡量在寬度有限的移動設備上，也能展示出與PC頁面接近的區塊，最終決定以側邊欄的方式呈現，當然這是我個人的風格，你應該也有自己的做法，從下圖中可以看出我將它分成六個部分，第六部分是屬於 index 的範圍
1、自訂義導航欄：{include file='library/nav.lbi'} 內容包含LOGO、商品分類、文章分類、中間導航、頂部導航、會員操作等區塊的整合，使用多級選單呈現...
2、商品搜索框：平常是隱藏的，當點擊放大鏡 icon 後便會顯示或隱藏
3、目前位置：在首頁時會顯示網站公告，非首頁則顯示目前頁面位置
4、購物車資訊：平常顯示購物車數量，游標移至上方則顯示購買商品清單，點擊則進入結帳頁面
5、首頁主廣告：支援手指左右撥動換圖，可根據螢幕寬度顯示不同圖片
6、首頁上架資訊：虛擬銷量是4.X板新增的功能，可在後台設置，當點擊圖片後會以燈箱開啟原圖
點擊圖片可以放大檢視
點擊圖片可以放大檢視
從上圖可看出雖然整個頁首部分在不同裝置上排版略有不同，但可操作功能並無差異，這就是響應式模板的優點，對管理者來說節省了大量的時間與成本，對消費者來說使用任何設備都能順利瀏覽，不會有手機與PC的網址不同的問題，在 nav.lbi 裡也包含了其他的 lbi
nav.lbi
以下列出了在 nav.lbi 包含的樣板檔
categories.lbi
article_category_tree.lbi
nav_middle.lbi
nav_top.lbi
member_info.lbi
在修改之前我先把下列檔案的 1 都去掉，page_footer1、page_header1 改為 page_footer、page_header，這樣才不會相同的檔案要編輯兩次
exchange_list.dwt <!-- #BeginLibraryItem "/library/page_footer1.lbi" --> => <!-- #BeginLibraryItem "/library/page_footer.lbi" --> user_passport.dwt <!-- #BeginLibraryItem "/library/page_header1.lbi" --> => <!-- #BeginLibraryItem "/library/page_header.lbi" --> flow.dwt <!-- #BeginLibraryItem "/library/page_header1.lbi" --> => <!-- #BeginLibraryItem "/library/page_header.lbi" --> <!-- #BeginLibraryItem "/library/page_footer1.lbi" --> => <!-- #BeginLibraryItem "/library/page_footer.lbi" -->
底下是編輯後的 page_header.lbi 的程式碼
為了日後方便維護，只有多頁共用的樣式設定才會放在 style.css 內
LOGO圖片使用透明的PNG格式，放在自訂的 public/images 目錄裡
導航欄部分是為了代碼容易閱讀，因此獨立出來再以 {include file='library/nav.lbi'} 的方式引入
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.logo {
max-width: 90%;
max-height: 50px;
}
.shop_notice {
color: #620053;
line-height: 3;
}
.shop_notice a, .bi-hospital a {
color: #620053;
text-decoration: none;
}
.shop_notice a:hover, .bi-hospital a:hover {
color: #34022c;
}
@media screen and (min-width:769px) {
.cart_info {
width: 27%;
top: 5px;
}
.ur_here {
width: 72.5%;
}
}
@media screen and (max-width:769px) {
.cart_info {
width: 40%;
bottom: 50px;
}
.ur_here {
width: 90%;
}
}
.cart_info {
background-color: #620053;
position: absolute;
right: 0;
line-height: 40px;
}
.cart_info:hover {
background-color: #34022c;
}
.search {
color: #620053;
line-height: 49px;
cursor: pointer;
position: relative;
display: inline-block;
}
.search em {
font-size: 1rem;
color: #fff;
position: absolute;
top: -3px;
left: 3px;
}
.search:hover {
color: #34022c;
}
#search {
display: none;
position: absolute;
left: 0;
}
</style>
<a name="top"></a>
<div id="side" class="navbar-fixed-top">
<div id="logo" class="text-center">
<a href="index.php">
<img src="{$public}images/logo.png" alt="LOGO" class="logo" />
</a>
</div>
{include file='library/nav.lbi'}
</div>
<a title="{$lang.gotop}" id="gotop" href="javascript:;">
<div><i class="bi bi-caret-up-square-fill bi-0 bi-4x"></i></div>
</a>
<div class="container-fluid" id="main">
<header class="">
<div class="search float-start" onclick="$('#search').toggle('slow');">
<i class="bi bi-search-heart-fill bi-2x"><em>搜</em></i>
</div>
<div id="search" style="width: 250px;">
<!-- 搜索框 -->
{include file='library/search.lbi'}
</div>
<div id="ur_here" class="text-overflow ur_here"></div>
<div class="cart_info text-end">
<!-- #BeginlibraryItem "/library/cart.lbi" -->
<div class="cart" id="ECS_CaRTINFO"> {insert name='cart_info'} </div>
<!-- #EndlibraryItem -->
</div>
</header>
<script>
var pname = '{$pname}';
var shop_notice = '{$shop_notice}';
var page_title = '{$page_title}';
var ur_here = '{$ur_here}';
var home = '<a href="index.php"><i class="bi bi-hospital bi-3x bi-lr"></i></a>';
</script>
整個頁首共用於所有頁面，為了盡量在寬度有限的移動設備上，也能展示出與PC頁面接近的區塊，最終決定以側邊欄的方式呈現，當然這是我個人的風格，你應該也有自己的做法，從下圖中可以看出我將它分成六個部分，第六部分是屬於 index 的範圍
1、自訂義導航欄：{include file='library/nav.lbi'} 內容包含LOGO、商品分類、文章分類、中間導航、頂部導航、會員操作等區塊的整合，使用多級選單呈現...
2、商品搜索框：平常是隱藏的，當點擊放大鏡 icon 後便會顯示或隱藏
3、目前位置：在首頁時會顯示網站公告，非首頁則顯示目前頁面位置
4、購物車資訊：平常顯示購物車數量，游標移至上方則顯示購買商品清單，點擊則進入結帳頁面
5、首頁主廣告：支援手指左右撥動換圖，可根據螢幕寬度顯示不同圖片
6、首頁上架資訊：虛擬銷量是4.X板新增的功能，可在後台設置，當點擊圖片後會以燈箱開啟原圖
點擊圖片可以放大檢視
點擊圖片可以放大檢視
從上圖可看出雖然整個頁首部分在不同裝置上排版略有不同，但可操作功能並無差異，這就是響應式模板的優點，對管理者來說節省了大量的時間與成本，對消費者來說使用任何設備都能順利瀏覽，不會有手機與PC的網址不同的問題，在 nav.lbi 裡也包含了其他的 lbi
nav.lbi
<link rel="stylesheet" type="text/css" href="{$public}ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="{$public}ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<link rel="stylesheet" type="text/css" href="{$public}ddlevelsfiles/ddlevelsmenu-mobile.css" />
<style type="text/css">
.caption {
background-color: rgba(98, 0, 83, 0.8);
color: orange;
font-size: 1.1rem;
font-weight: 700;
}
</style>
<script>
var dir = '{$public}';
</script>
<script type="text/javascript" src="{$public}ddlevelsfiles/ddlevelsmenu.js"></script>
<div id="ddsidemenubar" class="markermenu">
<ul>
<!--{if $categories} 產品分類-->
<li class="caption">
<i class="bi bi-minecart-loaded"></i>{$lang.goods_category}
</li>
{include file='library/categories.lbi'}
<!--{/if} 商品分類-->
<!-- {if $article_categories} 文章分類-->
<li class="caption">
<i class="bi bi-pencil-square"></i>{$lang.article_cat}
</li>
{include file='library/article_category_tree.lbi'}
<!-- {/if} 文章分類 -->
<!-- {if $navigator_list.middle} 中間導航-->
{include file='library/nav_middle.lbi'}
<!--{/if} 中間導航-->
<!-- {if $navigator_list.top}特價訊息 -->
<li>
<a href="#" rel="ddsubmenuside3">
<i class="bi bi-tags-fill"></i>{$lang.special_offer}
</a>
</li>
<!-- {/if}特價訊息 -->
<span id="ECS_MEMBERZONE">
{* ECSHOP 提醒您：根據會員id來呼叫member_info.lbi顯示不同的界面 *}
{insert name='member_info'}
</span>
</ul>
</div>
<a class="animateddrawer" id="ddsidemenubar-mobiletoggle" href="#">
<span></span>
</a>
<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar")
</script>
<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">
</ul>
<ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">
{include file='library/nav_top.lbi'}
</ul>
以下列出了在 nav.lbi 包含的樣板檔
categories.lbi
<!--{foreach from=get_categories_tree() item=cat name=catename }-->
<li>
<a href="<!--{if $cat.cat_id}-->javascript:;<!--{else}-->{$cat.url}<!--{/if}-->"<!--{if $cat.cat_id}--> rel="goods{$cat.cat_id}"<!--{/if}-->>
<i class="bi bi-<!--{if $cat.cat_id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>{$cat.name|escape:html}
<!--{if !$cat.cat_id}-->
<span class="goods_num">{insert name="cat_num" id=$cat.id}</span>
<!--{/if}-->
</a>
<!--{if $cat.cat_id}-->
<ul id="goods{$cat.cat_id}" class="ddsubmenustyle blackwhite">
<!--{foreach from=$cat.cat_id item=child name=childname}-->
<li>
<a href="<!--{if $child.cat_id}-->javascript:;<!--{else}-->{$child.url}<!--{/if}-->">
<i class="bi bi-<!--{if $child.cat_id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>{$child.name|escape:html}
<!--{if !$child.cat_id}-->
<span class="goods_num">{insert name="cat_num" id=$child.id}</span>
<!--{/if}-->
</a>
<!--{if $child.cat_id}-->
<ul>
<!--{foreach from=$child.cat_id item=children name=childrenname}-->
<li>
<a href="{$children.url}">
<i class="bi bi-<!--{if $children.cat_id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>{$children.name|escape:html}
<!--{if !$children.cat_id}-->
<span class="goods_num">
{insert name="cat_num" id=$children.id}
</span>
<!--{/if}-->
</a>
</li>
<!--{/foreach}-->
</ul>
<!--{/if}-->
</li>
<!--{/foreach}-->
</ul>
<!--{/if}-->
</li>
<!--{/foreach}-->
article_category_tree.lbi
<!--{foreach from=$article_categories item=cat}-->
<li>
<a href="<!--{if $cat.children.id}-->javascript:;<!--{else}-->{$cat.url}<!--{/if}-->"<!--{if $cat.children.id}--> rel="article{$cat.children.id}"<!--{/if}-->>
<i class="bi bi-<!--{if $cat.children.id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>
{$cat.name|escape:html}
<span class="article_num">{insert name="cat_num" id=$cat.id table=article}</span>
</a>
<!-- {if $cat.children} -->
<ul id="article{$cat.children.id}" class="ddsubmenustyle blackwhite">
<!--{foreach from=$cat.children item=child}-->
<li>
<a href="{$child.url}">
<i class="bi bi-<!--{if $child.id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>
{$child.name|escape:html}
<span class="article_num">
{insert name="cat_num" id=$child.id table=article}
</span>
</a>
</li>
<!--{/foreach}-->
</ul>
<!-- {/if} -->
</li>
<!--{/foreach}-->
nav_middle.lbi
<!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav key=key} -->
<!-- {if $nav.name eq '首頁'} -->
{assign var=bi value=home}
<!-- {elseif $nav.name eq '留言板'} -->
{assign var=bi value=chat-dots-fill}
<!-- {elseif $nav.name eq '聯絡我們'} -->
{assign var=bi value=telephone-forward-fill}
<!-- {elseif $nav.name eq '部落格'} -->
{assign var=bi value=edit-2-fill}
<!-- {elseif $nav.name eq '討論區'} -->
{assign var=bi value=chat-left-quote-fill}
<!-- {else} -->
{assign var=bi value=basket-fill}
<!-- {/if} -->
<li>
<a href="{$nav.url}"<!-- {if $nav.opennew eq 1} --> target="_blank"<!-- {/if} --><!-- {if $nav.active eq 1} --> class="active"<!-- {/if} -->>
<i class="bi bi-{$bi}"></i>{$nav.name}
</a>
</li>
<!-- {/foreach} -->
nav_top.lbi
<!-- {foreach name=nav_top_list from=$navigator_list.top item=nav key=key} -->
<!-- {if $nav.name eq '選購中心'} -->
{assign var=bi value=shop}
<!-- {elseif $nav.name eq '團購商品'} -->
{assign var=bi value=people-fill}
<!-- {elseif $nav.name eq '奪寶奇兵' or $nav.name eq '限時搶購'} -->
{assign var=bi value=alarm-fill}
<!-- {elseif $nav.name eq '優惠活動'} -->
{assign var=bi value=tag-fill}
<!-- {elseif $nav.name eq '報價單'} -->
{assign var=bi value=bar-chart-steps}
<!-- {else} -->
{assign var=bi value=shop}
<!-- {/if} -->
<li>
<a href="{$nav.url}"<!-- {if $nav.opennew eq 1} --> target="_blank"<!-- {/if} --><!-- {if $nav.active eq 1} --> class="selected"<!-- {/if} -->>
<i class="bi bi-{$bi}"></i>{$nav.name}
</a>
</li>
<!-- {/foreach} -->
member_info.lbi
<div id="append_parent"></div>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- {if $user_info} -->
<li>
<a href="user.php" title="{$lang.user_center}">
<i class="bi bi-person-video2"></i>{$user_info.username}
</a>
</li>
<li>
<a href="user.php?act=logout">
<i class="bi bi-box-arrow-left"></i>{$lang.user_logout}
</a>
</li>
<!-- {else} -->
<li>
<a href="user.php">
<i class="bi bi-box-arrow-in-right"></i>{$lang.label_login}
</a>
</li>
<li class="menu-item">
<a href="user.php?act=register">
<i class="bi bi-person-plus-fill"></i>{$lang.free_regist}
</a>
</li>
<!-- {/if} -->
DEMO
如果你對ECSHOP 響應式模板DIY-頁首有任何問題請到討論區發帖。