OpenCart佈局(Layout)系統是怎樣工作的

來源:文萃谷 1.31W

Q:

OpenCart佈局(Layout)系統是怎樣工作的

佈局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/

熱門標籤