好文 百文网手机站

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

时间:2022-02-24 11:43:48 好文 我要投稿

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/