OpenCart布局(Layout)系统是如何工作的

sunboy

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 deleted 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/

ziyexinghe

老大威武