OpenCart布局(Layout)系统是怎样工作的

Q：

布局Layout系统在1.5.x版本中是如何工作的？能否如之前的1.4.x版本在所有页面显示相关模块，或者为特定的分类页面设定横幅广告banner模块？

A:

目前的布局Layout系统可以：

1. 为所有的页面设定要显示的模块；

2. 基于路径（Route），可以在不同的页面设定显示不同的模块；

3. 为不同的`分类页面，产品以及文章信息页面设定不同的模组（如Banner）；

4. 如果你建立的是多商店模式，你可以为不同的商店设定如上三点所述。

如下教程可以帮助你理解此系统。

1. 概述：运作原理

首先，opencart将检查是否有为分类，产品以及文章信息页面设定的布局Layout，如果有，就应用它。

如果检查结果为false，opencart将检查基于路由route url的布局是否存在。

当第二次检查结果为false，opencart将采用Store Layout作为返回结果。

2. 手把手教学

请在你的demo测试环境下测试这些步骤。

3. 删除demo布局

System -> Design -> Layouts : 除了 Default外，删除其它的

当你将一个布局赋予一个商店，而该商店将其作为了默认基本布局，则你在删除该布局时，会报如下错误： Warning: This layout cannot be d as it is currently assigned as the default store layout!.

4. 模块管理中卸载所有模块

Extensions -> Modules : 卸载所有模块

5. 商店布局

System -> Design -> Layouts ( Layout 布局页面 )

将 Default 重命名为 Store Default。

此时查看你网站前台所有的页面，会是一列的布局，没有左右的条目。

6. 转到模块管理页面

Extensions -> Modules ( 模块管理页面 )

安装分类模块

使用如下设定增加模块：

Layout: Store Default

Position: Column Left

Status: Enabled

Sort Order: 1

此时检查网站前台，所有页面会是两列，左列是分类模块。

7. 基于路由的布局

7.1首页

布局页面，使用如下设定新增布局

Layout Name: Homepage

Store: default

Route: common/home

此时检查网站前台，首页会是一列，而其他页面会仍然是两列。

模块配置页面，安装 Slideshow 模块, 使用如下设定新增模块：

Banner: Samsung Tab

Dimension (W x H): 980 x 280

Layout: Homepage

Position: Content Top

Status: Enabled

Sort Order: 1

检查网站前台会发现

首页: 一列（Slideshow模块），

所有其它页面: 两列（带有左侧分类模块的两列）。

7.2分类页面

在布局页面，使用如下设定新增布局:

Layout Name: Category Page

Store: default

Route: product/category

此时检查你的网站前台，分类页面将之显示一列

在模块管理部分，编辑分类模块，使用如下设定新增模块：

Layout: Category Page

Position: Column Left

Status: Enabled

Sort Order: 1

在模块管理部分，安装Banner模块，使用如下设定新增模块：

Banner: HP Products

Dimension (W x H): 182 x 202

Layout: Category Page

Position: Column Left

Status: Enabled

Sort Order: 2

此时网站前台显示为

首页: 带有Slideshow模块的一列

分类页面：带有左列（Banner和Category模块）的两列。

所有其它页面: 带有左列（分类模块）的两列。

7.3特定页面布局

现在，我们要在Desktop这个分类的页面添加信息文章模块。

Desktop 这个分类页面将包含三个模块，而其他的分类页面仍然只包含两个模块。

在布局页面，使用如下设定添加新布局:

Layout Name: Category Page - Desktop

Store: default

Route: product/category ( 注意这里没错，这个路由与分类页面的路由是完全一致的)

在模块管理页面，编辑分类模块，使用如下设定新增模块：

Layout: Category Page - Desktop

Position: Column Left

Status: Enabled

Sort Order: 1

在模块管理页面，编辑Banner模块，使用如下设定新增模块：

Banner: HP Products

Dimension (W x H): 182 x 202

Layout: Category Page - Desktop

Position: Column Left

Status: Enabled

Sort Order: 2

在模块管理页面，安装文章信息模块(Information)，使用如下设定新增模块：

Layout: Category Page - Desktop

Position: Column Left

Status: Enabled

Sort Order: 1

在分类页面. ( Catalog -> Categories )

编辑名称为 Desktop 的分类。

点击到标签页 Design, 在布局 Layout Overide 部分选择 Category Page - Desktop.

此时检查网站前台

首页: 一列（Slideshow模块），

分类Page Desktop页面: 两列（带有左侧三个模块 - Banner, Category 和 Information 模块 )。

所有其他分类页面：两列（带有左侧两个模块 - Banner 和 Category 模块）。

所有其它页面: 两列（带有左侧分类模块的两列）。

你可以使用上述同样的办法，将不同的banner添加到不同的页面，不仅仅包含分类页面，也包含产品product和文章信息information页面。

8. 参考使用如下路由

Layout name => route

代码: Home => common/home

Product => product/product

Category => product/category

Manufacturer => product/manufacturer

Information => information/information

Contact => information/contact

Sitemap => information/sitemap

Checkout => checkout/

Account => account/

Affiliate => affiliate/