prestashop 模板教程-建站教程-锦华智联科技

PrestaShop 模板开发终极教程

本教程将引导你从零开始，了解 PrestaShop 模板的结构、工作原理,并亲手创建一个属于自己的简单模板。

（图片来源网络，侵删）

第一部分：基础理论
- 什么是 PrestaShop 模板？
- PrestaShop 模板的工作原理
- 模板的核心文件结构
- 开发环境准备
第二部分：创建你的第一个模板
- 步骤 1：创建模板文件夹和基础文件
- 步骤 2：配置 config.xml
- 步骤 3：创建布局文件
- 步骤 4：创建模板文件
- 步骤 5：安装并激活你的模板
第三部分：模板核心功能详解
- PrestaShop Hooks（钩子）系统
- 变量与全局对象
- 模板继承与覆盖
- 样式表和 JavaScript
第四部分：高级定制与技巧
（图片来源网络，侵删）
- 使用 Bootstrap 和 Sass
- 创建自定义模块并集成到模板
- 性能优化技巧
- 响应式设计
第五部分：资源与最佳实践
- 官方资源
- 社区资源
- 最佳实践总结

第一部分：基础理论

什么是 PrestaShop 模板？

PrestaShop 模板是一组文件（主要是 .php, .tpl, .css, .js 文件），它们定义了你网店的外观和布局，它决定了商品如何展示、导航栏在哪里、页脚有什么内容等，你可以把它想象成 PrestaShop 这辆“汽车”的“车身和内饰”。

PrestaShop 模板的工作原理

PrestaShop 使用了 Smarty 模板引擎，这是一种将 PHP 逻辑与 HTML 分离的技术。

PHP 文件 (控制器): 负责处理业务逻辑，从数据库获取数据，然后将这些数据传递给 Smarty。
TPL 文件 (视图): 这些是 HTML 文件，其中嵌入了一些 Smarty 标签（如 {$variable_name}），它们负责接收 PHP 传来的数据，并将其渲染成最终的 HTML 页面。

工作流程:

（图片来源网络，侵删）

用户访问你的网店，https://yourstore.com/index.php?id_category=3。
PrestaShop 的前端控制器接收请求。
控制器加载相应的模块和类，处理逻辑（如获取分类 ID 为 3 的所有商品）。
控制器将这些数据（商品列表、分类信息等）分配给 Smarty。
Smarty 加载当前激活模板下的相应 TPL 文件（category.tpl）。
TPL 文件使用 Smarty 标签显示数据，生成最终的 HTML。
浏览器接收并显示这个 HTML 页面。

模板的核心文件结构

一个典型的 PrestaShop 模板文件夹位于 /themes/your-theme-name/ 下,其核心结构如下：

/themes/
└── my-first-theme/               <-- 你的模板文件夹
    ├── config.xml                <-- 模块配置文件（定义模板名称、作者等）
    ├── logo.png                 <-- 模板预览图
    ├── index.php                <-- 模板入口文件（通常不需要修改）
    ├── favicon.ico              <-- 网站图标
    ├── preview.jpg               <-- 后台预览图
    ├── css/                     <-- 样式表文件夹
    │   ├── global.css           <-- 全局样式
    │   └── modules/             <-- 模块特定样式
    │
    ├── js/                      <-- JavaScript 文件夹
    │   ├── modules/             <-- 模块特定脚本
    │   └── theme.js             <-- 主题主脚本
    │
    ├── img/                     <-- 图片资源文件夹
    │   └── logo.png
    │
    ├── fonts/                   <!-- 字体文件夹
    │
    ├── _partials/               <!-- 可重用的模板片段
    │   ├── header.tpl           <!-- 头部模板
    │   ├── footer.tpl           <!-- 页脚模板
    │   └── ...
    │
    ├── layouts/                 <!-- 布局文件，定义页面结构
    │   ├── 1-column.tpl         <!-- 单列布局
    │   ├── 2-columns-left.tpl   <!-- 两列，左侧边栏
    │   └── ...
    │
    └── controllers/             <!-- 模板级别的控制器（高级用法）
        └── index/
            └── IndexController.php

