2022-08-18 10:55:57 - 米境通跨境电商
在开始本教程前,需要指出theme主题指主题theme目录(catalog/view/theme/mytheme)下的主题,模板指后缀为.tpl的文件。
第一步建立最基本的主题模板
在目录catalog/view/theme/下创建新目录mytheme,则此时目录结构如下:
catalog/view/theme/
|->default
|->mytheme
现在到后台进行操作:Admin->System->Setting->EditStore->TabStore->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');将在模板中生成价格:
当你想在网站前台改变产品的显示(如从显示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并找到publicfunctiongetProduct.
问题是,如果getProduct()获取了所有的产品数据,为何不在前台分类页面全部显示呢?这是因为分类控制器决定了是否显示所有数据。
打开文件controller/product/category.php,找到$this->data['products'][]=array就明白了。