如何为OpenCart创建模板？

我是OpenCart新手，我想将我的主题应用到OpenCart

---

我知道我不应该直接编辑默认模板，但如何复制默认模板文件并修改它以应用主题？

Balan，您可以从复制文件夹catalog\view\theme\default及其所有子文件夹文件开始

因此，副本将成为您的新主题。假设你现在有了这些文件夹

catalog\view\theme\default
catalog\view\theme\my-new-theme

转到管理站点并选择系统>设置

在“存储”选项卡上，您应该看到选项“默认”和“我的新主题”作为名为“模板”的字段的选项。选择“我的新主题”并保存

开始对catalog\view\theme\my new theme下的文件进行更改，它们将立即显示出来

---

请记住，视图中的所有文件都以.tpl扩展名结尾

tpl文件中的变量值来自各自的控制器。而控制器中的变量值来自模型，模型从数据库中获取数据

---

因此，如果对tpl文件中的变量名进行任何更改，也会更改相应控制器文件中的变量名。

在opencart中创建自定义主题：

Opencart使用回退功能，这意味着当Opencart在您的主题中找不到特定模板时，它将在默认的主题文件夹中找到。所以，要创建一个新主题，不需要从默认主题复制所有文件。但是，构建一个主题不仅仅是创建新的文件夹主题和更改其颜色。在本教程中，我们将学习对控制器和模型如何工作的基本理解，这与模板修改有关

在继续之前，我想明确说明本教程中的主题是指主题文件夹（catalog/view/theme/mytheme）中的主题，模板是指模板文件夹（catalog/view/theme/yourtheme/template）中的.tpl文件