开发环境准备

本地服务器: 安装 XAMPP, WAMP, MAMP 或 Docker，以便在本地运行 PrestaShop。
代码编辑器: 使用 VS Code, Sublime Text 或 PhpStorm 等编辑器，它们对 PHP 和 Smarty 有很好的语法高亮支持。
FTP/SFTP 客户端: 用于连接你的服务器,上传文件。
PrestaShop: 从 PrestaShop 官网下载最新稳定版。

第二部分：创建你的第一个模板

我们将创建一个名为 "MyFirstTheme" 的极简模板。

步骤 1：创建模板文件夹和基础文件

通过 FTP 或文件管理器，进入 PrestaShop 安装目录下的 /themes/ 文件夹。
创建一个新文件夹，命名为 my-first-theme。
在 my-first-theme 文件夹内，创建以下空文件：
- config.xml
- preview.jpg (可以随便放一张图片作为预览)
- logo.png (可以随便放一张图片作为 logo)

步骤 2：配置 `config.xml`

这个文件告诉 PrestaShop 你的模板是什么，用编辑器打开 config.xml 并填入以下内容：

<?xml version="1.0" encoding="UTF-8" ?>
<module>
    <name>my-first-theme</name>
    <displayName><![CDATA[My First Theme]]></displayName>
    <version><![CDATA[1.0.0]]></version>
    <description><![CDATA[This is my very first PrestaShop theme.]]></description>
    <author><![CDATA[Your Name]]></author>
    <tab><![CDATA[themes]]></tab>
    <is_configurable>1</is_configurable>
    <need_instance>0</need_instance>
</module>

步骤 3：创建布局文件

布局文件定义了页面的基本骨架，比如头部、内容区、页脚,我们创建一个简单的两列布局。

在 my-first-theme 文件夹中创建 layouts 文件夹。
在 layouts 文件夹中创建 2-columns-left.tpl 文件,并填入以下内容：

{* 定义页面布局 *}
{extends file='layouts/layout.tpl'}
{* 在布局中定义块 *}
{block name='left_column'}
    <div id="left-column" class="column">
        {* 这里将显示左侧边栏模块 *}
        {hook h='displayLeftColumn'}
    </div>
{/block}
{block name='right_column'}
    <div id="right-column" class="column">
        {* 这里将显示右侧边栏模块 *}
        {hook h='displayRightColumn'}
    </div>
{/block}

注意: 我们这里使用了 {extends file='layouts/layout.tpl'}，这意味着我们的 2-columns-left.tpl 继承自一个更基础的布局文件 layout.tpl，PrestaShop 默认提供这个文件，我们暂时不需要创建它，它的作用是加载头部、主内容区和页脚。

步骤 4：创建模板文件

模板文件是真正显示内容的地方,我们为首页创建一个模板。

在 my-first-theme 文件夹中创建 controllers 文件夹。
在 controllers 文件夹中创建 index 文件夹。
在 index 文件夹中创建 IndexController.php 文件,这个文件是首页的控制器。

<?php
class IndexControllerCore extends FrontController
{
    public $php_self = 'index';
    public function setMedia()
    {
        parent::setMedia();
        // 可以在这里添加 CSS 和 JS 文件
        $this->addCSS(_THEME_CSS_DIR_ . 'global.css');
        $this->addJS(_THEME_JS_DIR_ . 'theme.js');
    }
    public function initContent()
    {
        parent::initContent();
        // 可以在这里分配变量给 Smarty
        $this->context->smarty->assign([
            'my_custom_message' => '欢迎来到我的第一个 PrestaShop 主题！',
        ]);
        // 加载首页的 TPL 文件
        $this->setTemplate(_PS_THEME_DIR_ . 'index.tpl');
    }
}

创建 index.tpl 文件,这是首页的视图。

