Community Forums

Q: How Layout System Works

Q: How Layout System Works

Postby qahar » Wed Jul 27, 2011 11:50 pm

Question:
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:
  1. Set module to show on all page.
  2. Set different module to show on different page (based on route).
  3. Set different module (may be Banner) to different Category, Product and Information page.
  4. If you have multi-store, you can set all feature above for different store.

Tutorial bellow will help you to understand the Layout System.

Overview: How it work?
  1. First, opencart will check is there any Layout spesifically for Category, Product or Information Page. Then Apply it.
  2. When first check above return false, opencart will check is there Layout based on route url is available.
  3. When second check above return false, opencart use Store Layout as a "fallback".

Step-by-step Learn
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.

  1. Delete default Layout demo
    1. 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!.
    2. Extensions -> Modules : uninstall all
  2. Store Layout
    1. System -> Design -> Layouts ( Layout Pages )
      1. rename Default into Store Default ( To avoid miss understanding about the used of default word ).
      2. Check your site (frontpage): all page should be 1 column with no sidebar.
    2. Extensions -> Modules ( Modules Page )
      1. Install Category module
      2. Add module, use curent setting:
        1. Layout: Store Default
        2. Position: Column Left
        3. Status: Enabled
        4. Sort Order: 1
      3. Check your site: all page should be 2 column with left sidebar ( Category module ).
  3. Route Based Layout
    1. Homepage
      1. Layouts Page. Insert new layout, use curent setting:
        1. Layout Name: Homepage
        2. Store: default
        3. Route: common/home
          If you check your site now, homepage will show 1 column and all other page will show 2 column.
      2. Modules Page. Install Slideshow module, add new module with curent setting:
        1. Banner: Samsung Tab
        2. Dimension (W x H): 980 x 280
        3. Layout: Homepage
        4. Position: Content Top
        5. Status: Enabled
        6. Sort Order: 1
      3. Check your site
        1. Homepage: 1 column with Slideshow module.
        2. All other page: 2 column with left sidebar ( Category module | see B.2.c ).
    2. Category Page
      1. Layouts Page. Insert new layout, use curent setting:
        1. Layout Name: Category Page
        2. Store: default
        3. Route: product/category
          If you check your site now, category page will show 1 column.
      2. Modules Page. Edit Category module, add module with curent setting:
        1. Layout: Category Page
        2. Position: Column Left
        3. Status: Enabled
        4. Sort Order: 1
      3. Modules Page. Install Banner module, add new module with curent setting:
        1. Banner: HP Products
        2. Dimension (W x H): 182 x 202
        3. Layout: Category Page
        4. Position: Column Left
        5. Status: Enabled
        6. Sort Order: 2
      4. Check your site
        1. Homepage: 1 column with Slideshow module.
        2. Category Page: 2 column with left sidebar ( Banner and Category module ).
        3. All other page: 2 column with left sidebar ( Category module | see C.1.c.ii).
  4. 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 )

    1. Spesific Category Page
      1. Layouts Page. Insert new layout, use curent setting:
        1. Layout Name: Category Page - Desktop
        2. Store: default
        3. Route: none ( it's not a mistake, for specific override layout best practice is to not use the route)
      2. Modules Page. Edit Category module, add module with curent setting:
        1. Layout: Category Page - Desktop
        2. Position: Column Left
        3. Status: Enabled
        4. Sort Order: 1
      3. Modules Page. Edit Banner module, add new module with curent setting:
        1. Banner: HP Products
        2. Dimension (W x H): 182 x 202
        3. Layout: Category Page - Desktop
        4. Position: Column Left
        5. Status: Enabled
        6. Sort Order: 2
      4. Modules Page. Install Information module, add module with curent setting:
        1. Layout: Category Page - Desktop
        2. Position: Column Left
        3. Status: Enabled
        4. Sort Order: 1
      5. Category Page. ( Catalog -> Categories )
        1. Edit category name Desktop.
        2. Go to tab Design, on Layout Overide choose Category Page - Desktop.
      6. Check your site
        1. Homepage: 1 column with Slideshow module.
        2. Category Page Desktop: 2 column with left sidebar ( Banner, Category and Information module ).
        3. All other Category Page: 2 column with left sidebar ( Banner and Category module | see C.2.d.ii).
        4. All other page: 2 column with left sidebar ( Category module | see C.2.d.iii ).

    Now you can use the same method above to put different banner to different page. Not just Category page, but also Product and Information.

    In case you need refference, for the route:
    Layout name => route
    Code: 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/

Note:
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.
Last edited by qahar on Mon Jun 09, 2014 12:03 pm, edited 1 time in total.
Reason: specific layout override, layout doesn't need route
My product: Opencart Blog Manager Free System Information OpenCart Shortcodes
OpencartNews - News, Tutorial n Tips - Common OpenCart Errors and How to Solve Them
Don't forget to add [SOLVED] to your Thread Title (first post), if your issue is solved.
User avatar
qahar
 
Posts: 1780
Joined: Tue Jun 29, 2010 9:24 am
Location: Indonesia

Return to Configuration

Who is online

Users browsing this forum: No registered users and 7 guests

Hosted by Arvixe Web Hosting