OpenCart之佈局(Layout)教程

本教程由 opencart中國網站製做，若有轉載請註明出處： http://www.opencartchina.com/bbs/topic1009.html

若是對opencart感興趣，也能夠加入QQ羣：282797742進行討論。

OpenCart的設計佈局比較靈活，大致分爲五個部分：網站頭部(Header)、網站底部(Footer)、左列(Column Left)、網站右列(Column Right)、網站內容(頂部(Content Top)和(Content Bottom))，圖示以下：

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

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

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

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

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

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

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

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

   6. 【商品目錄(Catalog)】 -> 【商品管理(Products)】 編輯產品id爲28的產品，作以下設定：

 

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

 

本教程結束！