open cart 模組架站教學

OPENCART 架站 / 後台操作教學

OPENCART 簡介

• opencart 和其它的購物車程式不同，市面上的購物車程式大

都使用現成的模版引擎來開發，而 opencart 則是基於

MVC+L 的模式來作為開發的架構進而全新開發的一套系統，

所以程式碼相當輕巧，執行效率更是超越其它購物程式，這

樣 的架構和程式碼讓後續的程式開發人員在編寫時更容易且

清楚，程式和視覺設計分離 , 有利於日後的維護 , 而有別於其

它的 MVC 模式， opencart 更加入了語言層，能夠更輕鬆完

成多語言的實現。引用至http://ntcn.net/blog

MVC 模式－Model View Controller

• Model ：從字典裡查到的意思是指「模型」，但你並不需要把他翻譯成中文，只需要把他看成一個專有名詞，就像你學到新的詞語一樣。

• 可以把他想像成一個儲存資料的地方，像是姓名、電話、生日之類的東西。

• 比如今天你的資料庫裡有一個資料表，該資料表上面有公司名稱、統編 ....  等等的資料，這些資料都可以把他存到 Model  裡面去，一個資料的匯集所。

• 這意謂著，你從資料庫讀出來的每筆資料，都可以丟到Model 裡面去做儲存。

引用至http://ivanmax0280.pixnet.net/

• View ：的中文意思是 視力、視野的意思。但是，我們要把他看做一個像是會做事的「人」，這個「人」專門負責幫我們處理外觀上的東西，比如處理 HTML 上能顯示的所有東西。

Controller ：中文的解釋是主管、管理人。事實上 Controller  的工作就是在做判斷，然後處理判斷之後要做什麼事。

引用至http://ivanmax0280.pixnet.net/

MVC 模式－ Model View Controller

後台管理者 - 商品上下架• 商品管理 ＞ 商品 ＞ 新增 / 編輯

後台管理者 - 商品上下架• 一般：商品名稱、商品說明• 基本訊息：型號 / 編號、原價、庫存狀態等等• 連結：商品分類、品牌分類、相關商品• 屬性：商品詳細資料• 選項：設定顏色、尺寸、加價購等• 折扣：批量購買（一次購買幾件有多少折扣）• 特價：促銷價格• 圖片：副圖

後台管理者 - 商品上下架：選項• 商品管理＞商品選項＞新增／編輯

後台管理者 - 商品上下架：選項• 商品管理＞商品＞新增／編輯＞商品選項

自動完成模式（輸入第一個字即出現選項）

後台管理者 -訂單管理• 訂單與會員管理＞訂單管理＞選擇訂單＞編輯

確認完訂單內容後可修改訂單狀態

後台管理者 -網站資訊管理• 例如：關於我們、購物說明等• 商品管理＞文章管理

後台管理者 - 商品分類• 商品管理＞商品目錄＞新增／編輯• 一般：分類名稱、分類說明• 基本：分類階層設定、分類圖片設定

自動完成模式（輸入第一個字即出現選項）

模組區塊設定－以幻燈片廣告模組為例

• 擴充模組＞基本模組＞幻燈片廣告＞編輯

1. 可於【系統管理＞版面＞廣告管理】新增廣告種類 /圖片2. 設定幻燈片圖片尺寸3. 選擇要呈現的版面區塊4. 設定模組位置

模組區塊設定－以 Civic 主題自訂模組為例

• 擴充模組＞基本模組＞ Civic Theme Content Manager

1. 自訂 HTML區塊2. 選擇要呈現的版面區塊3. 設定模組位置

OPENCART 程式架構

MVC+L 模式

Model – 數據和組件處理View – 外觀處理Controller – 主控制程式Language – 語言處理

引用至http://ntcn.net/blog

OpenCart 相對於 MVC+L 的程式位置

• 前台 catalog–M: \catalog\model\– V: \catalog\view\– C: \catalog\controller\– L: \catalog\language\

• 後台 admin– M: \admin\model\– V: \admin\view\– C: \admin\controller\– L: \admin\language\

