博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何创建OpenCart主题/模板
阅读量:6909 次
发布时间:2019-06-27

本文共 3173 字,大约阅读时间需要 10 分钟。

hot3.png

在开始本教程前,需要指出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.
此时刷新你的网站前台页面,或许你的网站有些混乱,但此时你的新主题模板已经开始工作了!(如果你对本帖感兴趣,欢迎转载,但请注明出处来自于 )
第二步. 基本主题模板
  • 建立目录并从默认主题
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的作用,请参考帖子
你可以点击这里下载最新的vQmod版本;http://code.google.com/p/vqmod/
安装vQmod的方法,请参考帖子:
安装vQmod后,你的网站结构应该如下所示:
代码:             yoursite
                |-> admin
                |-> catalog
                |-> download
                |-> image
                |-> system
                |-> vqmod
vQmod的使用教程,请参考如下帖子:

转载于:https://my.oschina.net/u/991572/blog/159066

你可能感兴趣的文章
[李景山php]每天TP5-20170104|thinkphp5-File.php-1
查看>>
ehcache作为分布式缓存的研究
查看>>
Mysql for windows (MySQL开发)
查看>>
php测试kafka
查看>>
js获取两个日期之间时间差(天数)
查看>>
Memcached 简介
查看>>
开始考虑程序兼容ESP8266和PYBOARD的问题
查看>>
虚拟化二、Xen虚拟化技术
查看>>
Spring Boot学习--属性配置和使用
查看>>
CentOS 安装 apache
查看>>
Oracle 11g数据库随系统自动启动与关闭的设置方法
查看>>
redhat 桥接配置
查看>>
天猫与九大快递合作 价格热战之后的冷静竞争
查看>>
git pull force
查看>>
scons用户手册
查看>>
使用new操作符来调用一个构造函数的时候发生了什么
查看>>
element-ui之el-scrollbar源码解析学习
查看>>
ceph 的pg诊断
查看>>
交换机配置vlan 访问控制列表
查看>>
我的友情链接
查看>>