最新文章

頁: « 1 2 3 4 5 6 7 8 9 10 »
61
LOGO與會員資訊、商品搜索我把他分成左右兩邊,當然你也可以分成上下,會員資訊和商品搜索之間有一列自訂連結,是<strong>模版</strong>本來就有的,連結上的 ICON 在小螢幕時隱藏起來,避免太太高,另外由於寬度關係,文字的顯示長度也必須控制



補充一下:BootStrap 在 768px 以下時寬度都是100%,因此在指定元素尺寸時,盡量使用百分比而不是固定像素,對於圖片的高度或寬度只需指定其中一種,css會自動根據比例計算,這樣可以防止圖片變形...

LOGO與會員資訊、商品搜索是新的一列,理所當然用一個 row 包裹起來,LOGO在超小螢幕佔4格寬,小、中、大螢幕佔3格寬,剩下的寬度分給會員資訊、自訂連結、商品搜索使用,由於不論何種寬度都不會超過12格,也就沒有產生新列的問題,LOGO 將會一直顯示在左邊,會員資訊、自訂連結、商品搜索會一直顯示在右邊
代碼: [選擇]
    <div id="pageHeader" class="row">
        <div id="logo" class="col-xs-4 col-sm-3">
            LOGO...
        </div>
        <div id="mainNav" class="col-xs-8 col-sm-9">
            會員資訊、自訂連結、商品搜索...
        </div>
    </div>

會員資訊、自訂連結和商品搜索也將分兩列。預設會顯示在LOGO的右邊,經過重新給了 row 後原本是 container 的 9格寬度,此時會將這9格又分成12格,會員資訊、自訂連結裡加了 Font Icon,這些 Icon 都可以用文字的樣式,例如顏色、大小、陰影...還可以用 fa-Xx 指定大小,例如:class="fa fa-home fa-3x 可以讓 home 的圖示放大3倍,另外在超小螢幕時用 class="hidden-xs" 來隱藏  Icon 或過長的文字...
代碼: [選擇]
    <div id="mainNav" class="col-xs-8 col-sm-9">
        <div class="row">
            <div class="col-md-12">
                <li id="ECS_MEMBERZONE" class="member">{insert name='member_info'}</li>
                <li><a href="flow.php"><span  class="hidden-xs"><i class="fa fa-shopping-cart fa-3x"></i><br></span>購物車</a></li>
                <li><a href="article.php?id=1"><span  class="hidden-xs"><i class="fa fa-question-circle fa-3x"></i><br></span>購物說明</a></li>
                <li><a href="search.php?intro=new"><span  class="hidden-xs"><i class="fa fa-bell fa-3x"></i><br></span>新品<span class="hidden-xs">上架</span></a></li>
                <li><a href="index.php"><span  class="hidden-xs"><i class="fa fa-home fa-3x"></i><br>回</span>首頁</a></li>
            </div>
        </div>
    </div>



商品搜索框用來讓訪客快速找到想要的商品,本來和導航欄一起,我把他移出來,這也是獨自一列因此用 row 包著,input-group+form-control+input-group-addon 使輸入框和按鈕成為一體,placeholder可以給輸入框一些提示文字,required="required"限制輸入框必填才能提交,這是html5的功能,不過感覺html5像現在的政治一樣亂,有興趣的人自行上網學習
代碼: [選擇]
    <div class="row search">
        <form id="searchForm" name="searchForm" method="post" action="search.php" class="form">
            <div class="col-sm-2 col-md-3"></div>
            <div class="col-sm-10 col-md-9">
                <div class="input-group">
                    <input name="keywords" class="form-control" placeholder="請輸入關鍵字" required="required" type="text" id="keyword" />
                    <span class="input-group-addon"><button style="<span class="kwd">border:none;<span class="kwd">background:transparent;<span class="kwd">font-size:<span class="lit">17px;" title="搜索"><i class="fa fa-search"></i></button></span>
                </div>
            </div>
        </form>
    </div>

到目前為止,我的模板長這樣,沒有輸入文字就提交搜索是不行的


