OpenCart 的模板系统非常清晰，主要分为前台模板和后台模板两部分，它们都位于 catalog/view/ 和 admin/view/ 目录下。

opencart 模板位置
（图片来源网络，侵删）

前台模板

前台模板是访客在网站上看到的部分,所有与展示相关的文件都在这里。

核心目录结构

前台模板的根目录是 catalog/view/，在这个目录下,你会看到以下子目录：

  • theme/: 这是最重要的目录,存放所有主题模板。
  • javascript/: 存放前台使用的 JS 文件。
  • stylesheet/: 存放前台使用的 CSS 文件。

catalog/view/theme/ 目录详解

catalog/view/theme/ 目录是所有主题文件的家,它的结构如下：

catalog/
└── view/
    └── theme/
        ├── default/              <-- 默认主题
        │   ├── stylesheet/
        │   ├── image/
        │   ├── font/
        │   ├── javascript/
        │   └── template/          <-- 模板文件 (.tpl)
        │       ├── common/
        │       │   ├── header.tpl
        │       │   ├── footer.tpl
        │       │   ├── column_left.tpl
        │       │   └── column_right.tpl
        │       ├── product/
        │       │   ├── category.tpl
        │       │   ├── product.tpl
        │       │   └── manufacturer_info.tpl
        │       ├── information/
        │       │   ├── information.tpl
        │       │   └── contact.tpl
        │       └── ...            <-- 其他页面模板
        └── my_custom_theme/      <-- 你自己创建或安装的新主题
            ├── ... (与 default 相同的结构)

关键点：

opencart 模板位置
（图片来源网络，侵删）

  1. 主题文件夹: default 是 OpenCart 自带的默认主题，你可以创建自己的主题文件夹，my_custom_theme、fashion_store 等，你可以在后台 Extensions -> Theme Editor 中选择和切换当前使用的主题。

  2. template/ 目录: 这是模板的“心脏”。

    • common/: 存放所有页面共用的模板文件，比如页头 (header.tpl)、页脚 (footer.tpl)、左侧栏 (column_left.tpl) 和右侧栏 (column_right.tpl),修改这些文件会影响整个网站。
    • 按模块/页面分类: 其他文件夹（如 product/, information/, account/）则对应不同的页面类型。
      • product/category.tpl: 产品分类页面。
      • product/product.tpl: 产品详情页。
      • common/home.tpl: 首页（如果使用了特殊的首页模块）。
      • checkout/: 结账流程相关页面。

  3. 覆盖机制: 当你修改一个模板文件时，OpenCart 会首先去你当前激活的主题（my_custom_theme）中寻找该文件，如果找不到，它才会去默认的 default 主题中寻找，这就是为什么建议你在自定义主题中进行修改,而不是直接修改默认主题。

如何找到并修改一个页面的模板文件？

这是一个非常实用的技巧：

opencart 模板位置
（图片来源网络，侵删）
  1. 在浏览器中打开你想要修改的页面（某个产品详情页）。
  2. 右键点击页面，选择“检查”或“检查元素”（Inspect）。
  3. 在开发者工具中，找到页面上的某个 HTML 元素，然后右键点击它，选择 “Go to definition” 或类似的功能（不同浏览器名称可能略有不同）。
  4. 浏览器会自动跳转到对应的 .tpl 文件中！

后台模板

后台模板是管理员登录后台后看到的界面,其结构与前台类似。

核心目录结构

后台模板的根目录是 admin/view/。

admin/
└── view/
    ├── template/          <-- 后台模板文件 (.tpl)
    │   ├── common/
    │   │   ├── header.tpl
    │   │   ├── footer.tpl
    │   │   ├── menu.tpl
    │   │   └── column_left.tpl
    │   ├── catalog/
    │   │   ├── product_form.tpl
    │   │   └── category_form.tpl
    │   ├── sale/
    │   │   └── order.tpl
    │   └── ...            <-- 其他后台页面模板
    ├── stylesheet/        <-- 后台 CSS 文件
    └── javascript/        <-- 后台 JS 文件

关键点：

  • template/ 目录: 同样是核心。
    • common/: 存放后台共用的布局文件，如页头、页脚、左侧菜单等。
    • 按功能模块分类: catalog/ 目录下是商品相关的页面模板，sale/ 是订单相关的,等等。
  • 修改后台模板: 直接在 admin/view/template/ 目录下找到对应的 .tpl 文件进行修改即可，同样，遵循“在自定义主题中修改前台，直接修改后台”的原则。

语言包位置

模板中的文字内容（如“添加到购物车”、“价格”等）通常不直接写在 .tpl 文件里，而是通过语言包来管理,便于多语言切换。

前台语言包

位置：catalog/language/

catalog/
└── language/
    ├── en-gb/              <-- 英文语言包
    │   ├── common/
    │   │   ├── header.php
    │   │   └── footer.php
    │   ├── product/
    │   │   └── product.php
    │   └── ...            <-- 其他语言文件
    └── zh-cn/              <-- 中文语言包
        ├── ... (与 en-gb 相同的结构)

后台语言包

位置：admin/language/

admin/
└── language/
    ├── en-gb/              <-- 英文后台语言包
    │   ├── common/
    │   │   └── header.php
    │   ├── catalog/
    │   │   └── product.php
    │   └── ...            <-- 其他后台语言文件
    └── zh-cn/              <-- 中文后台语言包
        └── ...

如何使用？ 在 .tpl 文件中，你不会直接写 "Add to Cart"，而是写 <?php echo $text_add_to_cart; ?>，在对应的语言文件（如 catalog/language/en-gb/product/product.php）中，你会找到一行定义：$_['text_add_to_cart'] = 'Add to Cart';。

总结与最佳实践

  1. 前台修改：永远在 catalog/view/theme/[你的自定义主题名]/template/ 目录下进行修改，不要直接修改 catalog/view/theme/default/。
  2. 后台修改：直接在 admin/view/template/ 目录下修改。
  3. 定位文件：善用浏览器开发者工具的“Go to definition”功能,这是最高效的定位方法。
  4. 清除缓存：修改模板或语言文件后，如果看不到效果，请务必清除 OpenCart 的缓存，缓存通常位于 system/storage/cache/ 和 system/storage/logs/ 目录下，你也可以在后台的 Maintenance 选项中清除缓存。
  5. 使用版本控制：如果你要进行大量修改，强烈建议使用 Git 等版本控制工具,以便在出错时可以轻松回滚。

希望这份详细的指南能帮助你更好地理解和使用 OpenCart 的模板系统！