Adding new modules positions to OpenCart 3 - opencart

Question

I am using OpenCart Version 3.0.2.
By default OpenCart has 4 areas where we can drop the modules in our layouts. i.e.
Left Column
Right Column
Top Content
Bottom Content
My question is if somehow we can drop modules elsewhere also or maybe if we can somehow call a module within the HTML-Module and wrap is with some HTML codes. Basically I am stuck with a design where I wanted to add few dynamic banners in the home page but to display them according to the design, they much be wrapped within row and than col-6 each since bootstrap is the framework I am using.
To elaborate my requirement I am writing sample HTML so that I can show where I wanted to add modules for the home page
<header></header>
<div id="home" class="row">
<div class="col-12"> Slideshow Module as "content top" </div>
<div class="col-6"> Big Banner Module </div>
<div class="col-6"> Few more Banners </div>
<div class="col-12"> Latest Products Module as "content Bottom" </div>
<div class="col-12"> Featured Products Module as "content Bottom" </div>
<div class="col-12"> HTML CONTENT Module as "content Bottom" </div>
</div>
<footer></footer>
There is a possibility that I can drop Big Banner Module and a few more Banners modules in left and right columns and a bit of jQuery to change the wrapping HTML of the columns from <aside id="column-left"> to <div class="col-6"> but this solution do not seems right and will effect the google crawling as well.
Would someone suggest a better way to add modules like this only for the home page?
A structure image in case if I am unable to explain the problem with HTML:

Answer 1

You need to create new position.
File:
admin/language/en-gb/design/layout.php
Find:
$_['text_content_bottom']
Add before it:
$_['text_content_new'] = 'Content New';
File:
admin/view/template/design/layout_form.twig
Find:
<table id="module-content-top" class="table table-striped table-bordered table-hover">
Add before it:
<table id="module-content-new" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-center">{{ text_content_new }}</td>
</tr>
</thead>
<tbody>
{% for layout_module in layout_modules %}
{% if layout_module.position == 'content_new' %}
<tr id="module-row{{ module_row }}">
<td class="text-left"><div class="input-group">
<select name="layout_module[{{ module_row }}][code]" class="form-control input-sm">
{% for extension in extensions %}
<optgroup label="{{ extension.name }}">
{% if not extension.module %}
{% if extension.code == layout_module.code %}
<option value="{{ extension.code }}" selected="selected">{{ extension.name }}</option>
{% else %}
<option value="{{ extension.code }}">{{ extension.name }}</option>
{% endif %}
{% else %}
{% for module in extension.module %}
{% if module.code == layout_module.code %}
<option value="{{ module.code }}" selected="selected">{{ module.name }}</option>
{% else %}
<option value="{{ module.code }}">{{ module.name }}</option>
{% endif %}
{% endfor %}
{% endif %}
</optgroup>
{% endfor %}
</select>
<input type="hidden" name="layout_module[{{ module_row }}][position]" value="{{ layout_module.position }}" />
<input type="hidden" name="layout_module[{{ module_row }}][sort_order]" value="{{ layout_module.sort_order }}" />
<div class="input-group-btn"> <i class="fa fa-pencil"></i>
<button type="button" onclick="$('#module-row{{ module_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa fa fa-minus-circle"></i></button>
</div>
</div></td>
</tr>
{% set module_row = module_row + 1 %}
{% endif %}
{% endfor %}
</tbody>
<tfoot>
<tr>
<td class="text-left"><div class="input-group">
<select class="form-control input-sm">
<option value=""></option>
{% for extension in extensions %}
<optgroup label="{{ extension.name }}">
{% if not extension.module %}
<option value="{{ extension.code }}">{{ extension.name }}</option>
{% else %}
{% for module in extension.module %}
<option value="{{ module.code }}">{{ module.name }}</option>
{% endfor %}
{% endif %}
</optgroup>
{% endfor %}
</select>
<div class="input-group-btn">
<button type="button" onclick="addModule('content-new');" data-toggle="tooltip" title="{{ button_module_add }}" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i></button>
</div>
</div></td>
</tr>
</tfoot>
</table>
Create the following file:
catalog/controller/common/content_new.php
it's content:
<?php
class ControllerCommonContentNew 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('setting/module');
$data['modules'] = array();
$modules = $this->model_design_layout->getLayoutModules($layout_id, 'content_new');
foreach ($modules as $module) {
$part = explode('.', $module['code']);
if (isset($part[0]) && $this->config->get('module_' . $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_setting_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_new', $data);
}
}
Create the following file:
catalog/view/theme/default/template/common/content_new.twig
it's content:
{% for module in modules %}
{{ module }}
{% endfor %}
File:
catalog/controller/common/home.php
Find:
$data['content_top'] = $this->load->controller('common/content_top');
Add before it:
$data['content_new'] = $this->load->controller('common/content_new');
File:
catalog/view/theme/default/template/common/home.twig
Find:
{{ header }}
Add after it:
{{ content_new }}

Answer 2

#digitcart did a pretty decent answer, and for those who like videos, here is a video tutorial I did exactly for your case
https://dreamvention.com/blog/how-to-add-an-extra-position-in-opencart-header/
hope it helps.
Also, you can find an OCMOD that will do this for you and you can copy it to make more extra positions. pretty cool stuff
https://github.com/Dreamvention/youtube_files/tree/master/extra_position_1