西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > OpenCart教程 >

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

时间:2016-01-15 10:43来源: 作者: 点击:
OpenCart布局Layout系统在1.5.x版本中是如何工作的?能否如之前的1.4.x版本在所有页面显示相关模块,或者为特定的分类页面设定横幅广告banner模块? A: 目前的布局Layout系统可以: 1. 为所

OpenCart布局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/(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容