[好文分享] Create a Custom Theme With OpenCart

本站的主題是商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

Introduction
https://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-introduction–cms-21786

(以下測試是依照最新版 OpenCart 2.3.0.2)

* 檔案結構上 view 底下是 theme 和 javascript. css, 圖, 和 html (tpl) 是放在 theme 底下。有點特殊的是 javascript 是獨立一個資料夾。但是 admin 的 view 又不同：
catalog
– view
– javascript
– bootstrap
– font-awesome
– ….
– theme
– default
– image
– stylesheet
– template

admin
– view
– image
– javascript
– stylesheets
– template

可以看到 admin 底下沒有多墊 theme/default 這兩層。就這架構來看 catalog 是可以容納更多 theme 的前端檔案，如果你有裝其他 theme 的話，theme 資料夾底下除了 default, 還會有你裝的其他的 theme.

* catalog/view/theme/default/template 底下的架構：
– common: 所有頁面的共用元件放在這邊, 例如 header.tpl, footer.tpl.
– error
– information
– module (OpenCart 2.3 是在 template/extension/module)

Part Two
https://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-two–cms-21865

作者提到, 不管是新做前端介面或是更改預設介面, 都應該新增一個 theme
「In either case, I recommend creating a new custom theme instead of modifying the default theme files directly as it'll make the life easier during the version upgrade of the OpenCart.」

OpenCart 2.3 新增 theme 有點複雜 (與上面文章敘述不同), 請參考這篇文章
http://undefined.gr/site/2016/10/09/custom-opencart-2-3-0-2-theme/

1. 新增 catalog/view/theme/mytheme,
2. 新增 admin/controller/extension/theme/mytheme.php, 記得改 class name ControllerExtensionThemeMyTheme (這很重要)。取代 mytheme.php 裡的 “theme_default” 字串成 “mytheme”.
3. 新增 admin/view/template/extension/theme/mytheme.tpl, 一樣取代 mytheme.tpl 裡的 “theme_default” 字串成 “mytheme”.
4. 新增 admin/language/en-gb/extension/theme/mytheme.php, 更改裡面的 $_[‘heading_title’] 成 “My Theme”.
5. 新增 catalog/view/theme/mytheme/image/mytheme.png
6. 到你的後台 Extensions -> Extensions, 選擇 Theme, 應該會看到 “My Theme”, 點安裝，安裝完後編輯 “My Theme” 成 Enable, 資料夾指向 mytheme.
7. 到 System -> Settings 就可以選擇你商店的 template 了。

回到 tutsplus 這篇文章, 將
catalog/view/theme/mycustomtheme/template/common/header.tpl 中的
<link href=”catalog/view/theme/default/stylesheet/stylesheet.css” rel=”stylesheet”>
改成
<link href=”catalog/view/theme/mycustomtheme/stylesheet/stylesheet.css” rel=”stylesheet”>

Part Three
https://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-three–cms-21890

OpenCart 的切版是

Content Top
Column Left Column Right
Content Bottom

程式端可以看 template/common/home.tpl, 就可以清楚的看出來 layout. 後台可以看 Design -> Layouts, 裡面的 layout 設定也是依循 Column Left/Right, Content Top/Bottom, 其中的 $modules (例如在 content_top.tpl 裡面), 就是在 Design -> Layouts 裡設定。

Part Four
https://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-four–cms-21932

模組 assign 的方式 OpenCart 2.3 與這篇文章敘述的不同。以 2.3 來說，到 Extensions -> Extensions, 選擇 Modules, 底下會列出所有已安裝的 module, 找到一個 module (例如 Slideshow), 點右邊 + 號，可以生成一個實體。回到 Design -> Layouts, 選擇一個頁面進入，就可以新增 Column Left/Right, Content Top/Bottom 模組實體。