零售業批貨技巧與 網拍架站創業訓練班 使用OpenCart (II) 建國科大資管系 饒瑞佶 2014/4
OpenCart前後台 前台 後台 http://127.0.0.1/store/ http://127.0.0.1/store/admin/ 如果有固定IP或是DNS，請取代127.0.0.1
後台管理 http://localhost/store/admin/ 帳密是在安裝時就設定的 有點危險，因為似乎大家都知道 對應資料庫內的user資料表
修改OpenCart內的檔案 修改設定檔案等最好不要用Windows內建的記事本 因為很多檔案都是用UTF-8編碼 建議使用UltraEdit或是Notepad++(本課程用)
修改admin後台路徑 Step1、用Notepad++開啟admin內的config.php
修改admin後台路徑 Step2、修改config.php內有admin的位置 假設改成mycart
修改admin後台路徑 Step3、修改原來目錄名稱為mycart
新後台 http://localhost/store/mycart/
後台管理 請使用安裝時設定的帳號密碼登入
OpenCart中文化
中文套件 http://www.opencart.com/index.php?route=extension/extension&filter_username=twcow.com
中文套件安裝 Step 1. 下載檔案並解壓縮，產生 2 個目錄 : catalog admin Step 2. 將上述 2 個目錄上傳到您的 OpenCart 網站目錄並覆蓋
Step 3.到 OpenCart 商店後台 [system] -> [localisation] -> [Language]
點擊 [Insert]
填寫這些內容 Language Name: Chinese Code: zh-TW Locale: zh,zh-tw,zh-tw.UTF-8,chinese Image: tw.png Directory: zh-TW Filename: zh-TW Status: Enabled Sort Order: 0
Step 4.到 OpenCart 商店後台 [system] -> [settings]
選擇商店後按 [Edit] 再到 [Local] 頁籤
將 Language(前台) 和 Administration Language(後台) 兩個選項都改為 Chinese
完成！ 中文介面
更改管理者密碼與新增使用者
先登入後台 系統管理管理員設定
設定新的資料(包含密碼)
新增使用者
先設定群組(功能權限)
群組設定
直接將可以使用的功能設定在群組上
新增[一般使用者]群組
可以設定權限群組與停權
被鎖定的就不能用
OpenCart系統設定 更改設定後 請不要忘記按Save保存設定
系統管理設定
請先進入後台 商店基本資料設定 系統管理(System)商店設置(Settings)
before
after
前台
Logo修改
SEO(Search Engine Optimization)
網站文字說明修改
網站的一些聲明都在這改 出現在首頁下方
可以用HTML語法加入YouTuBe
結果
OpenCart的設計結構
更多OpenCart檔案架構 \admin (已經改成mycart) 後台 \catalog 前台 \download 下載類商品存放位置(由程式控制,非直接複製檔案至此) \image 圖片檔 \install 安裝檔(安全起見，安裝完已刪除) \system 系統程式(PHP主程式) \.htaccess 網址改寫控制檔(SEO urls) \config.php 系統設定檔 \php.ini php相關設定
MVC+L模式 Model – 數據與資料庫等處理 View – UI介面 Controller – 程式碼 Language – 語系處理
前台 M: \catalog\model\ V: \catalog\view\ C: \catalog\controller\ L: \catalog\language\ 後台 M: \admin\model\ V: \admin\view\ C: \admin\controller\ L: \admin\language\ 要修改時就需要這個對應表 例如我要改前台的顯示，那就要找\catalog\view\
前台UI對應圖
前台UI對應圖
前台UI對應圖
前台UI對應圖
前台程式對應圖
前台程式對應圖
前台程式對應圖
前台程式對應圖
中文化不完全的改善
中文化不完全
mycart\language\zh-TW\common header.php 直接加入沒有的中英文對應就可以
新加兩個 $_['text_attribute'] = '商品屬性'; $_['text_attribute_group'] = '商品屬性類別';
result
小練習 text_design 版面 text_layout 規劃 text_banner 廣告管理
擴充模組基本模組Modules
已經安裝的 還沒有安裝的！
編排模組出現在版面位置
預設會員中心要出現在帳戶右邊
要讓會員中心出現在首頁左邊
怎麼做？
試試更多的..
廣告管理
三種廣告類型 Slideshow Carousel Banner
廣告與擴充模組有關係 廣告是透過擴充模組設定來決定顯示在那裡！
廣告與擴充模組有關係 設定廣告內容(系統管理內) 擴充模組中設定顯示方式 商品區廣告 首頁下方廣告區 首頁中間
新加入一個廣告
加入兩張圖
完成後記得按save 多個時會自動輪播
新增完成一個廣告
切換到擴充模組基本模組
選擇banner編輯
將剛新增的Android banner設定顯示方式
設定出現在首頁的左邊
result
小練習，請試試改成這樣！
設定版面上出現的區塊 所有版面都是區塊的組合 Layouts 設定版面上出現的區塊 所有版面都是區塊的組合
版面區塊 header left Content-top right content bottom
Layouts
以首頁為例
catalog\view\theme\default\template 以首頁為例 版面檔案存放的位置 前面路徑是 catalog\view\theme\default\template
你可以自己做一個版面來替換 使用Notepad++開啟
如果拿掉這些
Before delete
After delete
資料庫備份
備份的其實是 SQL指令
首頁加入浮動視窗
需要修改的檔案 catalog\view\theme\default\template\common\home.tpl
需要加入一段js與<div>
<DIV> 可以在DIV內加上自己需要的圖示與連結 <div id="floatlayer" style="position: absolute; top: 150px; background-color:#CCCCFF" > <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>
加入js(javascript)
js <script language="javascript"> <!-- lastScrollY=0; function rollimg(){ var varY = document.body.scrollTop; if (varY <= 0) { varY = document.documentElement.scrollTop; } percent=.1*(varY-lastScrollY); if(percent >0 ) percent=Math.ceil(percent); else percent=Math.floor(percent); var top = parseInt(document.getElementById("floatlayer").style.top); document.getElementById("floatlayer").style.top = (top += percent) + "px"; lastScrollY += percent; document.getElementById("floatlayer").style.left=(document.body.clientWidth/2+357)+"px"; window.setInterval("rollimg()",1); //--> </script>
result
如何加入圖片與超連結等 需要HTML語法 圖片位置 Image目錄底下 其他頁面的處理相同 但需要知道OpenCart的目錄結構