A while back ago I have customer who bought my template for opencart version 1.5.5.1 and want to have a module position above the column left or column right and the content. I know that it is not possible if using default opencart layout, so it will need to have extra layout position below the header. and the trick is I made a duplicate of content top position I give it name "content header" and put the position under the header.
And now I will write some steps about how to create the extra position with opencart version 2.0.3.1, so let’s begin!
Catalog – Duplicate Controller file
Now for the first step we will create new controller file for the new layout, it don’t have to write all code from the start but just duplicate the existing file. The file will located in “catalog/controller/common/” folder, and the file that will be duplicated is “content_top.php”.
Copy and paste the file in the same folder then rename it to “content_header.php”.
Open the new file and find for every text ‘content_top’ and ‘ContentTop’. Then change or replace ‘content_top’ to ‘content_header’ and ‘ContentTop’ to ‘ContentHeader’. There will be 5 replacement, and the result should like this below:
<?php
class ControllerCommonContentHeader 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, 'content_header');
foreach ($modules as $module) {
$part = explode('.', $module['code']);
if (isset($part[0]) && $this->config->get($part[0] . '_status')) {
$data['modules'][] = $this->load->controller('module/' . $part[0]);
}
if (isset($part[1])) {
$setting_info = $this->model_extension_module->getModule($part[1]);
if ($setting_info && $setting_info['status']) {
$data['modules'][] = $this->load->controller('module/' . $part[0], $setting_info);
}
}
}
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/content_header.tpl')) {
return $this->load->view($this->config->get('config_template') . '/template/common/content_header.tpl', $data);
} else {
return $this->load->view('default/template/common/content_header.tpl', $data);
}
}
}
Catalog - DuplicateTemplate File
For the tpl file we will duplicate file ‘content_top.tpl’ where it’s located in ‘catalog/view/theme/default/template/common/’ folder. But if you working on custom template then file will be located in ‘catalog/view/theme/YOUR TEMPLATE NAME/template/common/’.
If you have found the file, duplicate it and rename to ‘content_header.tpl’. then replace all the code with this:
<?php if ($modules) { ?>
<div class="container">
<div class="row"><div class="col-sm-12">
<?php foreach ($modules as $module) { ?>
<?php echo $module; ?>
<?php } ?>
</div></div>
</div>
<?php } ?>
In code above you’ll notice that I have add div container and also div class, I’ve add those class because to make it fit with default theme, so if you’re using a custom theme then the class name can be different.
Catalog – Add New Position to Controller file
Open file ‘catalog/controller/common/header.php’ find this:
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/header.tpl')) {
before the code above add this:
$data['content_header'] = $this->load->controller('common/content_header');
Catalog - Add New Position to Template File
Now we will add the call function for the new position in template file, open file ‘header.tpl’ in ‘catalog/view/theme/YOUR TEMPLATE NAME/template/common/’ folder, then find this code at the bottom of file:
<?php echo $content_header; ?>
Now we will working for admin section, the main purpose is we will modify the admin file to make the new layout position will be listed in layout setting option.
Admin - Add new Layout Position to Controller
Open file ‘admin/controller/design/layout.php’ and find this :
$data['text_content_top'] = $this->language->get('text_content_top');
Before it add this :
$data['text_content_header'] = $this->language->get('text_content_header');
Admin – Add New Layout Name to language File
Open file ‘admin/language/english/design/layout.php’ and find this :
$_['text_content_top'] = 'Content Top';
Before it add this :
$_['text_content_header'] = 'Content Header';
Admin – Add New Layout Position to Template File
Here is the last step, we will add the new position to the layout option list in admin.
Open file ‘admin/view/template/design/layout_form.tpl’
Find this:
<?php if ($layout_module['position'] == 'content_top') { ?>
Before it add this:
<?php if ($layout_module['position'] == 'content_header') { ?>
<option value="content_header" selected="selected"><?php echo $text_content_header; ?></option>
<?php } else { ?>
<option value="content_header"><?php echo $text_content_header; ?></option>
<?php } ?>
Find this:
html += ' <option value="content_top"><?php echo $text_content_top; ?></option>';
before it add this:
html += ' <option value="content_header"><?php echo $text_content_header; ?></option>';
That it’s!, now let we test the result, please try login to admin -> System -> Design -> Layouts -> for test let’s try on Home page layout, so click edit on Home -> Click on add module button or edit the existing one -> choose the module and set the Position to Content Header -> save. Then see the result on Home Page
If you have a problem with this tutorial or feeling worried making mistakes that will causing errors, I also have provide the vqmod version file for the result of this tutorial that you can download from HERE, but by reading the tutorials at least you can learn about to create new extra Layout Position in opencart.
Posted by