引用至http://ntcn.net/blog

OpenCart 主要目錄• \admin 後台• \catalog 前台• \download 下載類商品存放位置 (由程式控制 ,非直接複製檔案至此 )

• \image 圖片檔• \install 安裝檔 (安全起見 ,安裝完請刪除 )• \system 系統程式• \.htaccess 網址改寫控制檔 (SEO urls)• \config.php 系統設定檔• \php.ini php 設定• \vqmod vqmod 外掛包 引用至http://ntcn.net/blog

前台程式列表 ( 顯示介面 )• 會員功能 Catalog\view\theme\your template\template\account

– —— account.tpl 會員功能主頁– —— address.tpl 地址管理 ( 更改 , 新增 )– —— addresses.tpl 地址管理 (列表 ,刪除 )– —— create.tpl 創建帳號– —— download.tpl 商品下載– —— edit.tpl 編輯個人資料– —— forgotten.tpl 取回密碼– —— history.tpl 訂單記錄列表– —— invoice.tpl 折扣券接收處理程式– —— login.tpl 登入– —— newsletter.tpl 電子報訂閱取消– —— password.tpl 密碼變更 引用至http://ntcn.net/blog

前台程式列表 ( 顯示介面 )• 結帳功能 Catalog\view\theme\your template\template\checkout

– —— address.tpl 地址處理 (配送 ,帳單地址 )– —— cart.tpl 瀏覽購物清單 ( 購物車 )– —— confirm.tpl 結帳功能 -最後確認– —— guest_step_1.tpl 免登入結帳第一步– —— guest_step_2.tpl 免登入結帳第二步– —— payment.tpl 結帳功能 - 選擇付款方式– —— shipping.tpl 結帳功能 - 選擇配送方式

引用至http://ntcn.net/blog

前台程式列表 ( 顯示介面 )• 主要版面 Catalog\view\theme\your template\template\common

– —— column_left.tpl 左欄模組載入– —— column_right.tpl 右欄模組載入– —— footer.tpl 頁尾– —— header.tpl 頁首– —— home.tpl 首頁– —— maintenance.tpl 維護中顯示頁– —— success.tpl 成功訊息

引用至http://ntcn.net/blog引用至http://ntcn.net/blog

前台程式列表 ( 顯示介面 )• 404 錯誤 Catalog\view\theme\your template\template\error

– —— not_found.tpl 無此頁

引用至http://ntcn.net/blog

前台程式列表 ( 顯示介面 )• 網站資訊 Catalog\view\theme\your template\template\

information

– —— contact.tpl 發送信件給店家– —— information.tpl 商店文章– —— sitemap.tpl 網站導覽

引用至http://ntcn.net/blog

前台程式列表 ( 顯示介面 )• 訂單通知信 Catalog\view\theme\your template\template\mail

– —— order_confirm.tpl 訂單通知信

引用至http://ntcn.net/blog

前台程式列表 ( 顯示介面 )• 功能模組 Catalog\view\theme\your template\template\module

– —— bestseller.tpl 暢銷商品 (側欄 )– —— bestseller_home.tpl 暢銷商品 ( 中間 )– —— cart.tpl 購物清單 (側欄 )– —— category.tpl 目錄 (側欄 )– —— featured.tpl 推薦商品 (側欄 )– —— featured_home.tpl 推薦商品 ( 中間 )– —— google_talk.tpl google即時通 (側欄 )– —— information.tpl 商店文章 (側欄 )– —— latest.tpl 最新商品 (側欄 )– —— latest_home.tpl 最新商品 ( 中間 )– —— manufacturer.tpl 品牌選單 (側欄 )– —— special.tpl 特價商品 (側欄 )– —— special_home.tpl 特價商品 ( 中間 ) 引用至http://ntcn.net/blog

前台程式列表 ( 顯示介面 )• 商品功能 Catalog\view\theme\your template\template\product

