- 相關(guān)推薦
OpenCart布局(Layout)系統(tǒng)是怎樣工作的
Q:
布局Layout系統(tǒng)在1.5.x版本中是如何工作的?能否如之前的1.4.x版本在所有頁(yè)面顯示相關(guān)模塊,或者為特定的分類頁(yè)面設(shè)定橫幅廣告banner模塊?
A:
目前的布局Layout系統(tǒng)可以:
1. 為所有的頁(yè)面設(shè)定要顯示的模塊;
2. 基于路徑(Route),可以在不同的頁(yè)面設(shè)定顯示不同的模塊;
3. 為不同的分類頁(yè)面,產(chǎn)品以及文章信息頁(yè)面設(shè)定不同的模組(如Banner);
4. 如果你建立的是多商店模式,你可以為不同的商店設(shè)定如上三點(diǎn)所述。
如下教程可以幫助你理解此系統(tǒng)。
1. 概述:運(yùn)作原理
首先,opencart將檢查是否有為分類,產(chǎn)品以及文章信息頁(yè)面設(shè)定的布局Layout,如果有,就應(yīng)用它。
如果檢查結(jié)果為false,opencart將檢查基于路由route url的布局是否存在。
當(dāng)?shù)诙螜z查結(jié)果為false,opencart將采用Store Layout作為返回結(jié)果。
2. 手把手教學(xué)
請(qǐng)?jiān)谀愕膁emo測(cè)試環(huán)境下測(cè)試這些步驟。
3. 刪除demo布局
System -> Design -> Layouts : 除了 Default外,刪除其它的
當(dāng)你將一個(gè)布局賦予一個(gè)商店,而該商店將其作為了默認(rèn)基本布局,則你在刪除該布局時(shí),會(huì)報(bào)如下錯(cuò)誤: Warning: This layout cannot be d as it is currently assigned as the default store layout!.
4. 模塊管理中卸載所有模塊
Extensions -> Modules : 卸載所有模塊
5. 商店布局
System -> Design -> Layouts ( Layout 布局頁(yè)面 )
將 Default 重命名為 Store Default。
此時(shí)查看你網(wǎng)站前臺(tái)所有的頁(yè)面,會(huì)是一列的布局,沒(méi)有左右的條目。
6. 轉(zhuǎn)到模塊管理頁(yè)面
Extensions -> Modules ( 模塊管理頁(yè)面 )
安裝分類模塊
使用如下設(shè)定增加模塊:
Layout: Store Default
Position: Column Left
Status: Enabled
Sort Order: 1
此時(shí)檢查網(wǎng)站前臺(tái),所有頁(yè)面會(huì)是兩列,左列是分類模塊。
7. 基于路由的布局
7.1首頁(yè)
布局頁(yè)面,使用如下設(shè)定新增布局
Layout Name: Homepage
Store: default
Route: common/home
此時(shí)檢查網(wǎng)站前臺(tái),首頁(yè)會(huì)是一列,而其他頁(yè)面會(huì)仍然是兩列。
模塊配置頁(yè)面,安裝 Slideshow 模塊, 使用如下設(shè)定新增模塊:
Banner: Samsung Tab
Dimension (W x H): 980 x 280
Layout: Homepage
Position: Content Top
Status: Enabled
Sort Order: 1
檢查網(wǎng)站前臺(tái)會(huì)發(fā)現(xiàn)
首頁(yè): 一列(Slideshow模塊),
所有其它頁(yè)面: 兩列(帶有左側(cè)分類模塊的兩列)。
7.2分類頁(yè)面
在布局頁(yè)面,使用如下設(shè)定新增布局:
Layout Name: Category Page
Store: default
Route: product/category
此時(shí)檢查你的網(wǎng)站前臺(tái),分類頁(yè)面將之顯示一列
在模塊管理部分,編輯分類模塊,使用如下設(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
此時(shí)網(wǎng)站前臺(tái)顯示為
首頁(yè): 帶有Slideshow模塊的一列
分類頁(yè)面:帶有左列(Banner和Category模塊)的兩列。
所有其它頁(yè)面: 帶有左列(分類模塊)的兩列。
7.3特定頁(yè)面布局
現(xiàn)在,我們要在Desktop這個(gè)分類的頁(yè)面添加信息文章模塊。
Desktop 這個(gè)分類頁(yè)面將包含三個(gè)模塊,而其他的分類頁(yè)面仍然只包含兩個(gè)模塊。
在布局頁(yè)面,使用如下設(shè)定添加新布局:
Layout Name: Category Page - Desktop
Store: default
Route: product/category ( 注意這里沒(méi)錯(cuò),這個(gè)路由與分類頁(yè)面的路由是完全一致的)
在模塊管理頁(yè)面,編輯分類模塊,使用如下設(shè)定新增模塊:
Layout: Category Page - Desktop
Position: Column Left
Status: Enabled
Sort Order: 1
在模塊管理頁(yè)面,編輯Banner模塊,使用如下設(shè)定新增模塊:
Banner: HP Products
Dimension (W x H): 182 x 202
Layout: Category Page - Desktop
Position: Column Left
Status: Enabled
Sort Order: 2
在模塊管理頁(yè)面,安裝文章信息模塊(Information),使用如下設(shè)定新增模塊:
Layout: Category Page - Desktop
Position: Column Left
Status: Enabled
Sort Order: 1
在分類頁(yè)面. ( Catalog -> Categories )
編輯名稱為 Desktop 的分類。
點(diǎn)擊到標(biāo)簽頁(yè) Design, 在布局 Layout Overide 部分選擇 Category Page - Desktop.
此時(shí)檢查網(wǎng)站前臺(tái)
首頁(yè): 一列(Slideshow模塊),
分類Page Desktop頁(yè)面: 兩列(帶有左側(cè)三個(gè)模塊 - Banner, Category 和 Information 模塊 )。
所有其他分類頁(yè)面:兩列(帶有左側(cè)兩個(gè)模塊 - Banner 和 Category 模塊)。
所有其它頁(yè)面: 兩列(帶有左側(cè)分類模塊的兩列)。
你可以使用上述同樣的辦法,將不同的banner添加到不同的頁(yè)面,不僅僅包含分類頁(yè)面,也包含產(chǎn)品product和文章信息information頁(yè)面。
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布局(Layout)系統(tǒng)是怎樣工作的】相關(guān)文章:
廚房風(fēng)水布局02-29
善于布局的星座女12-17
怎樣快樂(lè)的工作10-05
怎樣積極的工作09-08
廚房風(fēng)水正確位置布局12-18
辦公室的風(fēng)水布局12-19
則怎樣做好信貸工作08-16
怎樣消除工作疲勞08-08
學(xué)會(huì)怎樣更好的工作09-20