Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. OpenCart
Code

用 OpenCart 创建自定义主题:简介

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Create a Custom Theme With OpenCart.
Create a Custom Theme With OpenCart: Part Two

Chinese (Simplified) (中文(简体)) translation by Niau Wu (you can also view the original English article)

在本系列中,我将解释如何用流行的开源电子商务框架 OpenCart 创建自定义主题在第一部分中,我将解释 OpenCart 主题的基本结构。

在开始之前,我假设您已经安装了 OpenCart。如果还没安装,请浏览 OpenCart 在线文档并设置之(安装过程不在本教程的范围之内)。一旦您安装了 OpenCart ,就让我们开始吧!

快速浏览 OpenCart 结构

基本 OpenCart 架构

OpenCart 使用 MVC 设计模式,允许分离数据和显示(Presentation)。身为主题开发者的您,不必担心要一直调整应用程序逻辑和模板代码。

当涉及到组织架构, OpenCart 提供了相当简洁的目录结构。凡是涉及到后端接口的文件都放在 admin 目录。处理前端接口文件放置在 catalog 目录。但是我们真正感兴趣的是 catalog 目录。在本系列教程的末了,我们将完成自定义前端主题,。

OpenCart 设计模式:MVC-L

目录结构

Model(模型) - View(检视) - Controller(控制器),或简称 MVC ,是软件开发领域非常流行的设计模式。OpenCart 只是增加了另一种元素:语言(Language),这就是为什么我们把它称为 MVC-L。

在本例中,view 部分,会放置主题相关的所有代码。快速浏览 catalog 结构,看一下 OpenCart 施了什么魔法。

内容简介

  1. Controller(控制器),负责处理应用程序逻辑。
  2. Language(语言),适用于分离多语言网站的特定语言信息。
  3. Model(模型),负责从后端数据库获取数据。
  4. View(检视),我们将花更多的时间于此!负责呈现前端布局。

熟悉显示层

视图结构

预设的 OpenCart 主题有提供 view 目录。这就是我们要在本节探讨的部分。在更深层,还有两个目录:javascripttheme

现在,我们假设所有需要的 JavaScript 文件都放在 javascript 目录。有时有一个例外,在这种情况下,我们也可以将样式表(stylesheet)和相关的图像文件放在此目录下。例如, OpenCart 提供了不只含 JavaScript 的彩盒库(colorbox library)。

我们真正感兴趣的是 theme 目录。进一步来看,有一个名为 default 的目录,是 OpenCart 提供的唯一内建主题。不要被更深层的主题结构吓着了,稍后我们将更详细的探索。现在,看一下主题的结构。

预设主题结构

  1. Image(图像),如您所想,所有有关主题的图像文件都放在这里。
  2. Stylesheet(样式表),样式表的外观相关代码。
  3. Template(模板),正如其名,可以在这里找到所有前端模板的文件。所有的模板文件组织在一个模块化的方式让事情变得整洁干净。

例如,快速浏览一下模板下的 account 目录,会看到大多数文件都是在前端与用户界面。下一篇文章我们会详述。

模板的世界

模板结构

正如我前面提到的,OpenCart 提供了组织模板文件的好方法。在这篇文章中,我会尽力解释 template 目录的内部。此外,值得注意的是,虽然 OpenCart 配有一堆内建的模块,提供了一个基本的购物车功能,也可以根据自定义需求开发自己的模块。

那么,让我们来仔细看看这个模板的分类。

模板分类

  1. Common(常见的)。 跨不同页面的模板公共元素文件都放在这个目录中。例如包括页眉(header),页脚(footer)和侧边栏(sidebar)相关的模板。如果打算使用在不同的页面,也应该把您的模板文件放在这里,长远来看这样比较好维护 。当然,不是强制要这样做,但它是很好的做法也应该这样做。
  2. Error(错误), 目前,只是保留在此的错误模板。
  3. Information(信息), 可以在这里找到联系页面、网站导航页面和静态信息页面的相关模板。
  4. Module(模块), 保存模板种类的重要的目录。正如我刚才在 OpenCart 说,我们可以创建自己的自定义模块,以满足自定义要求,所以这是有关自定义模块模板文件存放的地方。

除了上述的模板结构,还有包含特定页面的模板文件目录。在 OpenCart 而言,其为特殊的 route(路由)模板文件。

例如,当您访问前端的“My Account(我的帐户)”页面,相关的模板在 catalog/view/theme/default/template/account 。之后,我们将学习如何从页面的 URL 路径找到一个特定的模板文件。

摘要

此为本系列的第一部分的结尾。您应该熟悉了 OpenCart 的基本主题结构。

在接下来的部分,我们将学习如何在 OpenCart 创建自定义主题。如果有任何问题或意见,欢迎留下您的评论!

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.