OpenCart之佈局(Layout)教程

本教程由 opencart中國網站製做,若有轉載請註明出處: http://www.opencartchina.com/bbs/topic1009.html
若是對opencart感興趣,也能夠加入QQ羣:282797742進行討論。
OpenCart的設計佈局比較靈活,大致分爲五個部分:網站頭部(Header)、網站底部(Footer)、左列(Column Left)、網站右列(Column Right)、網站內容(頂部(Content Top)和(Content Bottom)),圖示以下:
layout_1.png


在網站後臺所管理的各個模塊,都可以自由配置於上面的Column Left(左列),Column Right(右列),Content Top(內容頂部),Content Bottom(內容底部),每一個部分的模塊的排列順序由設置模塊時填寫的順序數字來決定。
若是右列沒有設置任何模塊,則,中間的content內容部分自動擴展至網站右邊緣,以下圖所示:
layout_2.png


若是左列沒有設置任何模塊,則,中間的content內容部分自動擴展至網站左邊緣,以下圖所示:
layout_3.png


下面咱們爲產品id爲28的產品詳細頁面設定一個特定的佈局,關於layout部分是如何工做的,請參考帖子: OpenCart佈局(Layout)系統是如何工做的?
咱們要爲該產品設定的特定佈局以下圖所示:
layout_4.png


1. 首先添加一個特定的佈局,【系統設置(System)】 -> 【規劃設計(Design)】 -> 【佈局(Layouts)】 ,新增以下佈局:
layout_5.jpg

2. 【擴展功能(Extensions)】 -> 【模塊管理(Modules)】 -> 【幻燈片(Slideshow)】,設置以下:
layout_6.jpg

3. 【擴展功能(Extensions)】 -> 【模塊管理(Modules)】 -> 【特點產品(Featured)】,設置以下:
layout_7.jpg

4. 【擴展功能(Extensions)】 -> 【模塊管理(Modules)】 -> 【最新產品(Latest)】,設置以下:
layout_8.jpg

5. 【擴展功能(Extensions)】 -> 【模塊管理(Modules)】 -> 【橫幅廣告(Banner)】,設置以下:
layout_9.jpg

   6. 【商品目錄(Catalog) -> 【商品管理(Products)】 編輯產品id28的產品,作以下設定:

 
7. 上述設置完成後,當咱們單獨訪問id爲28的產品詳細頁面時,會顯示以下圖所示:

 
layout_10.jpg
本教程結束!
相關文章
相關標籤/搜索