Adding new modules positions to OpenCart 3

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:

Solution

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"> <a href="{{ layout_module.edit }}" type="button" data-toggle="tooltip" title="{{ button_edit }}" target="_blank" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i></a>
            <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 }}