– —— category.tpl 同目錄商品列表– —— manufacturer.tpl 同品牌商品列表– —— product.tpl 商品詳細內容頁– —— review.tpl 商品評論– —— search.tpl 搜尋功能– —— special.tpl 特價商品列表

引用至http://ntcn.net/blog

前台程式列表 ( 控制介面 )• 會員功能 Catalog\controller\account

– —— account.php 會員功能主頁– —— address.php 會員功能 - 地址管理– —— create.php 創建帳號– —— download.php 會員功能 - 商品下載– —— edit.php 會員功能 - 編輯個人資料– —— forgotten.php 取回密碼– —— history.php 會員功能 -訂單記錄列表– —— invoice.php 折扣券接收處理程式– —— login.php 登入– —— logout.php 登出完成頁– —— newsletter.php 會員功能 - 電子報訂閱取消– —— password.php 會員功能 -密碼變更– —— success.php 創建帳號成功訊息 引用至http://ntcn.net/blog

前台程式列表 ( 控制介面 )• 結帳功能 Catalog\controller\checkout

– —— address.php 結帳功能 - 地址處理 (配送 ,帳單 .. 地址 )– —— cart.php 瀏覽購物清單 ( 購物車 )– —— confirm.php 結帳功能 -最後確認– —— guest_step_1.php 免登入結帳第一步– —— guest_step_2.php 免登入結帳第二步– —— guest_step_3.php 免登入結帳第三步– —— payment.php 結帳功能 - 選擇付款方式– —— shipping.php 結帳功能 - 選擇配送方式– —— success.php 完成結帳成功訊息

引用至http://ntcn.net/blog

前台程式列表 ( 控制介面 )• 主要版面 Catalog\controller\common

– —— column_left.php 左欄模組載入– —— column_right.php 右欄模組載入– —— footer.php 頁尾– —— header.php 頁首– —— home.php 首頁– —— maintenance.php 維護中顯示頁– —— seo_url.php 網址最佳化處理程式之一 (縮短網址 )

引用至http://ntcn.net/blog

前台程式列表 ( 控制介面 )• 404 錯誤 Catalog\controller\error

– —— not_found.php 無此頁

引用至http://ntcn.net/blog

前台程式列表 ( 控制介面 )• 網站地圖和訂閱 Catalog\controller\feed

– —— google_base.php 網站訂閱 (feed)– —— google_sitemap.php 網站地圖

引用至http://ntcn.net/blog

前台程式列表 ( 控制介面 )• 網站資訊 Catalog\controller\information

– —— contact.php 發送信件給店家– —— information.php 商店文章– —— sitemap.php 網站導覽

引用至http://ntcn.net/blog

前台程式列表 ( 控制介面 )• 功能模組 Catalog\controller\module

– —— bestseller.php 暢銷商品– —— cart.php 購物清單 (側欄 )– —— category.php 目錄 (側欄 )– —— featured.php 推薦商品– —— google_talk.php google即時通 (側欄 )– —— information.php 商店文章 (側欄 )– —— latest.php 最新商品– —— manufacturer.php 品牌選單 (側欄 )– —— special.php 特價商品

引用至http://ntcn.net/blog

前台程式列表 ( 控制介面 )• 商品功能 Catalog\controller\product

– —— category.php 同目錄商品列表– —— manufacturer.php 同品牌商品列表– —— product.php 商品詳細內容頁– —— search.php 搜尋功能– —— special.php 特價商品列表

引用至http://ntcn.net/blog

前台 CSS( 前端版面 )• CSS /catalog/view/theme/ yourtemplate/stylesheet

– —— stylesheet.css 共用 CSS

安裝外掛實作 -安裝完整版編輯器

• 官方外掛連結

確認外掛版本是否符合

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

1. 至 admin/view/javascript 資料夾 重新命名“ ckeditor” 資料夾名稱

2. 上傳外掛包裡的 “ ckeditor” 資料夾至 admin/view/javascript 資料夾裡

主題套用實作 - Civic

• Opencart付費主題官方網站 theme forest

上傳主題包裡的 “ civic” 資料夾至 catalog/view/theme 資料夾裡

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