一、OPENCART 安裝 OPENCART簡介 OPENCART中文安裝包下載 MVC模式－Model View Controller OPENCART程式架構 OpenCart相對於MVC+L的程式位置 OpenCart主要目錄路徑 二、VQMOD安裝 VQMOD外掛驅動器安裝 三、主題安裝 主題套用實作-使用 Lexus Yourstyle 至管理者後台更換主題 四、語系安裝說明 語系安裝－路徑 語系安裝－本地化設定語言 五、版面規劃(路徑設定) 版面路徑設定 六、模組區塊位置-圖片模組 七、模組區塊位置-功能模組 八、外掛安裝-完整安裝包類型 安裝外掛實作 九、外掛安裝-VQMOD類型 十、外掛安裝-XML說明

1. OPENCART 購物平台開發實務
DAY1

2. 一、OPENCART 安裝

3. OPENCART簡介
• opencart和其它的購物車程式不同，市面上的購物車程
式大都使用現成的模版引擎來開發，而opencart則是基
於MVC+L的模式來作為開發的架構進而全新開發的一
套系統，所以程式碼相當輕巧，執行效率更是超越其它
購物程式，這樣 的架構和程式碼讓後續的程式開發人
員在編寫時更容易且清楚，程式和視覺設計分離,有利於
日後的維護,而有別於其它的MVC模式， opencart更加
入了語言層，能夠更輕鬆完成多語言的實現。
引用至http://ntcn.net/blog

4. OPENCART中文安裝包下載
• 繁體中文版下載
http://blog.dnono.com/opencart-chinese
• 外掛下載區
(其他語系的安裝包也可從這邊下載)
http://www.opencart.com/index.php?route=extensi
on/extension
• 前端開發工具-Sublime
http://www.sublimetext.com/2

5. MVC模式－Model View Controller
• Model：從字典裡查到的意思是指「模型」，但你並不
需要把他翻譯成中文，只需要把他看成一個專有名詞，
就像你學到新的詞語一樣。
• 可以把他想像成一個儲存資料的地方，像是姓名、電話、
生日之類的東西。
• 比如今天你的資料庫裡有一個資料表，該資料表上面有
公司名稱、統編.... 等等的資料，這些資料都可以把他存
到 Model 裡面去，一個資料的匯集所。
• 這意謂著，你從資料庫讀出來的每筆資料，都可以丟到
Model裡面去做儲存。
引用至http://ivanmax0280.pixnet.net/

6. • View：的中文意思是 視力、視野的意思。但是，我們
要把他看做一個像是會做事的「人」，這個「人」專門
負責幫我們處理外觀上的東西，比如處理HTML上能顯
示的所有東西。
Controller：中文的解釋是主管、管理人。事實
上 Controller 的工作就是在做判斷，然後處理判斷之後
要做什麼事。
引用至http://ivanmax0280.pixnet.net/
MVC模式－Model View Controller

7. OPENCART程式架構
MVC+L模式
Model – 數據和組件處理
View – 外觀處理
Controller – 主控制程式
Language – 語言處理
引用至http://ntcn.net/blog

8. OpenCart相對於MVC+L的程式位
置
• 前台 catalog
– M: catalogmodel
– V: catalogview
– C: catalogcontroller
– L: cataloglanguage
• 後台 admin
– M: adminmodel
– V: adminview
– C: admincontroller
– L: adminlanguage
引用至http://ntcn.net/blog

9. OpenCart主要目錄
• admin 後台
• catalog 前台
• download 下載類商品存放位置(由程式控制,
非直接複製檔案至此)
• image 圖片檔
• install 安裝檔(安全起見,安裝完請刪除)
• system 系統程式
• .htaccess 網址改寫控制檔(SEO urls)
• config.php 系統設定檔
• php.ini php設定
• vqmod vqmod外掛包
引用至http://ntcn.net/blog

10. 二、VQMOD安裝

11. VQMOD外掛驅動器安裝
• 教學影片
https://www.youtube.com/watch?v=ezS1jWo
Mmjc
• VQMOD安裝包下載
https://code.google.com/p/vqmod/download
s/list
http://www.yoursite.com/vqmod/install

12. 三、主題安裝

13. 主題套用實作-使用 Lexus Yourstyle
• Opencart付費主題官方網站 theme forest
• Opencart免費主題網站-僅限教學應用
上傳主題包裡的 主題資料夾至 catalog/view/theme 資料夾裡

14. 至管理者後台更換主題
• 系統管理 ＞商店設置 ＞編輯＞商店＞模板

15. 四、語系安裝說明

16. 語系安裝－路徑

17. 語系安裝－本地化設定語言

18. 五、版面規劃(路徑設定)

19. 版面路徑設定
www.yoursite.com

20. 六、模組區塊位置-圖片模組

21. 步驟一 ：建立圖片群組
步驟二：模組區塊設定
• 擴充模組＞基本模組＞幻燈片廣告＞編輯
1. 設定圖片尺寸
2. 設定模組位置

22. 步驟二：模組區塊設定
• 擴充模組＞基本模組＞幻燈片廣告＞編輯
1. 可於【系統管理＞版面＞廣告管理】新增廣告種類/圖片
2. 設定幻燈片圖片尺寸
3. 選擇要呈現的版面區塊
4. 設定模組位置

23. 七、模組區塊位置-功能模組

24. 模組區塊設定－以Custom Module模組為例
• 擴充模組＞基本模組＞ Custom Module
1. 自訂HTML區塊
2. 選擇要呈現的版面區塊
3. 設定模組位置

25. 八、外掛安裝-完整安裝包類型

26. 安裝外掛實作-安裝完整版編輯
器
• 官方外掛連結

27. 確認外掛版本是否符合

28. 打開檔案後通常會有教學的文字檔

29. 1.至 admin/view/javascript 資料夾 重新命名“ckeditor” 資料夾名稱
2.上傳外掛包裡的 “ckeditor”資料夾至 admin/view/javascript 資料夾裡

30. 九、外掛安裝-VQMOD類型

31. 將檔案放入VQMOD 裡的xml資料夾

32. 十、外掛安裝-XML說明

33. 外掛程式碼-置入位置

34. 外掛程式碼-取代位置