OpenCart佈局(Layout)系統是如何工做的？

本文轉載自：http://www.opencartchina.com/bbs/topic706.html

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/