OpenCart之布局(Layout)教程

本教程由 opencart中国网站制作，如有转载请注明出处： http://www.opencartchina.com/bbs/topic1009.html

如果对opencart感兴趣，也可以加入QQ群：282797742进行讨论。

OpenCart的设计布局比较灵活，大体分为五个部分：网站头部(Header)、网站底部(Footer)、左列(Column Left)、网站右列(Column Right)、网站内容(顶部(Content Top)和(Content Bottom))，图示如下：

在网站后台所管理的各个模块，均可以自由配置于上面的Column Left(左列),Column Right(右列),Content Top(内容顶部),Content Bottom(内容底部)，每个部分的模块的排列顺序由设置模块时填写的顺序数字来决定。
如果右列没有设置任何模块，则，中间的content内容部分自动扩展至网站右边缘，如下图所示：

如果左列没有设置任何模块，则，中间的content内容部分自动扩展至网站左边缘，如下图所示：

下面我们为产品id为28的产品详细页面设定一个特定的布局，关于layout部分是如何工作的，请参考帖子： OpenCart布局(Layout)系统是如何工作的？
我们要为该产品设定的特定布局如下图所示：

1. 首先添加一个特定的布局，【系统设置(System)】 -> 【规划设计(Design)】 -> 【布局(Layouts)】 ，新增如下布局：

2. 【扩展功能(Extensions)】 -> 【模块管理(Modules)】 -> 【幻灯片(Slideshow)】，设置如下：

3. 【扩展功能(Extensions)】 -> 【模块管理(Modules)】 -> 【特色产品(Featured)】，设置如下：

4. 【扩展功能(Extensions)】 -> 【模块管理(Modules)】 -> 【最新产品(Latest)】，设置如下：

5. 【扩展功能(Extensions)】 -> 【模块管理(Modules)】 -> 【横幅广告(Banner)】，设置如下：

   6. 【商品目录(Catalog)】 -> 【商品管理(Products)】 编辑产品id为28的产品，做如下设定：

 

7. 上述设置完成后，当我们单独访问id为28的产品详细页面时，会显示如下图所示：

 

本教程结束！