How does layout system on 1.5 work?
Can I show modules on all page like previous Opencart 1.4.x?
Or set spesific Banner Module to spesific Category Page?
Answer:
With curent Layout System you can:
- Set module to show on all page.
- Set different module to show on different page (based on route).
- Set different module (may be Banner) to different Category, Product and Information page.
- If you have multi-store, you can set all feature above for different store.
Overview: How it work?
- First, opencart will check is there any Layout spesifically for Category, Product or Information Page. Then Apply it.
- When first check above return false, opencart will check is there Layout based on route url is available.
- When second check above return false, opencart use Store Layout as a "fallback".
Test this step on your demo site/ not a Live site. In this step-learn, every tutorial is an example of layout override for the step before it. So the end result is continuity from the first step.
- Delete default Layout demo
- System -> Design -> Layouts : delete all except Default
When you force to delete a Layout that belong to store (used as base layout) you will get a message: Warning: This layout cannot be deleted as it is currently assigned as the default store layout!. - Extensions -> Modules : uninstall all
- System -> Design -> Layouts : delete all except Default
- Store Layout
- System -> Design -> Layouts ( Layout Pages )
- rename Default into Store Default ( To avoid miss understanding about the used of default word ).
- Check your site (frontpage): all page should be 1 column with no sidebar.
- Extensions -> Modules ( Modules Page )
- Install Category module
- Add module, use curent setting:
- Layout: Store Default
- Position: Column Left
- Status: Enabled
- Sort Order: 1
- Check your site: all page should be 2 column with left sidebar ( Category module ).
- System -> Design -> Layouts ( Layout Pages )
- Route Based Layout
- Homepage
- Layouts Page. Insert new layout, use curent setting:
- Layout Name: Homepage
- Store: default
- Route: common/home
If you check your site now, homepage will show 1 column and all other page will show 2 column.
- Modules Page. Install Slideshow module, add new module with curent setting:
- Banner: Samsung Tab
- Dimension (W x H): 980 x 280
- Layout: Homepage
- Position: Content Top
- Status: Enabled
- Sort Order: 1
- Check your site
- Homepage: 1 column with Slideshow module.
- All other page: 2 column with left sidebar ( Category module | see B.2.c ).
- Layouts Page. Insert new layout, use curent setting:
- Category Page
- Layouts Page. Insert new layout, use curent setting:
- Layout Name: Category Page
- Store: default
- Route: product/category
If you check your site now, category page will show 1 column.
- Modules Page. Edit Category module, add module with curent setting:
- Layout: Category Page
- Position: Column Left
- Status: Enabled
- Sort Order: 1
- Modules Page. Install Banner module, add new module with curent setting:
- Banner: HP Products
- Dimension (W x H): 182 x 202
- Layout: Category Page
- Position: Column Left
- Status: Enabled
- Sort Order: 2
- Check your site
- Homepage: 1 column with Slideshow module.
- Category Page: 2 column with left sidebar ( Banner and Category module ).
- All other page: 2 column with left sidebar ( Category module | see C.1.c.ii).
- Layouts Page. Insert new layout, use curent setting:
- Homepage
- Spesific Page Layout
Now we will add Information module into Desktop category page.
Desktop category page will have 3 module, while other category page still have 2 module ( see C.2.d.ii )
- Spesific Category Page
- Layouts Page. Insert new layout, use curent setting:
- Layout Name: Category Page - Desktop
- Store: default
- Route: none ( it's not a mistake, for specific override layout best practice is to not use the route)
- Modules Page. Edit Category module, add module with curent setting:
- Layout: Category Page - Desktop
- Position: Column Left
- Status: Enabled
- Sort Order: 1
- Modules Page. Edit Banner module, add new module with curent setting:
- Banner: HP Products
- Dimension (W x H): 182 x 202
- Layout: Category Page - Desktop
- Position: Column Left
- Status: Enabled
- Sort Order: 2
- Modules Page. Install Information module, add module with curent setting:
- Layout: Category Page - Desktop
- Position: Column Left
- Status: Enabled
- Sort Order: 1
- Category Page. ( Catalog -> Categories )
- Edit category name Desktop.
- Go to tab Design, on Layout Overide choose Category Page - Desktop.
- Check your site
- Homepage: 1 column with Slideshow module.
- Category Page Desktop: 2 column with left sidebar ( Banner, Category and Information module ).
- All other Category Page: 2 column with left sidebar ( Banner and Category module | see C.2.d.ii).
- All other page: 2 column with left sidebar ( Category module | see C.2.d.iii ).
- Layouts Page. Insert new layout, use curent setting:
In case you need refference, for the route:
Layout name => routeCode: Select all
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/
- Spesific Category Page
Since most user unable to reply this post, if you want to suggest think to improve this tutorial you can PM me. No Question Please!
Make new post on Support Forum if you have any question.