現在在頁面的空白處點擊右鍵。選擇『檢視原始碼』,如果沒有紅字。表示程式碼正確無誤,否則請先把錯誤處理好再繼續...

62
ECShop 模板修改、調整 / 求救!! 會員註冊突然不能使用!!請幫幫我~
« 最新文章 由 vault13 七月 17, 2019, 03:14:49 下午 »
會員註冊出現500錯誤,小弟我找不出問題,請各位大大幫忙看看是哪邊出錯了,感謝阿!
隨便打一個會員名

只要游標一碰到網頁其他地方,就跳出這個錯誤

chrome裡的報錯訊息,

這些.js無法執行,但程式碼並沒有錯誤的地方阿



硬是填滿註冊條件送出的話,會員畫面是報錯500的空白頁面~


請幫幫我,一個頭兩個大阿,感謝各位大大!
63
ECSHOP 響應式設計的製作 / 5、ECSHOP響應式網頁製作-header 頂部導航
« 最新文章 由 andy 七月 16, 2019, 06:34:53 下午 »
本教學以 lativ 模板作為依據,不太可能與你模板相同,因此只能當作參考,每個模板都有自己的布局方式,只要能掌握 BootStrap 的特性就能隨心所欲,因為響應式網頁是為了增加對移動設備(如:手機、平板)的友好度而設計,但移動設備載入速度遠不及PC,因此除了商品圖片無法避免外,應該盡量能不用圖片最好,或是使用 SVG 格式的向量圖...

整個 header 的布局就像圖中看到的一樣,首先要用
代碼: [選擇]
<header class="container">
    HEADER....
</header>
包裹著整個 heade 區域這樣才有響應式效果,如果你希望全寬顯示,那就改為:
代碼: [選擇]
<header class="container-fluid">
    HEADER....
</header>
這樣你的 header 區域就會隨著瀏覽器的寬度自動響應了

接下來就是在 header 區域加入內容,第一行我想加入頂部導航,原來的程式碼只加上 class="row" 表示這是一列,並且佔滿12欄寬, id="topNav" 是原來的css設定予以保留,你也可以增減自己的css,當然這根據每套模板的設計而有所差異,你只能根據需求更改html結構,以 { 和 } 包裹的程式碼是 SMARTY 標籤,不可以更改或刪除,否則可能出錯或不顯示
代碼: [選擇]
<!-- {if $navigator_list.top} -->
<div id="topNav" class="row">
    <div class="col-md-12">
      <!-- {foreach name=nav_top_list from=$navigator_list.top item=nav} -->
      <a href="{$nav.url}">{$nav.name}</a>
      <!-- {if !$smarty.foreach.nav_top_list.last} -->
      .
      <!-- {/if} -->
      <!-- {/foreach} -->
    </div>
</div>
<!-- {/if} -->

你或許想讓頂部導航靠右顯示,並在最左側顯示設社群按鈕或其他訊息,那麼可以將連分成兩欄,像這樣:
代碼: [選擇]
<div class="row">
    <div id="topButton" class="col-sm-4 col-md-3">
        社群按鈕或其他訊息...
    </div>
    <div id="topNav" class="col-sm-8 col-md-9 text-right">
        頂部導航...
    </div>
</div>
社群按鈕或其他訊息在小螢幕時佔了4格寬度,中、大螢幕佔了3格寬度,超小螢幕將自成一列,頂部導航在小螢幕時佔了8格寬度,中、大螢幕佔了9格寬度,超小螢幕也會自成一列,text-right 可以讓文字靠右顯示

關於社群按鈕你可以用 Font Awesome 提供的字型 ICON,好處是縮放不失真樣式控制如字體搬容易,前題是你已經安裝了 Font Awesome,如果還沒安裝請參考 3、ECSHOP 響應式網頁製作-引入 BootStrap 響應式前端框架的作法

至於 Font Awesome 字型 ICON 的基本使用,請 進入此頁面,從眾多的 ICON 中點擊你要使用的 ICON 旁的文字,語法會顯示在瀏覽器右上角的黑框裡,你只需點擊右鍵複製起來,再貼到網頁中即可,例如:
代碼: [選擇]
<a href="https://www.Facebook.com/" target="_blank" title="Facebook"><i class="fa fa-Facebook-square"></i></a>