第一步。构建“非常”的基本主题

    Create new folder mytheme on catalog/view/theme/, the folder tree will be like this:

        catalog/view/theme/
            |-> default
            |-> mytheme
    Now go to Admin -> System -> Setting - > Edit Store ->Tab Store -> template -> mytheme.
    Refresh your frontpage. Maybe your site litle bit mess, but your new theme is work!! :)

    Make folder and copy some files from default theme, but DO NOT copy all files. Follow this folder tree:

        catalog/view/theme/
            |-> default
            |-> mytheme
                |-> image/*.* - copy all image
                |-> stylesheet/*.* - copy all stylesheet
                |-> template
                    |-> common
                        |-> header.tpl
        Note:
        We need to copy all the images because it's required by stylesheet.css.
        We need to copy IE stylesheet since it's declared on header.tpl (remove the file when you removing the IE style at header.tpl)
        We neet to copy slideshow.css and carousel.css since it's needed by opencart module.
        Rating star image is hard-coded into Page: category, manufacturer_info, product, review, search, special; Module: bestseller, featured, latest, special. It's up to you whether including those module and page to your theme and used another rating image, or just replacing use default rating star image.
    Now open header.tpl with text editor.
    Search word default and replace with mytheme
    Refresh your frontpage, and everything should be the same as when you used the default theme.
    To get different visual like changing color etc, you can modificate mytheme/stylesheet/stylesheet.css

第二步。基本主题

    Create new folder mytheme on catalog/view/theme/, the folder tree will be like this:

        catalog/view/theme/
            |-> default
            |-> mytheme
    Now go to Admin -> System -> Setting - > Edit Store ->Tab Store -> template -> mytheme.
    Refresh your frontpage. Maybe your site litle bit mess, but your new theme is work!! :)

    Make folder and copy some files from default theme, but DO NOT copy all files. Follow this folder tree:

        catalog/view/theme/
            |-> default
            |-> mytheme
                |-> image/*.* - copy all image
                |-> stylesheet/*.* - copy all stylesheet
                |-> template
                    |-> common
                        |-> header.tpl
        Note:
        We need to copy all the images because it's required by stylesheet.css.
        We need to copy IE stylesheet since it's declared on header.tpl (remove the file when you removing the IE style at header.tpl)
        We neet to copy slideshow.css and carousel.css since it's needed by opencart module.
        Rating star image is hard-coded into Page: category, manufacturer_info, product, review, search, special; Module: bestseller, featured, latest, special. It's up to you whether including those module and page to your theme and used another rating image, or just replacing use default rating star image.
    Now open header.tpl with text editor.
    Search word default and replace with mytheme
    Refresh your frontpage, and everything should be the same as when you used the default theme.
    To get different visual like changing color etc, you can modificate mytheme/stylesheet/stylesheet.css

第三步。自定义模板（1）：了解控制器

    What template (*.tpl) is need to customize for a "good theme" ? Well, the answer is relative. In step 2 we already and only customizing the header.tpl. The most important rule to remember is never edit default theme template. Copy what you need to your theme folder, see example bellow.

        catalog/view/theme/
            |-> default
            |-> mytheme
                |-> image
                |-> stylesheet
                |-> template
                    |-> common
                        |-> header.tpl
                        |-> footer.tpl|-> information
                        |-> information.tpl|-> product
                        |-> product.tpl
                        |-> category.tpl
                        |-> manufacturer_list.tpl
    To customizing template and work with the controller, you need to understand that opencart used push-based MVC model -CMIIW.
    In quick explanation:
        When you accessing route=product/category url, opencart call controller/product/category.php file.
        This controller (ex. category.php) will decide which MV-L: Model, View (tpl), language will be load. In category controller (category.php) load:
            3 Model (category, product, image): $this->load->model('...');
            2 View (category.tpl & not_found.tpl): $this->template = '...';
            1 Language: $this->language->load('...')
        The controller also decide what data will be pushed into template and how user input will be processed.
            $this->$this->data['text_price'] = $this->language->get('text_price'); will produce Price in template: <?php echo $text_price; ?>
            When you change the product show (from 15 to 25) at frontpage, controller catch the request with if (isset($this->request->get['limit'])) { ... } then process it $this->data['limits'][] = array(... 'value' => 25, ...);
    Remember that there is no fallback function for controller. If you modificate the controller file manually, it will be replaced when you upgrade the opencart. Instead modificate it manually, you can used vQmod to make "virtual modification". We will talk this on step 5.

第五步。定制模板（3）：了解vQmod

    vQmod is a virtual modificate and usually used to make some change to non-fallback file like controller and model without modificating the default file.
    You can download latest version and read further explanation about vQmod here.
    To install vQmod, copy vqmod folder inside the package to opencart root.

        yoursite
            |-> admin
            |-> catalog
            |-> download
            |-> image
            |-> system
            |-> vqmod
    Go to your browser and access: http://localhost/yoursite/vqmod/install. You will see success message: vQmod has been installed on your system!
    On the vQmod package, you will see folder docs and example to give you a refference how vQmod work. Here I will give you some quick refference:
        vQmod File is an .xml file stored at vqmod/xml folder. When executed, the vQmod force opencart to use the modification instead the default file (original file) and produce cache file at vqmod/vqcache.
        One vQmod File able to modificate multiple file; within one file, vQmod able to do multiple modificate operation.
        Example structure inside a vQmod File:
        <modification>
            <id>vQmod File ID</id>
            <version>1.0.0</version> --> vQmod File version
            <vqmver>1.0.8</vqmver> --> minimum vQmod version to work
            <author>your name</author>
            <file name="catalog/controller/product/category.php "> --> the file to modify
                <operation>
                    <search position="replace"><![CDATA[
                    search this code and replace it with code bellow
                    ]]></search>
                    <add><![CDATA[
                    add this new code to replace code above
                    ]]></add></operation>
                <operation>
                    <search position="after"><![CDATA[
                    search this code and add code bellow after it
                    ]]></search>
                    <add><![CDATA[
                    add this new code after code searched above
                    ]]></add></operation></file>
            <file name="...">
                <operation>
                    <search position="before"><![CDATA[
                    search this code and add code bellow before it
                    ]]></search>
                    <add><![CDATA[
                    add this new code before code searched above
                    ]]></add></operation></file></modification>

vQmod是一种虚拟修改，通常用于在不修改默认文件的情况下对非回退文件（如控制器和模型）进行一些更改。
您可以在此处下载最新版本并阅读有关vQmod的进一步说明。
要安装vQmod，请将包中的vQmod文件夹复制到opencart根目录。
你的网站
|->管理员
|->目录
|->下载
|->形象
|->系统
|->vqmod
转到浏览器并访问：http://localhost/yoursite/vqmod/install. 您将看到成功消息：vQmod已安装在您的系统上！
在vQmod包中，您将看到文件夹文档和示例，以参考vQmod的工作方式。在这里，我将为您提供一些快速参考：
vQmod文件是存储在vQmod/xml文件夹中的.xml文件。执行时，vQmod强制opencart使用修改，而不是默认文件（原始文件），并在vQmod/vqcache处生成缓存文件。
一个vQmod文件，可以修改多个文件；在一个文件中，vQmod可以执行多个修改操作。
vQmod文件中的示例结构：
vQmod文件ID
1.0.0-->vQmod文件版本
1.0.8-->要工作的最小vQmod版本
你的名字
-->要修改的文件

@JackLB-您可以根据需要命名模板文件。每个模板都是在控制器文件中手动指定的

尝试在任何控制器文件中搜索

.tpl

，您将看到：

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . 
'/template/common/header.tpl')) {
        $this->template = $this->config->get('config_template') . 
'/template/common/header.tpl';
    } else {
        $this->template = 'default/template/common/header.tpl';
    }

Opencart在自定义模板文件夹中搜索模板。如果找不到，则返回默认模板。如果未找到，将显示错误

相应地更改位置路径

---

但这更复杂-对控制器/模板使用相同的命名。

嗨，罗伊，你的ans真的帮了我大忙。我想知道在opencart中，控制器文件和视图文件（.tpl）是否必须具有相同的名称。假设我的控制器文件“static.php”位于“catalog/controller/module/static.php”中，现在我想在视图文件->“catalog\view\theme\my_theme\template\common\home.tpl”中呈现结果数组和值。那么有可能做到这一点吗？假设我想在“catalog\view\theme\my\u theme\stylesheet\style.php”中创建一个动态css“style.php”，那么在这里，我可以从控制器的任何控制器文件传递值和数组吗？非常感谢你的帮助。@ArshadHussain，似乎是同一个作者。