Adding a new position for different layout in OpenCart 2.2 like full width

A week early Opencart.com launched its new design and layout, and we were going through the website and found that it is using full-width layout but default OpenCart installation does not have full width in the content area. Thus we started to make the full-width position for different layout in OpenCart 2.2.

For OpenCart 3 full-width module visit below:
https://webocreation.com/opencart-free-extension-to-add-full-width-position-in-layout

Admin works

Find following code at admin/view/template/design/layout_form.tpl

Just below it, add the following code:

 

    

        

            

                
Full Width
            
        
        

            
                
                    

                        

                            

                                
                                    
                                        
                                            
                                                
                                                    
                                                
                                                    
                                                
                                            
                                                
                                                    
                                                        
                                                    
                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                                
                                
                                

                                    
                                        
                                    
                                    
                                        
                                    
                                
                            
                        
                    
                    
                
            
        
        

            

                

                    

                        
                            
                                
                                    
                                        
                                    
                                        
                                            
                                        
                                    
                                
                            
                        
                        

                            
                                
                            
                        
                    
                
            
        
    

Now on the same page find:

$('#module-column-left, #module-column-right, #module-content-top, #module-content-bottom

Then add #module-content-full just after that code above in two places and final JavaScript codes will look like below:

import App from './app.js';

const app = new App();

$('#module-column-left, #module-column-right, #module-content-top, #module-content-bottom, #module-content-full').delegate("select[name*='code']", 'change', function() {
  var part = this.value.split('.');
  if (!part[1]) {
    $(this)
      .parent()
      .find('a')
      .attr(
        'href',
        'index.php?route=extension/module/' +
          part[0] +
          '&token='
      );
  } else {
    $(this)
      .parent()
      .find('a')
      .attr(
        'href',
        'index.php?route=extension/module/' +
          part[0] +
          '&token=&module_id=' +
          part[1]
      );
  }
});

$('#module-column-left, #module-column-right, #module-content-top, #module-content-bottom, #module-content-full').trigger('change');

Admin works completed now we have to work in front end or presentation layer.

Front end works:

First, make the content full Controller and .tpl file to show the modules:

Create a file named content_full.tpl at catalog\view\theme\default\template\common folder and place the code below:

Similarly, create another file named content_full.php at catalog\controller\common folder and place the code below:

load->model('design/layout');

 if (isset($this->request->get['route'])) {
 $route = (string)$this->request->get['route'];
 } else {
 $route = 'common/home';
 }

 $layout_id = 0;

 if ($route == 'product/category' && isset($this->request->get['path'])) {
 $this->load->model('catalog/category');

 $path = explode('_', (string)$this->request->get['path']);

 $layout_id = $this->model_catalog_category->getCategoryLayoutId(end($path));
 }

 if ($route == 'product/product' && isset($this->request->get['product_id'])) {
 $this->load->model('catalog/product');

 $layout_id = $this->model_catalog_product->getProductLayoutId($this->request->get['product_id']);
 }

 if ($route == 'information/information' && isset($this->request->get['information_id'])) {
 $this->load->model('catalog/information');

 $layout_id = $this->model_catalog_information->getInformationLayoutId($this->request->get['information_id']);
 }

 if (!$layout_id) {
 $layout_id = $this->model_design_layout->getLayout($route);
 }

 if (!$layout_id) {
 $layout_id = $this->config->get('config_layout_id');
 }

 $this->load->model('extension/module');

 $data['modules'] = array();
 $modules = $this->model_design_layout->getLayoutModules($layout_id, 'column_full');

 foreach ($modules as $module) {
 $part = explode('.', $module['code']);

 if (isset($part[0]) && $this->config->get($part[0] . '_status')) {
 $module_data = $this->load->controller('extension/module/' . $part[0]);

 if ($module_data) {
 $data['modules'][] = $module_data;
 }
 }

 if (isset($part[1])) {
 $setting_info = $this->model_extension_module->getModule($part[1]);

 if ($setting_info && $setting_info['status']) {
 $output = $this->load->controller('extension/module/' . $part[0], $setting_info);

 if ($output) {
 $data['modules'][] = $output;
 }
 }
 }
 }
 return $this->load->view('common/content_full', $data);
 }
}

Now show this at the account/login layout

Open catalog\controller\account\login.php controller file and find the following line:

$data['column_right'] = $this->load->controller('common/column_right');

Then below it add following code:

$data['content_full'] = $this->load->controller('common/content_full');

Open catalog\view\theme\default\template\account\login.tpl file and find following code:

Below it adds the following line of code:

Ocmod file to add the full-width position to all layout at the front end:

    Full Width Module Position
    1.0
    WebOCreation
    https://webocreation.com
    Full_Width_Position_1_1
    
        
            load->controller('common/column_left');
            ]]>
            load->controller('common/content_full');
            ]]>
        
    
    
        
            
            ]]>
            
            ]]>
        
    

Enjoy and let me know if there is any confusion so that we can move ahead to solve the problem.

Search terms: new module positions, opencart position, module positions, opencart layout, opencart layout tutorials