關於 Font Awesome 的詳細用法請參考 官方範例
64
ECSHOP 響應式設計的製作 / 4、ECSHOP響應式網頁製作-BootStrap 簡單布局
« 最新文章 由 andy 七月 16, 2019, 04:07:25 下午 »
ECSHOP 基本的模板檔(DWT)大約36個,加上樣板檔(LBI)約58個,如果再將DWT中的某些區塊再抽出來成為LBI,那肯定超過100個,因此修改為響應式網頁會花很多時間,在過程中不可能針對每個頁面詳細說明,只能針對幾個常用頁面提供個人的作法,或許不是很正確,如果你有更好的作法,歡迎指正,感謝萬分!

header 是每個頁面的頂部,通常是主導航以上的區域,由 page_header.lbi 負責,因為共用於每個網頁,因此你只需修改  page_header.lbi ,整個網站的網頁頂部就跟著改變,現在用瀏覽器(建議 FireFox) 開啟本機的網站首頁,用文字編輯器(建議 sublime  Text) 開啟 page_header.lbi,在 page_header.lbi 頭尾加入
代碼: [選擇]
<header class="container"> 和 </header>


之後編輯 style.css,將檔案中所有關於寬度的樣式設定全部刪除,因為寬度都由 BootStrap 控制,存檔後重新整理頁面,先不管凌亂的排版,試著手動縮放瀏覽器的寬度,在縮放過程中你會看到主區域寬度的變化....

