Show module data at front layout in Opencart

In our previous blog, we learned to build a module in the Opencart. Now, we will learn about saving the values in the module configuration and show them in the front end by putting them on some layout (like account page, product page, home page etc).

So, in order to start, we need to make a module like we did here. Now, I’ve added two more fields to get the heading and description of the content to be shown at the front end.

I’ve created a language file named ‘side_layout.php’ in admin->language->en-gb->module (Opencart version 2.2.0.0). The code for language file is here:

<?php
/**
 * Webkul Software.
 *
 * @category Webkul
 * @package Opencart Module Tutorial
 * @author Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
// Heading
$_['heading_title']     = 'Side Layout';

$_['text_module']       = 'Modules';
$_['text_success']      = 'Success: You have modified side layout module!';
$_['text_edit']         = 'Edit Side Layout Module';

// Entry
$_['entry_status']      = 'Status';
$_['entry_heading']     = 'Panel Heading';
$_['entry_description'] = 'Panel Description';

// Error
$_['error_permission']  = 'Warning: You do not have permission to modify side layout module!';

Now, I’ve created a file name ‘side_layout.php’ in admin->controller->module (Opencart version 2.2.0.0). Here’s the code for controller file:

<?php
/**
 * Webkul Software.
 *
 * @category Webkul
 * @package Opencart Module Tutorial
 * @author Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
class ControllerModuleSidelayout extends Controller {
	private $error = array();

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

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

		$this->load->model('setting/setting');

		if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
			$this->model_setting_setting->editSetting('side_layout', $this->request->post);

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

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

		$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_status'] = $this->language->get('entry_status');
		$data['entry_heading'] = $this->language->get('entry_heading');
		$data['entry_description'] = $this->language->get('entry_description');

		$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'] = '';
		}

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

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

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

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

		$data['action'] = $this->url->link('module/side_layout', 'token=' . $this->session->data['token'], true);

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

		if (isset($this->request->post['side_layout_status'])) {
			$data['side_layout_status'] = $this->request->post['side_layout_status'];
		} else {
			$data['side_layout_status'] = $this->config->get('side_layout_status');
		}

		if (isset($this->request->post['side_layout_heading'])) {
			$data['side_layout_heading'] = $this->request->post['side_layout_heading'];
		} else {
			$data['side_layout_heading'] = $this->config->get('side_layout_heading');
		}

		if (isset($this->request->post['side_layout_description'])) {
			$data['side_layout_description'] = $this->request->post['side_layout_description'];
		} else {
			$data['side_layout_description'] = $this->config->get('side_layout_description');
		}

		$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/side_layout', $data));
	}

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

		return !$this->error;
	}
}

A file is created with the name ‘side_layout.tpl’ in admin->view->template->module. The code for that file is here:

<?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-side-layout" 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-side-layout" class="form-horizontal">
          <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="side_layout_status" id="input-status" class="form-control">
                <?php if ($side_layout_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>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-heading"><?php echo $entry_heading; ?></label>
            <div class="col-sm-10">
              <input type="text" name="side_layout_heading" id="input-heading" class="form-control" value="<?php echo $side_layout_heading; ?>" placeholder="<?php echo $entry_heading; ?>">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-description"><?php echo $entry_description; ?></label>
            <div class="col-sm-10">
              <textarea name="side_layout_description" id="input-description" class="form-control" placeholder="<?php echo $entry_description; ?>"><?php echo $side_layout_description; ?></textarea>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<?php echo $footer; ?>

In order to use this module to show its content in the front, we have to build a controller in catalog->controller->module with the same name as we made in the backend i.e. ‘side_layout.php’.

Here’s the code for that controller:

<?php
/**
 * Webkul Software.
 *
 * @category Webkul
 * @package Opencart Module Tutorial
 * @author Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
class ControllerModuleSidelayout extends Controller {
	public function index() {
		/**
		 * In order to get the value from the backend, we will use $this->config->get()
		 * The argument passed in the get method must be same as the name of field we used in the admin end
		 */
		$data['side_layout_heading'] = $this->config->get('side_layout_heading');
		$data['side_layout_description'] = $this->config->get('side_layout_description');

		return $this->load->view('module/side_layout', $data);
	}
}

We are using a .tpl file to show the content in the HTML tags. So, we will create a file named ‘side_layout.tpl’ in catalog->view->theme->default->template->module. The code is as here:

<div class="panel panel-default">
	<div class="panel-heading"><h3 class="panel-title"><?php echo $side_layout_heading; ?></h3></div>
	<div class="panel-body">
		<strong><?php echo $side_layout_description; ?></strong>
	</div>
</div>

Now, after doing this, we have to set the module on some layout. Here, I’m setting the module on the checkout page. So, for doing that, go to the admin panel and head towards Design->Layouts. From the layouts list, edit the checkout and select the ‘Side Layout’ from the module list and set to your preferred position. I’ve set it on ‘Column Right’ position. See the image.

This will look like this in the front end on the checkout page. See image.

Whatever entries/values you will provide in the backend will be visible in the front-end module. Hope, you learned from this. In the case of any query, just comment.

Categories: opencart

Vikhyat Sharma 26-April-2023

View Comments Comment or Ask a Question

Quick Links