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

相关文章
相关标签/搜索