我已經事先做好的 header,所以比較整齊,這部份在下一篇會說明,如果背景和主區域同色,你可以加上背景色以便清楚看到主區域的變化,例如:
代碼: [選擇]
    <style type="text/css">
        body {background: #e3e3e3;}
        .container{background: #FFF;}
    </style>


上面的動作主要是在次確認前面的準備工作都正常無誤,如果結果不同,後續可能造成更多問題,浪費更多時間,因此務必仔細檢查,以利後續作業...

以下約略說一下 BootStrap 的基本排版方式, BootStrap 預設 body 背景是白色的,BootStrap 把瀏覽器的寬度分為四種,xs代表小於 768px 或超小螢幕、sm代表 >=768px 或小螢幕、md代表 >=992px 或中螢幕、lg代表 >=1200px 或大螢幕
代碼: [選擇]
<div class="container">
    <div class="row">
    ...
    </div>
</div>

用來控制主區域的響應寬度,也就是說當瀏覽器的寬度小於768像素時,container 的寬度是100%(xs),當瀏覽器的寬度大於等於768像素時,container 的寬度是750px(sm),當瀏覽器的寬度大於等於992像素時,container 的寬度是970px(md),當瀏覽器的寬度大於等於1200像素時,container 的寬度是1170px(lg),如果你想任何尺寸的螢幕主區域都是 100% 的話,請使用:
代碼: [選擇]
<div class="container-fluid">
...
</div>

row 表示一列,包裹在 container 或 container-fluid 裡面(container 和 container-fluid 不可嵌套),若以 ECSHOP 的結構來說,可能類似這樣:
代碼: [選擇]
<header class="container">
    <div id="topNav" class="row">
        頂部導航...
    </div>
    <div id="pageHeader" class="row">
        <div id="logo" class="col-xs-4 col-sm-3">
            LOGO
        </div>
        <div id="mainNav" class="col-xs-8 col-sm-9">
            <li id="ECS_MEMBERZONE" class="member"></li>
                自訂 ICON...
            <div class="col-sm-12 search">
                搜索...
            </div>
        </div>
    </div>
    <nav class="navbar navbar-inverse" role="navigation">
        中間導航...
    </nav>
</header>
<div class="container">
    <div class="row">
        主區域...
    </div>
</div>
<footer class="container">
    <div class="row">
        頁尾...
    </div>
</footer>

每列最多分成12格,可以用如 :
代碼: [選擇]
<div class="col-sm-6 col-md-5">A</div>
<div class="col-sm-6 col-md-7">B</div>
上面的例子表示:在小螢幕時A、B各佔6格寬,A+B=12 沒超過每列12格的限制,所以A、B會並排顯示在同一列,在中螢幕時A佔5格寬、B佔7格寬,A+B=12 也沒超過每列12格的限制,所以A、B也會並排顯示在同一列,但在超小螢幕時並沒有指定A、B所佔格寬,因此會套用預設值 col-xs-12,此時 A+B=24 已經超過每列12格的限制,所以A、B會分成上下兩列顯示,至於超大螢幕也沒指定,將會繼承中螢幕的設定

每個 col 左右各有 15px 的 padding,因此底下的例子會讓內容與主區域邊框有點間距
代碼: [選擇]
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-5">A</div>
        <div class="col-sm-6 col-md-7">B</div>
    </div>
</div>

其他關於 BootStrap 更詳細的說明請至:https://v3.bootcss.com/css/
65
載入 BootStrap 可以用CDN的方式也可以將檔案放在自己的空間,我是放在自己的空間然後載入檔案,若要用CDN的方式就不用將檔案放在自己的空間裡,直接引用即可,不管你使用的是哪種方式,請先將DOCTYPE改成html5,作法如下:
將每個 dwt 標頭前四行
代碼: [選擇]
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns = "https://www.w3.org/1999/x html " >   
<head>
<meta  http-equiv = "Content-Type"  content = "text/ html ; charset=utf-8"  />
改成
代碼: [選擇]
<!DOCTYPE html>
< html  lang = "zh-tw" >
<head>
<meta  charset = "UTF-8"  />
<meta  name = "viewport"  content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
提示:使用 EditPlus 的多檔案取代功能會比較方便...


接著將 dwt 內的 <link href="{$ecs_css_path}" rel="stylesheet" type="text/css">(有些模板不是用 smarty 變數)改成
代碼: [選擇]
<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 "  />
提示:使用 EditPlus 的多檔案取代功能會比較方便...


<link href="{$tpl}css/font-awesome.min.css" rel="stylesheet">
雖然 BootStrap 也有自己的 Font Icon,但我用不習慣
Font Awesome 是一款很流行且方便的向量字體圖示工具,我一直在使用,如果你不使用就可以忽略這行
如果你要使用 Font Awesome,請先連結到 下載最新版的 Font Awesome 壓縮檔到你電腦中


解壓縮檔案上傳 css、fonts 兩個資料夾到模板目錄


ICON 預覽和語法獲取網站應用展示: https://we-shop.net/fa/

編輯模板的 library/page_footer.lbi 檔案最後加入
代碼: [選擇]
<script  type = "text/javascript"  src = "{$tpl} js / jquery -3.1.1.min. js " ></script>
<script  type = "text/javascript" >var jq3 =jquery .noConflict (); </script>
<script  type = "text/javascript"  src = "{$tpl} js / BootStrap .min. js " ></script>
<script  type = "text/javascript"  src = "{$tpl} js /custom. js " ></script>
custom.js 是自訂的js檔案,用來放置模板用到的  javasscript,如果js目錄中沒有這個檔案請自行建立

最後編輯 iincludes/lib_main.php 約 1673 行,找到
代碼: [選擇]
$smarty ->assign ('searchkeywords' , $searchkeywords );
在下一行加入:
代碼: [選擇]
$smarty ->assign ('tpl' , 'themes/' .$GLOBALS ['_CFG' ]['template' ].'/' ;);

到此為止,ECSHO 響應式網頁製作的準備工作已大功告成,在開始修改頁面之前,建議你再次檢查整個網站操作是否正常,所有修改動作都在本機進行,千萬不要動到正常運作中的網站,以免遭遇不測...
66
ECSHOP 響應式設計的製作 / 2、ECSHOP響應式網頁製作-檢查是否可用 jquery
« 最新文章 由 andy 七月 16, 2019, 02:41:12 下午 »
因為大部分響應式前端框架都必須依賴  jquery,因此你的網站也必須能用 jquery,才能順利使用 BootStrap 來製作響應式網頁,這篇教學主要是確認你的網站能順利執行  jquery,有些模板本身已經內建或修改支援 jquery 庫,因此必須先確認,否則可能產生版本衝突問題,請在模板目錄的  library/page_footeer.lbi 最後加入:
<span style="color: rgb(255, 0, 0);">
代碼: [選擇]
<script type="text/javascript">
alert($);
</script>
  存檔後切換至任一商品詳情頁,如果彈出類似下圖視窗且購物流程正常,表示你的模板已經使用 jquery 庫,可以略過ECSHOP與jquery的衝突問題


如果完全沒反應,請先參考
67
ECSHOP 響應式設計的製作 / 1、ECSHOP響應式網頁製作-環境與工具準備
« 最新文章 由 andy 七月 16, 2019, 02:14:10 下午 »
目前光台灣手機持有人口約 1330  萬,這還不包括其他的移動設備(如:平板、筆電...),在國人消費習慣已經改變的同時,如果你的ECSHOP網店還不能對各種移動設備友好的支持,那將會造成莫大的損失,比較明顯的是搜索排名持續下滑,曝光率越來越低,收錄量大不如前,直接影響的當然是訂單,不要以為你的客戶已經習慣了這樣的操作方式,或是你的商品夠好,當老客戶逐漸減少而新客戶不再增加時才驚覺有意,通常已經為時已晚...

ECSHOP是對岸開發的,使用上也比較接近東方人的操作習慣,再加上功能齊全,不需再投資太多的預算來擴充功能,因此在亞洲使用的人很多,有些網站說ECSHOP因為少人用,所以模組不多,其實剛好相反,ECSHOP把眾多能已經都內建了,自然就不需依賴第三方模組了,反而是那些模組豐富的程式,使用者必須安裝來自三教九流的各式模組,才能勉強符合所需,而且多數重要模組都是付費的,無形中也增加建置成本,這些都還算小事,比較頭痛的是維護問題,模組裝得越多,維護的時間就越長,成本就越高,隨著程式一直更新,有些模組可能因中斷升級而導致某項功能失效,甚至迫使網暫停擺...

ECSHOP雖然不算很完美,官方也已經趨向雲端(你不覺得很像無名小站2.0版)發展,但在沒有出現比ECSHOP更好(各方面)的程式前,ECSHOP仍是個人建置電商平台的不二選擇,遺憾的是,ECSHOP無法直接使用  jquery,因為大部分 響應式前端框架都必須依賴  jquery,因此必須稍加修改才能使用,再後續的文章中將會陸續提供如何用ECSHOP+BootStrap來製作 響應式網頁,因此在開始之前,你必須先準備好環境與工具

1、伺服器環境: 安裝在本機可執行  php+MySql  的環境,並已安裝好ECSHOP(與你網站相同版本與模板)
2、程式碼編輯器:例如: SubLime Text,EditPlus....
3、瀏覽器:建議用 FireFox 並安裝 FireBug 套件

另外你必須對css有所聊解,我不是專科因此疏漏難免,建議你下載附件的css3手冊備用!
過程中如有不妥、錯誤或您有更好的方式,請勿藏私,歡迎提出分享讓更多人受惠..

如果無法順利開啟CHM,請按照下圖操作:
68
ECSHOP 響應式設計的製作 / ECSHOP 如何正確加入連結
« 最新文章 由 andy 七月 16, 2019, 01:40:36 下午 »
在 ECSHOP 中有些人還無法正確使用連結,因此有必要說明一下,因為 ECSHOP 使用的是 SMARTY 模板引擎,因此模板目錄是從 themes 開始的,若使用相對目錄很容易發生路徑不正確而找不到資源的問題,使用含有 http:// 的絕對連結雖然能準確的連結資源,卻會為後續維護帶來困擾,這是加裝 SSL 就使一個例子...

具體作法如下:
一、在 ECSHOP 中只要不是外部連結的資源(圖片、js、css),不可使用絕對連結,即使是外部連結的資源(圖片、js、css)也應盡量下載至網站中調用
二、模板可能有許多檔案會共用,如 BootStrap、font-awesome、ddlevelsfiles、jquery.....第三方插件,建議放置同一目錄方便共用,除可減少重複檔案,也能準確的連結資源
三、在 ECSHOP 中的自訂導航欄,只要不是外部連結的網站,應使用相對位置並省略網域名稱,例如:留言板 只需寫 messages.php 即可而不是 https://abd.com.tw/messages.php


四、以上是因為網頁原始碼內混用 HTTP 的資源,網站使用 SSL 的時候,站內的圖片、js、css 等資源必須全部採用 https:// 加密連線才會符合標準,所以若網頁上的圖片、js、css、外部 js、廣告 js 的來源是 https://
就會讓網站變成非綠燈的鎖頭,相關說明請參見 https://developer.mozilla.org/zh-TW/docs/Security/MixedContent

您可以使用 https://www.whynopadlock.com 來檢查網頁是否有 https:// 的資源
也請參考以下網址的說明進行修正
https://developer.mozilla.org/zh-TW/docs/Security/MixedContent/How_to_fix_website_with_mixed_content
69
ECSHOP 響應式設計的製作 / SweetAlert 漂亮的對話框中文教學
« 最新文章 由 andy 七月 16, 2019, 11:28:14 上午 »
通過引用必要的檔案來初始化插件 :
在 <head>和</head> 之間引用必要的檔案: 下載檔案
代碼: [選擇]
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">



漂亮的對話視窗使用範例

基本訊息
代碼: [選擇]
swal("在這裡輸入訊息文字!")


標題與下方訊息文字
代碼: [選擇]
swal("在這裡輸入標題文字", "在這裡輸入訊息文字!")


成功訊息
代碼: [選擇]
swal("在這裡輸入標題文字", "在這裡輸入訊息文字!", "success")


警告訊息並附帶確認按鈕
代碼: [選擇]
swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
[i]function[/i](){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});


通過傳遞參數,您可以執行“取消”.
代碼: [選擇]
swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
[i]function[/i](isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});


