How to create multi-layout module in opencart

Here, I’m going to explain the procedure to create the multi-layout module in opencart. With the need of putting the same module with different data on different layouts, there emerges a need for creating a multi-layout module. Here, I will discuss the procedure as well as code for creating a demo multi-layout module.

We will start with the creation of files at admin side’s controller, language and view folders.

First, we will create a controller file named multi_mod.php in admin>controller>module.

The code for the multi-layout mod will be:

<?php
class ControllerModuleMultimod extends Controller {
	private $error = array();

	public function index() {
		$this->load->language('module/multi_mod'); // load the language

		$this->document->setTitle($this->language->get('heading_title'));

		$this->load->model('extension/module'); // loads the model

		if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
			if (!isset($this->request->get['module_id'])) {
				$this->model_extension_module->addModule('multi_mod', $this->request->post);// adds a new module
			} else {
				$this->model_extension_module->editModule($this->request->get['module_id'], $this->request->post);// edits a pre-existing module
			}

			$this->session->data['success'] = $this->language->get('text_success');

			$this->response->redirect($this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'));
		}

		$data['heading_title'] = $this->language->get('heading_title');

		$data['text_edit'] = $this->language->get('text_edit');
		$data['text_enabled'] = $this->language->get('text_enabled');
		$data['text_disabled'] = $this->language->get('text_disabled');

		$data['entry_name'] = $this->language->get('entry_name');
		$data['entry_message'] = $this->language->get('entry_message');
		$data['entry_status'] = $this->language->get('entry_status');

		$data['button_save'] = $this->language->get('button_save');
		$data['button_cancel'] = $this->language->get('button_cancel');

		if (isset($this->error['warning'])) {
			$data['error_warning'] = $this->error['warning'];
		} else {
			$data['error_warning'] = '';
		}

		if (isset($this->error['name'])) {
			$data['error_name'] = $this->error['name'];
		} else {
			$data['error_name'] = '';
		}

		if (isset($this->error['message'])) {
			$data['error_message'] = $this->error['message'];
		} else {
			$data['error_message'] = '';
		}

		$data['breadcrumbs'] = array();

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_home'),
			'href' => $this->url->link('common/dashboard', 'token=' . $this->session->data['token'], 'SSL')
		);

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_module'),
			'href' => $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL')
		);

		if (!isset($this->request->get['module_id'])) {
			$data['breadcrumbs'][] = array(
				'text' => $this->language->get('heading_title'),
				'href' => $this->url->link('module/multi_mod', 'token=' . $this->session->data['token'], 'SSL')
			);
		} else {
			$data['breadcrumbs'][] = array(
				'text' => $this->language->get('heading_title'),
				'href' => $this->url->link('module/multi_mod', 'token=' . $this->session->data['token'] . '&module_id=' . $this->request->get['module_id'], 'SSL')
			);
		}

		if (!isset($this->request->get['module_id'])) {
			$data['action'] = $this->url->link('module/multi_mod', 'token=' . $this->session->data['token'], 'SSL');
		} else {
			$data['action'] = $this->url->link('module/multi_mod', 'token=' . $this->session->data['token'] . '&module_id=' . $this->request->get['module_id'], 'SSL');
		}

		$data['cancel'] = $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL');

		if (isset($this->request->get['module_id']) && ($this->request->server['REQUEST_METHOD'] != 'POST')) {
			$module_info = $this->model_extension_module->getModule($this->request->get['module_id']);
		}

		if (isset($this->request->post['name'])) {
			$data['name'] = $this->request->post['name'];
		} elseif (!empty($module_info)) {
			$data['name'] = $module_info['name'];
		} else {
			$data['name'] = '';
		}

		if (isset($this->request->post['message'])) {
			$data['message'] = $this->request->post['message'];
		} elseif (!empty($module_info)) {
			$data['message'] = $module_info['message'];
		} else {
			$data['message'] = '';
		}

		if (isset($this->request->post['status'])) {
			$data['status'] = $this->request->post['status'];
		} elseif (!empty($module_info)) {
			$data['status'] = $module_info['status'];
		} else {
			$data['status'] = '';
		}

		$data['header'] = $this->load->controller('common/header');
		$data['column_left'] = $this->load->controller('common/column_left');
		$data['footer'] = $this->load->controller('common/footer');

		$this->response->setOutput($this->load->view('module/multi_mod.tpl', $data));
	}

	protected function validate() {
		if (!$this->user->hasPermission('modify', 'module/multi_mod')) {
			$this->error['warning'] = $this->language->get('error_permission');
		}

		if ((utf8_strlen($this->request->post['name']) < 3) || (utf8_strlen($this->request->post['name']) > 64)) {
			$this->error['name'] = $this->language->get('error_name');
		}

		if (!$this->request->post['message']) {
			$this->error['message'] = $this->language->get('error_message');
		}

		return !$this->error;
	}
}