{* 位于 /themes/my-first-theme/index.tpl *}
{extends file='layouts/layout-2-columns.tpl'} {* 我们刚刚创建的布局 *}
{* 覆盖布局中的主内容区 *}
{block name='content'}
    <div id="content">
        <h1>{$my_custom_message}</h1>
        <p>这里是首页的主要内容区域。</p>
    </div>
{/block}

步骤 5：安装并激活你的模板

登录你的 PrestaShop 后台。
进入 设计 > 主题。
在主题列表中，你应该能看到 "My First Theme"，点击右侧的“配置”按钮进行预览，然后点击“启用”按钮。
清除缓存：高级工具 > 性能 > 清除缓存。
现在访问你的网店首页，你应该能看到一个简单的页面，标题是 "欢迎来到我的第一个 PrestaShop 主题！"。

恭喜！你已经成功创建了你的第一个 PrestaShop 模板！

第三部分：模板核心功能详解

PrestaShop Hooks（钩子）系统

Hooks 是 PrestaShop 模板系统中最强大的功能之一，它允许你在页面的特定位置插入内容（通常是模块输出的内容）。

工作原理: 模块或模板文件可以在某个 hook 点（displayHeader, displayLeftColumn, displayFooter）挂载代码。 PrestaShop 在渲染页面时，会找到所有注册到该 hook 的代码并执行它们。
常用 Hooks:
- displayHeader: 在 <head> 标签内，用于加载 CSS, JS, meta 信息。
- displayTop: 在页面顶部,通常用于主导航栏。
- displayLeftColumn: 在左侧边栏。
- displayRightColumn: 在右侧边栏。
- displayFooter: 在页脚。
- displayHome: 在首页内容区。
- displayProductList: 在商品列表页内容区。

在模板中使用 Hooks:

{* 在左侧边栏显示所有注册到 displayLeftColumn 的模块 *}
{hook h='displayLeftColumn'}
{* 在头部显示所有注册到 displayHeader 的模块 *}
{hook h='displayHeader'}

变量与全局对象

在 TPL 文件中，你可以直接使用由控制器传递过来的变量。 PrestaShop 还提供了一些全局对象,让你可以轻松访问常用数据。

常用全局对象:
- $products: 商品数组 (在商品列表页)。
- $product: 单个商品对象 (在商品详情页)。
- $categories: 分类数组。
- $page: 当前页面对象，包含 page_name (如 'index', 'category'), body_classes 等。
- $customer: 当前登录客户对象。
- $cart: 购物车对象。
- $link: 非常重要的对象，用于生成各种 URL。

示例:

{* 显示当前页面名称 *}
<p>当前页面是: {$page.page_name}</p>
{* 循环显示商品 *}
{foreach from=$products item='product'}
    <div class="product">
        <h3><a href="{$link->getProductLink($product)}">{$product.name}</a></h3>
        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend}" />
        <p>{$product.description_short}</p>
        <span class="price">{$product.price}</span>
    </div>
{/foreach}

模板继承与覆盖

我们之前已经看到了 {extends} 的用法，这是 PrestaShop 模板继承的核心。

父模板: 通常指 PrestaShop 核心提供的模板文件（如 /themes/default-bootstrap/...）或你自己的基础布局文件（如 layouts/layout.tpl）。
子模板: 你自己创建的模板文件（如 index.tpl, category.tpl）。
{block}: 在子模板中，你可以使用 {block name='...'} 来覆盖父模板中同名的块，如果只想在父块内容前后添加内容，可以使用 {prepend} 和 {append}。

样式表和 JavaScript

推荐方式: 在控制器的 setMedia() 方法中加载，这样可以将资源与页面逻辑关联起来。

// 在 IndexController.php 中
public function setMedia()
{
    parent::setMedia();
    // 加载 CSS
    $this->addCSS(_THEME_CSS_DIR_ . 'index.css'); // 加载主题下的 index.css
    // 加载 JS
    $this->addJS(_THEME_JS_DIR_ . 'index.js');   // 加载主题下的 index.js
}

