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
<legend><?php echo $text_module; ?></legend> <?php $module_row = 0; ?> <div class="row">
Just below it, add the following code:
<div class="col-lg-12 col-md-12 col-sm-12"> <table id="module-column-full" class="table table-striped table-bordered table-hover"> <thead> <tr> <td class="text-center">Full Width</td> </tr> </thead> <tbody> <?php foreach ($layout_modules as $layout_module) { ?> <?php if ($layout_module['position'] == 'column_full') { ?> <tr id="module-row<?php echo $module_row; ?>"> <td class="text-left"> <div class="input-group"> <select name="layout_module[<?php echo $module_row; ?>][code]" class="form-control input-sm"> <?php foreach ($extensions as $extension) { ?> <optgroup label="<?php echo $extension['name']; ?>"> <?php if (!$extension['module']) { ?> <?php if ($extension['code'] == $layout_module['code']) { ?> <option value="<?php echo $extension['code']; ?>" selected="selected"><?php echo $extension['name']; ?></option> <?php } else { ?> <option value="<?php echo $extension['code']; ?>"><?php echo $extension['name']; ?></option> <?php } ?> <?php } else { ?> <?php foreach ($extension['module'] as $module) { ?> <?php if ($module['code'] == $layout_module['code']) { ?> <option value="<?php echo $module['code']; ?>" selected="selected"><?php echo $module['name']; ?></option> <?php } else { ?> <option value="<?php echo $module['code']; ?>"><?php echo $module['name']; ?></option> <?php } ?> <?php } ?> <?php } ?> </optgroup> <?php } ?> </select> <input type="hidden" name="layout_module[<?php echo $module_row; ?>][position]" value="<?php echo $layout_module['position']; ?>"/> <input type="hidden" name="layout_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $layout_module['sort_order']; ?>"/> <div class="input-group-btn"> <a href="<?php echo $layout_module['edit']; ?>" type="button" data-toggle="tooltip" title="<?php echo $button_edit; ?>" target="_blank" class="btn btn-primary btn-sm"> <i class="fa fa-pencil"></i> </a> <button type="button" onclick="$('#module-row<?php echo $module_row; ?>').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger btn-sm"> <i class="fa fa fa-minus-circle"></i> </button> </div> </div> </td> </tr> <?php $module_row++; ?> <?php } ?> <?php } ?> </tbody> <tfoot> <tr> <td class="text-left"> <div class="input-group"> <select class="form-control input-sm"> <?php foreach ($extensions as $extension) { ?> <optgroup label="<?php echo $extension['name']; ?>"> <?php if (!$extension['module']) { ?> <option value="<?php echo $extension['code']; ?>"><?php echo $extension['name']; ?></option> <?php } else { ?> <?php foreach ($extension['module'] as $module) { ?> <option value="<?php echo $module['code']; ?>"><?php echo $module['name']; ?></option> <?php } ?> <?php } ?> </optgroup> <?php } ?> </select> <div class="input-group-btn"> <button type="button" onclick="addModule('column-full');" data-toggle="tooltip" title="<?php echo $button_module_add; ?>" class="btn btn-primary btn-sm"> <i class="fa fa-plus-circle"></i> </button> </div> </div> </td> </tr> </tfoot> </table> </div>
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=<?php echo $token; ?>' ); } else { $(this) .parent() .find('a') .attr( 'href', 'index.php?route=extension/module/' + part[0] + '&token=<?php echo $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:
<?php foreach ($modules as $module) { ?> <?php echo $module; ?> <?php } ?>
Similarly, create another file named content_full.php at catalog\controller\common folder and place the code below:
<?php class ControllerCommonContentFull extends Controller { public function index() { $this->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:
<?php echo $header; ?>
Below it adds the following line of code:
<?php echo $content_full; ?>
Ocmod file to add the full-width position to all layout at the front end:
<?xml version="1.0" encoding="utf-8"?> <modification> <name>Full Width Module Position</name> <version>1.0</version> <author>WebOCreation</author> <link>https://webocreation.com</link> <code>Full_Width_Position_1_1</code> <file path="catalog/controller/*/*.php"> <operation> <search><![CDATA[ $data['column_left'] = $this->load->controller('common/column_left'); ]]></search> <add position="before"><![CDATA[ $data['content_full'] = $this->load->controller('common/content_full'); ]]></add> </operation> </file> <file path="catalog/view/theme/*/template/*/*.tpl"> <operation> <search><![CDATA[ <?php echo $header; ?> ]]></search> <add position="after"><![CDATA[ <?php echo $content_full; ?> ]]></add> </operation> </file> </modification>
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
on saving the data for full width in admin side, it is not storing and getting back to the default one.
Hi Avni,
Hope you have clicked the blue plus button and select module.
I was also one time confused by changing the Account to another module.
Hope that can be one case.
If not then can you please provide me the Extensions Modifications error logs.
Thanks
Rupak
hello, Does it work on opencart 2.3?
Yes, similar step as for now
Hi! Thank you for this helpfull article. But I have another issue, maybe you know a way to make position in the footer that will be shown on all pages?
Thank you.
Hi… thanks for the great tutorial… but i have one question… i did exactly as you describe here a even downloaded your ocmod at tried with it but i am constantly getting an error or message on the top of the page…
1Array ( [0] => Array ( [layout_module_id] => 111 [layout_id] => 1 [code] => layerslider.32 [position] => column_full [sort_order] => 0 ) )
the position is working in admin and in front page to… but how can i get reed of this… something is not completly wright i guess sand i cant figure out what is it?
I am using OC 2.3.0.2 default template.
Thank you in advance
Go to catalog\controller\common\content_full.php and at around 51 you will see
echo $layout_id;
And at line 54 you will see
print_r($modules);
Remove these codes and you will be able to enjoy the module.
Or I have updated the download files. You can download it.
Thanks
Rupak
Thanx… Rupak… that saved the day… nice… super…
Hi,
Did all the steps but:
1. Full Width module appears twice in the admin pannel
2. The content selcted for Full Width position is not shown on front end
Can you help?