Adding a new position for different layout in OpenCart 2.2 like full width

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.

Download Full-Width Opencart 2 module

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

Previous articleInternship final report sample, Introduction, SWOT analysis, and recommendation
Next articleTop 30 Drupal 8 modules to use in 2019 SEO, Workflow, Securities and others

9 COMMENTS

    • 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

  1. 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.

  2. 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

  3. 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?

LEAVE A REPLY

Please enter your comment!
Please enter your name here