OpenCart布局(Layout)系統(tǒng)是如何工作的？

Opencart

Q：
布局Layout系統(tǒng)在1.5.x版本中是如何工作的？能否如之前的1.4.x版本在所有頁面顯示相關(guān)模塊，或者為特定的分類頁面設(shè)定橫幅廣告banner模塊？

A:
目前的布局Layout系統(tǒng)可以：
1. 為所有的頁面設(shè)定要顯示的模塊；
2. 基于路徑（Route），可以在不同的頁面設(shè)定顯示不同的模塊；
3. 為不同的分類頁面，產(chǎn)品以及文章信息頁面設(shè)定不同的模組（如Banner）；
4. 如果你建立的是多商店模式，你可以為不同的商店設(shè)定如上三點(diǎn)所述。

如下教程可以幫助你理解此系統(tǒng)。

1. 概述：運(yùn)作原理

首先，opencart將檢查是否有為分類，產(chǎn)品以及文章信息頁面設(shè)定的布局Layout，如果有，就應(yīng)用它。
如果檢查結(jié)果為false，opencart將檢查基于路由route url的布局是否存在。
當(dāng)?shù)诙�次檢查結(jié)果為false，opencart將采用Store Layout作為返回結(jié)果。

2. 手把手教學(xué)
請?jiān)谀愕膁emo測試環(huán)境下測試這些步驟。

3. 刪除demo布局
System -> Design -> Layouts : 除了 Default外，刪除其它的
當(dāng)你將一個布局賦予一個商店，而該商店將其作為了默認(rèn)基本布局，則你在刪除該布局時，會報如下錯誤： 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。

此時查看你網(wǎng)站前臺所有的頁面，會是一列的布局，沒有左右的條目。

6. 轉(zhuǎn)到模塊管理頁面
Extensions -> Modules ( 模塊管理頁面 )
安裝分類模塊
使用如下設(shè)定增加模塊：
Layout: Store Default
Position: Column Left
Status: Enabled
Sort Order: 1

此時檢查網(wǎng)站前臺，所有頁面會是兩列，左列是分類模塊。

7. 基于路由的布局
7.1首頁
布局頁面，使用如下設(shè)定新增布局
Layout Name: Homepage
Store: default
Route: common/home
此時檢查網(wǎng)站前臺，首頁會是一列，而其他頁面會仍然是兩列。
模塊配置頁面，安裝 Slideshow 模塊, 使用如下設(shè)定新增模塊：
Banner: Samsung Tab
Dimension (W x H): 980 x 280
Layout: Homepage
Position: Content Top
Status: Enabled
Sort Order: 1
檢查網(wǎng)站前臺會發(fā)現(xiàn)
首頁: 一列（Slideshow模塊），
所有其它頁面: 兩列（帶有左側(cè)分類模塊的兩列）。

7.2分類頁面
在布局頁面，使用如下設(shè)定新增布局:
Layout Name: Category Page
Store: default
Route: product/category

此時檢查你的網(wǎng)站前臺，分類頁面將之顯示一列
在模塊管理部分，編輯分類模塊，使用如下設(shè)定新增模塊：
Layout: Category Page
Position: Column Left
Status: Enabled
Sort Order: 1

在模塊管理部分，安裝Banner模塊，使用如下設(shè)定新增模塊：
Banner: HP Products
Dimension (W x H): 182 x 202
Layout: Category Page
Position: Column Left
Status: Enabled
Sort Order: 2

此時網(wǎng)站前臺顯示為
首頁: 帶有Slideshow模塊的一列
分類頁面：帶有左列（Banner和Category模塊）的兩列。
所有其它頁面: 帶有左列（分類模塊）的兩列。

7.3特定頁面布局

現(xiàn)在，我們要在Desktop這個分類的頁面添加信息文章模塊。

Desktop 這個分類頁面將包含三個模塊，而其他的分類頁面仍然只包含兩個模塊。


在布局頁面，使用如下設(shè)定添加新布局:
Layout Name: Category Page - Desktop
Store: default
Route: product/category ( 注意這里沒錯，這個路由與分類頁面的路由是完全一致的)

在模塊管理頁面，編輯分類模塊，使用如下設(shè)定新增模塊：
Layout: Category Page - Desktop
Position: Column Left
Status: Enabled
Sort Order: 1

在模塊管理頁面，編輯Banner模塊，使用如下設(shè)定新增模塊：
Banner: HP Products
Dimension (W x H): 182 x 202
Layout: Category Page - Desktop
Position: Column Left
Status: Enabled
Sort Order: 2

在模塊管理頁面，安裝文章信息模塊(Information)，使用如下設(shè)定新增模塊：
Layout: Category Page - Desktop
Position: Column Left
Status: Enabled
Sort Order: 1

在分類頁面. ( Catalog -> Categories )
編輯名稱為 Desktop 的分類。
點(diǎn)擊到標(biāo)簽頁 Design, 在布局 Layout Overide 部分選擇 Category Page - Desktop.

此時檢查網(wǎng)站前臺
首頁: 一列（Slideshow模塊），
分類Page Desktop頁面: 兩列（帶有左側(cè)三個模塊 - Banner, Category 和 Information 模塊 )。
所有其他分類頁面：兩列（帶有左側(cè)兩個模塊 - Banner 和 Category 模塊）。
所有其它頁面: 兩列（帶有左側(cè)分類模塊的兩列）。

你可以使用上述同樣的辦法，將不同的banner添加到不同的頁面，不僅僅包含分類頁面，也包含產(chǎn)品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/
OpenCart中國網(wǎng)站