OpenCart之布局(Layout)教程

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

如果对opencart感兴趣，也可以加入QQ群：282797742进行讨论。也可以直接联系：QQ号：1487063622  微信号：18561800618

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的产品详细页面时，会显示如下图所示：