直接在 TPL 中加载: 不推荐，但有时为了快速实现功能，也可以直接写在 TPL 里。
```
{hook h='displayHeader'}
```
PrestaShop 的默认主题就是这样做的，它会自动加载主题下的 global.css 和 theme.js。

第四部分：高级定制与技巧

使用 Bootstrap 和 Sass

PrestaShop 1.7+ 版本默认使用 Bootstrap 作为 CSS 框架,这极大地简化了响应式开发。

Bootstrap: 你可以直接在 TPL 中使用 Bootstrap 的类名，container, row, col-md-4。
Sass: PrestaShop 默认主题使用 Sass（SCSS）来编写 CSS，这让你可以使用变量、嵌套、混合等高级功能来管理样式。
- 你的 Sass 文件通常位于 /themes/my-theme/assets/scss/。
- 编译后的 CSS 文件会输出到 /themes/my-theme/assets/css/。
- 你需要配置一个构建工具（如 Gulp 或 Webpack）来自动编译 Sass 文件。 PrestaShop 默认主题提供了 Gulp 配置作为参考。

创建自定义模块并集成到模板

当模板需要的功能比较复杂，或者你想复用这个功能时,最好的方式是创建一个模块。

创建模块: 使用 PrestaShop 的模块生成器,或手动创建模块文件。
使用 Hook: 在模块中，使用 $this->registerHook('displayMyCustomHook') 来注册一个自定义 Hook。
在模板中调用: 在你的模板文件中，使用 {hook h='displayMyCustomHook'} 来调用这个模块,模块的输出就会显示在这里。

这种方式实现了模板和功能的完美分离。

性能优化技巧

合并和压缩 CSS/JS: PrestaShop 后台 高级工具 > 性能 中有选项可以合并和压缩 CSS/JS 文件，减少 HTTP 请求。
使用 CDN: 将静态资源（CSS, JS, 图片）放到 CDN 上,可以加快全球用户的访问速度。
优化图片: 使用 TinyPNG 等工具压缩图片，或者使用 PrestaShop 的 WebP 图片支持。
懒加载: 对于图片较多的页面，可以实现图片懒加载,只在用户滚动到时才加载图片。

响应式设计

既然使用了 Bootstrap,响应式设计就变得非常简单。

使用 Bootstrap 栅格系统: col-xs-*, col-sm-*, col-md-*, col-lg-*。
使用隐藏类: hidden-xs, hidden-sm, visible-md-block 等。
媒体查询: 当 Bootstrap 的类不够用时，可以在你的 SCSS 文件中自定义媒体查询。

第五部分：资源与最佳实践

官方资源

PrestaShop 官方文档: https://devdocs.prestashop.com/ (最权威的资料，包含 API 参考、主题开发指南等)
PrestaForge (模块市场): https://www.prestashop.com/zh/extend/modules (可以学习优秀模块的代码)
PrestaShop 官方默认主题: https://github.com/PrestaShop/PrestaShop (在 themes 目录下,是最好的学习范例)

社区资源

PrestaShop 官方论坛: https://www.prestashop.com/forums
PrestaStack: https://www.prestastack.com/ (高质量的英文教程和文章)
GitHub: 搜索 "prestashop theme",可以找到很多开源主题项目。

不要修改核心文件: 所有修改都应在你的主题或自定义模块中进行，升级 PrestaShop 时,核心文件会被覆盖。
模块化思维: 尽量使用模块来实现功能，而不是在主题 TPL 中写硬逻辑。
善用 Hook: 理解并熟练使用 Hook 系统，它是 PrestaShop 灵活性的关键。
保持代码整洁: 遵循 PSR 标准（如果可能）,为你的变量和函数使用有意义的名称。
移动优先: 在设计时，先考虑移动端体验,然后逐步增强到桌面端。
备份！备份！备份！: 在进行任何重大修改前,请务必备份你的文件和数据库。

希望这份详尽的教程能帮助你顺利入门并精通 PrestaShop 模板开发！祝你开发愉快！

prestashop 模板教程