如何创建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