如何建立OpenCart主題/模板

在開始本教程前，須要指出theme主題指主題theme目錄( catalog/view/theme/mytheme) 下的主題，模板指後綴爲.tpl的文件。

第一步 創建最基本的主題模板

在目錄 catalog/view/theme/下建立新目錄 mytheme, 則此時目錄結構以下：

catalog/view/theme/
|-> default
|-> mytheme

如今到後臺進行操做： Admin -> System -> Setting - > Edit Store ->Tab Store -> template -> mytheme.
此時刷新你的網站前臺頁面，或許你的網站有些混亂，但此時你的新主題模板已經開始工做了！(若是你對本帖感興趣，歡迎轉載，但請註明出處來自於 OpenCart中國網站)

第二步. 基本主題模板

創建目錄並從默認主題 default中複製一些文件，但 不要複製全部的文件。按照以下目錄結構進行操做：

代碼: 全選catalog/view/theme/
                |-> [color=#BF0040]default[/color]
                |-> [color=#BF0040]mytheme[/color]
                    |-> image/*.* - 拷貝全部的圖片
                    |-> stylesheet/*.* - 拷貝全部的css樣式文件
                    |-> template
                        |-> common
                            |-> header.tpl

注意:

須要複製全部的圖片，由於stylesheet.css文件須要使用這些圖片。
須要複製IE的樣式文件，由於header.tpl中包含了它（若是你不在header.tpl中包含它，那就去掉它）
須要複製slideshow.css由於在opencart的模塊中用到它。
星級圖片被硬編碼進了相關頁面： category, manufacturer_info, product, review, search, special; 模塊: bestseller, featured, latest, special。所以包含這些圖片與否，取決於你是否須要這些頁面，模塊，或者你可使用新的圖片來替換它們。
如今使用文本編輯器打開header.tpl；
搜索並替換" default" 爲 " mytheme"。
刷新你的網站前臺頁面，你會發現一切如默認模板同樣顯示了。
若是想要不一樣的視覺效果，例如改變顏色等，此時你能夠修改文件 mytheme/stylesheet/stylesheet.css

第三步 定製模板（1）：理解控制器

在第二步中，咱們已經定製了header.tpl這個模板文件。請記住不要修改默認default模板，將你須要的文件複製到你的目錄下mytheme下便可。看以下例子：

代碼: 全選            catalog/view/theme/
                |-> default
                |-> mytheme
                    |-> image
                    |-> stylesheet
                    |-> template
                        |-> common
                            |-> header.tpl
                            |-> footer.tpl|-> information
                            |-> information.tpl|-> product
                            |-> product.tpl
                            |-> category.tpl
                            |-> manufacturer_list.tpl
你要使用控制器controller來定製模板，你須要知道opencart使用的是MVC-L框架。
簡單解釋以下:
當你訪問url路徑爲 route=product/category 時，opencart調用的是控制器 controller/product/category.php 文件。
這個控制器（如category.php)將決定哪個MV-L被加載（Model, View(tpl), Language）。在category控制器(category.php)控制器中將加載：
3個數據模型 Model (category, product, image): $this->load->model('...');
2個視圖 View (category.tpl和 not_found.tpl): $this->template = '...';
1個語言文件 Language: $this->language->load('...')
該控制器也決定什麼數據傳輸給模板，而且用戶輸入的數據也在這裏進行預處理。
$this->$this->data['text_price'] = $this->language->get('text_price'); 將在模板中生成價格: <?php echo $text_price; ?>
當你想在網站前臺改變產品的顯示 (如從顯示15個改成25個)時，控制器將得到此請求 if (isset($this->request->get['limit'])) { ... } 而後處理它 $this->data['limits'][] = array(... 'value' => 25, ...);
請記住，控制器方面沒有fallback備用模式，也就是說，你手動修改了相關的控制器，則當升級opencart時，相關的控制器會被覆蓋掉。除了手動修改外，你可使用vQmod對其進行「虛擬改變」。在第五步中將介紹這種方法。

第四步. 定製模板(2): 理解數據模型Model

在MVC架構中，一個數據模型Model的做用就是針對數據庫提取或保存數據。在控制器controller得到或將數據提交給數據模型Model時，須要先加載此特定的數據模型。
加載數據模型Model: $this->load->model('catalog/product');
從數據模型獲取數據: $this->model_catalog_product->getTotalProducts()
提交數據給數據模型: $this->model_catalog_product->editProduct()
$this->load->model('catalog/product') 告訴opencart在網站後臺admin或網站前臺catalog中加載該數據模型Model （ model/catalog/product.php）。 getTotalProducts(), editProduct() 是數據模型 model/catalog/product.php 中的兩個函數。
打開文件 model/catalog/product.php 並找到 public function getProduct.

問題是，若是 getProduct() 獲取了全部的產品數據，爲什麼不在前臺分類頁面所有顯示呢？這是由於分類控制器決定了是否顯示全部數據。
打開文件 controller/product/category.php, 找到 $this->data['products'][] = array 就明白了。

第五步. 定製模板 (3): 理解 vQmod

vQmod的做用，請參考帖子 http://www.opencartchina.com/bbs/topic759.html
你能夠點擊這裏下載最新的vQmod版本；http://code.google.com/p/vqmod/
安裝vQmod的方法，請參考帖子： http://www.opencartchina.com/bbs/topic27.html

安裝vQmod後，你的網站結構應該以下所示：

代碼: 全選            yoursite
                |-> admin
                |-> catalog
                |-> download
                |-> image
                |-> system
                |-> vqmod

vQmod的使用教程，請參考以下帖子：

http://www.opencartchina.com/bbs/topic29.html

http://www.opencartchina.com/bbs/topic30.html

http://www.opencartchina.com/bbs/topic31.html

http://www.opencartchina.com/bbs/topic32.html

http://www.opencartchina.com/bbs/topic33.html