自訂圖示
代碼: [選擇]
swal({
  title: "Sweet!",
  text: "Here's a custom image.",
  imageUrl: "images/thumbs-up.jpg"
});


使用html訊息
代碼: [選擇]
swal({
  title: "html <small>Title</small>!",
  text: "A custom <span style="color:#F8BB86">html<span> message.",
  html: true
});


限時自動關閉訊息
代碼: [選擇]
swal({
  title: "Auto close alert!",
  text: "I will close in 2 seconds.",
  timer: 2000,
  showConfirmButton: false
});


取代「提示」功能(文字輸入)
代碼: [選擇]
swal({
  title: "An input!",
  text: "Write something interesting:",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top",
  inputPlaceholder: "Write something"
},
[i]function[/i](inputValue){   if (inputValue === false) return false;      if (inputValue === "") {     swal.showInputError("You need to write something!");     return false   }      swal("Nice!", "You wrote: " + inputValue, "success"); });


AJAX請求範例
代碼: [選擇]
swal({
  title: "Ajax request example",
  text: "Submit to run ajax request",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
[i]function[/i](){
  setTimeout([i]function[/i](){
    swal("Ajax request finished!");
  }, 2000);
});


更多對話方塊
代碼: [選擇]
<script type="text/javascript">
    function warning_confirm(){
        swal({
        title: "你確定嗎?",
        text: "檔案一經刪除後將無法恢復!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "確定刪除!",
        closeOnConfirm: false
        },
        function(){
        swal("已經刪除", "檔案已經成功刪除!", "success");
        });
    }
    function warning_cancel(){
        swal({
        title: "你確定嗎?",
        text: "檔案一經刪除後將無法恢復!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "確定刪除!",
        cancelButtonText: "取消!",
        closeOnConfirm: false,
        closeOnCancel: false
        },
        function(isConfirm){
        if (isConfirm) {
            swal("已經刪除!", "檔案已經成功刪除!", "success");
        } else {
                swal("已經取消!", "檔案已經取消刪除!", "error");
        }
        });
    }
    function custom_icon(){
        swal({
        title: "we-shop.net",
        text: "ECSHOP,V2.7.3 繁體中文版,<a href="https://weshop.tw/" target="_blank">響應式</a>模板,<a href="https://www.we-shop.net/host.php" target="_blank"> 虛擬主機</a>,網路購物,Responsive Web Design,免費安裝,模板,插件,模組",
        imageUrl: "/video/logo.gif"
        });
    }
    function message_html(){
        swal({
        title: "we-shop.net <small>ECSHOP 快速支援全年無休</small>!",
        text: '<a class="article" href="article-314-27%E3%80%81Font+Awesome+%E4%BD%BF%E7%94%A8%E6%95%99%E5%AD%B8.html" title="Font Awesome 使用教學"> Font Awesome 使用教學 </a>',
        html: true
        });
    }
    function timers(){
        swal({
        title: "視窗自動關閉!",
        text: "兩秒鐘後自動關閉!",
        timer: 2000,
        showConfirmButton: false
        });
    }
    function inputs(){
        swal({
        title: "請輸入訊息",
        text: "寫一些有趣的事情:",
        type: "input",
        showCancelButton: true,
        closeOnConfirm: false,
        animation: "slide-from-top",
        inputPlaceholder: "請輸入文字訊息"
        },
        function(inputValue){
        if (inputValue === false) return false;
        if (inputValue === "") {
            swal.showInputError("你太懶了,不可以空白!");
            return false
        }
        swal("很好!", "你輸入的是:" + inputValue, "success");
        });
    }
    function get_ajax(){
        swal({
            title: 'Ajax 請求',
            text: '提交執行AJAX請求!',
            type: 'info',
            showCancelButton: true,
            closeOnConfirm: false,
            showLoaderOnConfirm: true,
            }, function(){
            setTimeout(function() {
            swal('AJAX請求已經完成!');
            }, 2000);
        });
    }
</script>
70
ECShop 二次開發、PHP網站製作分享 / 如何讓 Ecshop 商品相冊圖片按順序排列
« 最新文章 由 andy 七月 15, 2019, 06:10:38 下午 »
很多人會遇到這種情況,當你在新增商品時,如果只上傳了商品圖是不會有問題的,但是如果同時上傳商品相冊圖片,前台的圖片順序可能大亂,
事後編輯商品追加的圖片也是一樣,要讓圖片按照你的意思順序顯示,可以對檔案稍作修改,方法如下:

    編輯 includes/lib_goods.php 約 726 之後找到
代碼: [選擇]
function get_goods_gallery($goods_id)
{
$sql = 'SELECT img_id, img_url, thumb_url, img_desc' .
' FROM ' . $GLOBALS['ecs']-&gt;table('goods_gallery') .

找到
代碼: [選擇]
    " WHERE goods_id = '$goods_id' LIMIT " . $GLOBALS['_CFG']['goods_gallery_number'];
改為
代碼: [選擇]
    " WHERE goods_id = '$goods_id' ORDER BY img_desc,img_id ASC LIMIT " . $GLOBALS['_CFG']['goods_gallery_number'];

    排序的依據可在圖片的描述欄位開頭以數字由小到大排列,如果圖片的描述欄位留空或數字一樣
則會按照圖片ID與就是上傳先後排列,除此之外,後台也需要修改,才會跟前台顯示一致:

編輯 admin/goods.php 約 388 行找到
代碼: [選擇]
/* 图片列表 */
$sql = "SELECT * FROM " . $ecs-&gt;table('goods_gallery') . " WHERE goods_id = '$goods[goods_id]' ";
改為

代碼: [選擇]
    /* 图片列表 */
        $sql = "SELECT * FROM " . $ecs-&gt;table('goods_gallery') . " WHERE goods_id = '$goods[goods_id]' ORDER BY img_desc,img_id ASC";


完成後存檔上傳
還是那句老話,修改前先備份檔案...
頁: « 1 2 3 4 5 6 7 8 9 10 »