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
