The layout is the process of setting out material on a page, in OpenCart materials are modules. So if we want to show a set of modules in specific URL or set of URLs then we can us Layouts and Positions.

Go to Admin >> Design >> Layouts where you can see all the layouts.

By default OpenCart has following layouts:

  1. Account
  2. Affiliate
  3. Category
  4. Checkout
  5. Compare
  6. Contact
  7. Default
  8. Home
  9. Information
  10. Manufacturer
  11. Product
  12. Search
  13. Sitemap

Inside each layouts it has four positions:

  1. Column left
  2. Content Top
  3. Content Bottom
  4. Column Right

You can add your own custom layouts and show modules in that layout.  Let’s say you want to show different layout for each Category.

How to show different layouts for different pages in OpenCart 3?

By default there are 2 – column layout sets for each category. We can add different layout for different pages if it is set. Like we can assign different layout for each category, product and information pages. Let’s say you want to show two column for “About us” page and three column for “Delivery Information” and default layout for “Privacy Policy

Here are the steps:

  1. Go to Admin >> Design >> Layouts. Click “+” at the top right corner, to create the new layout. Say “Information 3 column”
  2. Click Add route and enter  catalog/information. To have 3 columns on information page add some blocks in Column Left and Column Right positions, for example, Information and Category
  3. Do same for other

Now in the Admin >> Catalog >> Information >> Edit respective one >> In the Design tab choose the required layout.

Position and Layout of OpenCart

Like this way you can override the layout.

What programmers/designers need to take care about positions and layout are:

  1. Include CSS classes as per Opencart while creating the module so everyone can use your module, similarly while designing the theme be sure to use OpenCart bootstrap CSS so all custom modules that you use does not give design issues.
  2. Be sure to add CSS that supports three-column structure, two column left column activated, two column right column and only one column activated.
    With bootstrap you can see how opencart is handling it:
    {% if column_left and column_right %}
    {% set class = ‘col-sm-6’ %}
    {% elseif column_left or column_right %}
    {% set class = ‘col-sm-9’ %}
    {% else %}
    {% set class = ‘col-sm-12’ %}
    {% endif %}
  3. CSS adjustment for multi-column modules like: 
    /* fixed colum left + content + right*/
    @media (min-width: 768px) {
        #column-left  .product-layout .col-md-3 {
           width: 100%;
        }
    
    #column-left + #content .product-layout .col-md-3 {
           width: 50%;
        }
    
    #column-left + #content + #column-right .product-layout .col-md-3 {
           width: 100%;
        }
    #content + #column-right .product-layout .col-md-3 {
           width: 100%;
        }
    }
    
    /* fixed product layouts used in left and right columns */
    #column-left .product-layout, #column-right .product-layout {
    	width: 100%;
    }
    

In the above CSS you can see how bootstrap classes style are overridden when the module is in the left column or the right column. So we also need to take care of them likewise while making modules.

 

As OpenCart is using bootstrap, it is handling this with col-sm classes. As per the above code, it is assigning a different class. If both the column left and column right are activated which means three columns then the content middle will be col-sm-6, if only one column is activated either column left or column right then col-sm-9 is assigned. If none column is activated then col-sm-12 is assigned to the content middle and widths are adjusted accordingly.

Taking layout related database tables into consideration we can see that layout has the name. Each layout can have multiple routes as per the store. The layout can have many modules for each different positions. Each page can use the layout as we see a layout id in the category, information, product etc. So, if you are creating the pages then take layout into consideration.

Please let us know if you have any questions or concerns. Please don’t forget to post your questions or comments so that I can add extra topics. You can follow at my twitter account rupaknpl and subscribe YouTube user onlinegyannepal. Thanks a lot.

LEAVE A REPLY

Please enter your comment!
Please enter your name here