We have to create language and view file in parallel.

The language file will be created as multi_mod.php in admin>language>english>module as below.

<?php
// Heading
$_['heading_title']    = 'Multi Mod';

// Text
$_['text_module']      = 'Modules';
$_['text_success']     = 'Success: You have modified Multi Mod module!';
$_['text_edit']        = 'Edit Multi Mod Module';

// Entry
$_['entry_name']       = 'Module Name';
$_['entry_message']    = 'Message';
$_['entry_status']     = 'Status';

// Error
$_['error_permission'] = 'Warning: You do not have permission to modify Multi Mod module!';
$_['error_name']       = 'Module Name must be between 3 and 64 characters!';
$_['error_message']    = 'Message required!';

The view file at admin side will be created with name multi_mod.tpl at admin>view>template>module as below:

<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-multi_mod" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="<?php echo $cancel; ?>" data-toggle="tooltip" title="<?php echo $button_cancel; ?>" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1><?php echo $heading_title; ?></h1>
      <ul class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb) { ?>
        <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
        <?php } ?>
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <?php if ($error_warning) { ?>
    <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?>
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    <?php } ?>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_edit; ?></h3>
      </div>
      <div class="panel-body">
        <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-multi_mod" class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-name"><?php echo $entry_name; ?></label>
            <div class="col-sm-10">
              <input type="text" name="name" value="<?php echo $name; ?>" placeholder="<?php echo $entry_name; ?>" id="input-name" class="form-control" />
              <?php if ($error_name) { ?>
              <div class="text-danger"><?php echo $error_name; ?></div>
              <?php } ?>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-message"><?php echo $entry_message; ?></label>
            <div class="col-sm-10">
              <textarea name="message" placeholder="<?php echo $entry_message; ?>" id="input-message" class="form-control" /><?php echo $message; ?></textarea>
              <?php if ($error_message) { ?>
              <div class="text-danger"><?php echo $error_message; ?></div>
              <?php } ?>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-status"><?php echo $entry_status; ?></label>
            <div class="col-sm-10">
              <select name="status" id="input-status" class="form-control">
                <?php if ($status) { ?>
                <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                <option value="0"><?php echo $text_disabled; ?></option>
                <?php } else { ?>
                <option value="1"><?php echo $text_enabled; ?></option>
                <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                <?php } ?>
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<?php echo $footer; ?>

The UI of the module will be as :

On saving the module after filling the details, another module will create in the extension/module. This will be visible as:

Now, we have to set the module to some layout. Here, we are setting the module on the home layout.

Now, we have to create the controller and view on the catalog side. So, here’s the controller and view code for this module.

Controller:

<?php
class ControllerModuleMultimod extends Controller {
	/**
	 * @param  [array] $setting [contains the details filled in the module]
	 * @return [HTML]          [contains the view part of the module]
	 */
	public function index($setting) {

		$data['name'] = $setting['name'];
		$data['message'] = $setting['message'];
		$data['status'] = $setting['status'];

		if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/multi_mod.tpl')) {
			return $this->load->view($this->config->get('config_template') . '/template/module/multi_mod.tpl', $data);
		} else {
			return $this->load->view('default/template/module/multi_mod.tpl', $data);
		}
	}
}

View:

<?php if ($status) { ?>
	<h3><?php echo $name; ?></h3>
	<p><?php echo $message; ?></p>
<?php } ?>

The output on the home page will be as: