如何创建OpenCart主题/模板

sunboy

在开始本教程前，需要指出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/
                |-> default
                |-> mytheme
                    |-> 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.
See list after return array, and you will found all product data.
The question is, if the getProduct() listed all product data, why it doesn't show at category page (frontpage)? This because the category controller decide not to show all data.
Open controller/product/category.php, find $this->data['products'][] = array to see what product data is used by controller.

================转 www.opencartchina.com================

四只汤圆

很赞