Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Open Cart 模組架站教學

9,248 views

Published on

Published in: Technology
  • Be the first to comment

Open Cart 模組架站教學

  1. 1. OPENCART架站/後台操作教 學
  2. 2. OPENCART簡介 • opencart和其它的購物車程式不同,市面上的購物車程 式大都使用現成的模版引擎來開發,而opencart則是基 於MVC+L的模式來作為開發的架構進而全新開發的一 套系統,所以程式碼相當輕巧,執行效率更是超越其它 購物程式,這樣 的架構和程式碼讓後續的程式開發人員 在編寫時更容易且清楚,程式和視覺設計分離,有利於日 後的維護,而有別於其它的MVC模式, opencart更加入 了語言層,能夠更輕鬆完成多語言的實現。 引用至http://ntcn.net/blog
  3. 3. MVC模式-Model View Controller • Model:從字典裡查到的意思是指「模型」,但你並不 需要把他翻譯成中文,只需要把他看成一個專有名詞, 就像你學到新的詞語一樣。 • 可以把他想像成一個儲存資料的地方,像是姓名、電話、 生日之類的東西。 • 比如今天你的資料庫裡有一個資料表,該資料表上面有 公司名稱、統編.... 等等的資料,這些資料都可以把他存 到 Model 裡面去,一個資料的匯集所。 • 這意謂著,你從資料庫讀出來的每筆資料,都可以丟到 Model裡面去做儲存。 引用至http://ivanmax0280.pixnet.net/
  4. 4. • View:的中文意思是 視力、視野的意思。但是,我們 要把他看做一個像是會做事的「人」,這個「人」專門 負責幫我們處理外觀上的東西,比如處理HTML上能顯 示的所有東西。 Controller:中文的解釋是主管、管理人。事實 上 Controller 的工作就是在做判斷,然後處理判斷之後 要做什麼事。 引用至http://ivanmax0280.pixnet.net/ MVC模式-Model View Controller
  5. 5. 後台管理者-商品上下架 • 商品管理 > 商品 > 新增/編輯
  6. 6. 後台管理者-商品上下架 • 一般:商品名稱、商品說明 • 基本訊息:型號/編號、原價、庫存狀態等等 • 連結:商品分類、品牌分類、相關商品 • 屬性:商品詳細資料 • 選項:設定顏色、尺寸、加價購等 • 折扣:批量購買(一次購買幾件有多少折扣) • 特價:促銷價格 • 圖片:副圖
  7. 7. 後台管理者-商品上下架:選項 • 商品管理>商品選項>新增/編輯
  8. 8. 後台管理者-商品上下架:選項 • 商品管理>商品>新增/編輯>商品選項 自動完成模式(輸入第一個字即出現選項)
  9. 9. 後台管理者-訂單管理 • 訂單與會員管理>訂單管理>選擇訂單>編輯 確認完訂單內容後可修改訂單狀態
  10. 10. 後台管理者-網站資訊管理 • 例如:關於我們、購物說明等 • 商品管理>文章管理
  11. 11. 後台管理者-商品分類 • 商品管理>商品目錄>新增/編輯 • 一般:分類名稱、分類說明 • 基本:分類階層設定、分類圖片設定 自動完成模式(輸入第一個字即出現選項)
  12. 12. 模組區塊設定-以幻燈片廣告模組為例 • 擴充模組>基本模組>幻燈片廣告>編輯 1. 可於【系統管理>版面>廣告管理】新增廣告種類/圖片 2. 設定幻燈片圖片尺寸 3. 選擇要呈現的版面區塊 4. 設定模組位置
  13. 13. 模組區塊設定-以Civic主題自訂模組為例 • 擴充模組>基本模組> Civic Theme Content Manager 1. 自訂HTML區塊 2. 選擇要呈現的版面區塊 3. 設定模組位置
  14. 14. OPENCART程式架構 MVC+L模式 Model – 數據和組件處理 View – 外觀處理 Controller – 主控制程式 Language – 語言處理 引用至http://ntcn.net/blog
  15. 15. 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
  16. 16. OpenCart主要目錄 • admin 後台 • catalog 前台 • download 下載類商品存放位置(由程式控制, 非直接複製檔案至此) • image 圖片檔 • install 安裝檔(安全起見,安裝完請刪除) • system 系統程式 • .htaccess 網址改寫控制檔(SEO urls) • config.php 系統設定檔 • php.ini php設定 • vqmod vqmod外掛包 引用至http://ntcn.net/blog
  17. 17. 前台程式列表(顯示介面) • 會員功能 Catalogviewthemeyour templatetemplateaccount – —— 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
  18. 18. 前台程式列表(顯示介面) • 結帳功能 Catalogviewthemeyour templatetemplatecheckout – —— address.tpl 地址處理(配送,帳單地址) – —— cart.tpl 瀏覽購物清單(購物車) – —— confirm.tpl 結帳功能-最後確認 – —— guest_step_1.tpl 免登入結帳第一步 – —— guest_step_2.tpl 免登入結帳第二步 – —— payment.tpl 結帳功能-選擇付款方式 – —— shipping.tpl 結帳功能-選擇配送方式 引用至http://ntcn.net/blog
  19. 19. 前台程式列表(顯示介面) • 主要版面 Catalogviewthemeyour templatetemplatecommon – —— column_left.tpl 左欄模組載入 – —— column_right.tpl 右欄模組載入 – —— footer.tpl 頁尾 – —— header.tpl 頁首 – —— home.tpl 首頁 – —— maintenance.tpl 維護中顯示頁 – —— success.tpl 成功訊息 引用至http://ntcn.net/blog 引用至http://ntcn.net/blog
  20. 20. 前台程式列表(顯示介面) • 404錯誤 Catalogviewthemeyour templatetemplateerror – —— not_found.tpl 無此頁 引用至http://ntcn.net/blog
  21. 21. 前台程式列表(顯示介面) • 網站資訊 Catalogviewthemeyour templatetemplateinformation – —— contact.tpl 發送信件給店家 – —— information.tpl 商店文章 – —— sitemap.tpl 網站導覽 引用至http://ntcn.net/blog
  22. 22. 前台程式列表(顯示介面) • 訂單通知信 Catalogviewthemeyour templatetemplatemail – —— order_confirm.tpl 訂單通知信 引用至http://ntcn.net/blog
  23. 23. 前台程式列表(顯示介面) • 功能模組 Catalogviewthemeyour templatetemplatemodule – —— 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
  24. 24. 前台程式列表(顯示介面) • 商品功能 Catalogviewthemeyour templatetemplateproduct – —— category.tpl 同目錄商品列表 – —— manufacturer.tpl 同品牌商品列表 – —— product.tpl 商品詳細內容頁 – —— review.tpl 商品評論 – —— search.tpl 搜尋功能 – —— special.tpl 特價商品列表 引用至http://ntcn.net/blog
  25. 25. 前台程式列表(控制介面) • 會員功能 Catalogcontrolleraccount – —— 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
  26. 26. 前台程式列表(控制介面) • 結帳功能 Catalogcontrollercheckout – —— 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
  27. 27. 前台程式列表(控制介面) • 主要版面 Catalogcontrollercommon – —— column_left.php 左欄模組載入 – —— column_right.php 右欄模組載入 – —— footer.php 頁尾 – —— header.php 頁首 – —— home.php 首頁 – —— maintenance.php 維護中顯示頁 – —— seo_url.php 網址最佳化處理程式之一(縮短網址) 引用至http://ntcn.net/blog
  28. 28. 前台程式列表(控制介面) • 404錯誤 Catalogcontrollererror – —— not_found.php 無此頁 引用至http://ntcn.net/blog
  29. 29. 前台程式列表(控制介面) • 網站地圖和訂閱 Catalogcontrollerfeed – —— google_base.php 網站訂閱(feed) – —— google_sitemap.php 網站地圖 引用至http://ntcn.net/blog
  30. 30. 前台程式列表(控制介面) • 網站資訊 Catalogcontrollerinformation – —— contact.php 發送信件給店家 – —— information.php 商店文章 – —— sitemap.php 網站導覽 引用至http://ntcn.net/blog
  31. 31. 前台程式列表(控制介面) • 功能模組 Catalogcontrollermodule – —— bestseller.php 暢銷商品 – —— cart.php 購物清單(側欄) – —— category.php 目錄(側欄) – —— featured.php 推薦商品 – —— google_talk.php google即時通(側欄) – —— information.php 商店文章(側欄) – —— latest.php 最新商品 – —— manufacturer.php 品牌選單(側欄) – —— special.php 特價商品 引用至http://ntcn.net/blog
  32. 32. 前台程式列表(控制介面) • 商品功能 Catalogcontrollerproduct – —— category.php 同目錄商品列表 – —— manufacturer.php 同品牌商品列表 – —— product.php 商品詳細內容頁 – —— search.php 搜尋功能 – —— special.php 特價商品列表 引用至http://ntcn.net/blog
  33. 33. 前台CSS(前端版面) • CSS /catalog/view/theme/ yourtemplate/stylesheet – —— stylesheet.css 共用CSS
  34. 34. 安裝外掛實作-安裝完整版編輯 器 • 官方外掛連結
  35. 35. 確認外掛版本是否符合
  36. 36. 打開檔案後通常會有教學的文字檔
  37. 37. 1.至 admin/view/javascript 資料夾 重新命名“ckeditor” 資料夾名稱 2.上傳外掛包裡的 “ckeditor”資料夾至 admin/view/javascript 資料夾裡
  38. 38. 主題套用實作- Civic • Opencart付費主題官方網站 theme forest 上傳主題包裡的 “civic”資料夾至 catalog/view/theme 資料夾裡
  39. 39. 至管理者後台更換主題 • 系統管理 >商店設置 >編輯>商店>模板

×