How to create a custom admin page in opencart?

Question

I want to know how to make a custom admin panel page in opencart.

Requires login with the controller - the admin panel does not seem to use the same controller as the normal site. I know how to make custom pages with opencart (but this is not for the admin)

A simple Hello World example would be great

Answer 1

OpenCart 2.x

The path names have changed in OpenCart 2 - you will want to create

admin/controller/extension/module/hello.php admin/language/en-gb/extension/module/hello.php admin/view/template/extension/module/hello.tpl Then the route becomes

admin/index.php?route=extension/module/hello

OpenCart 1.x

• Include full MVC flow.

I found out how to do this. OpenCart uses the MVC pattern. I recommend reading about How to be an OpenCart Guru? post about learning how the system works - this Admin workflow should also suffice for customer end.

1) Create a new file in admin/controller/custom/helloworld.php

Your filename and controller name should be the same in desc order:

helloworld.php

<?

class ControllerCustomHelloWorld extends Controller{ 
    public function index(){
                // VARS
                $template="custom/hello.tpl"; // .tpl location and file
        $this->load->model('custom/hello');
        $this->template = ''.$template.'';
        $this->children = array(
            'common/header',
            'common/footer'
        );      
        $this->response->setOutput($this->render());
    }
}
?>

2) Create a new file in admin/view/template/custom/hello.tpl

Hello.tpl

<?php echo $header; ?>
<div id="content">
<h1>HelloWorld</h1>
<?php
echo 'I can also run PHP too!'; 
?>
</div> 
<?php echo $footer; ?>

3) Create a new file in admin/model/custom/hello.php

<?php
class ModelCustomHello extends Model {
    public function HellWorld() {
        $sql = "SELECT x FROM `" . DB_PREFIX . "y`)"; 
        $implode = array();
        $query = $this->db->query($sql);
        return $query->row['total'];    
    }       
}
?>

4) You then need to enable the plugin to avoid permission denied errors:

Opencart > Admin > Users > User Groups > Admin > Edit

Select and Enable the Access Permission.

To visit your page go to

www.yoursite.com/opencart/admin/index.php?route=custom/helloworld

Answer 2

OpenCart 3.x

We can use same MVC+L structure like in OC 1 and 2. Here is detailed example. Lats call it Custom Page.

---

Creating model using path /admin/model/custom/page.php

<?php
class ModelCustomPage extends Model {
    
    public function getTotalInformationsOnCustomPage() {
        $query = $this->db->query("SELECT COUNT(*) AS total FROM " . DB_PREFIX . "information");
        return $query->row['total'];
    }

}

Your file path and model name should be the same. model/custom/page.php becomes ModelCustomPage.

Here you can see method public function getTotalInformationsOnCustomPage(), it's just for instance, took it from Information Model. Optional.

---

Creating controller using path /admin/controller/custom/page.php

<?php
class ControllerCustomPage extends Controller {
    public function index() {
        
        $this->load->language('custom/page'); // calling Custom Page language

        $this->document->setTitle($this->language->get('heading_title')); // set title from Custom Page language

        $this->load->model('custom/page'); // calling Custom Page model
        
        $data['information_total'] = $this->model_custom_page->getTotalInformationsOnCustomPage(); // calling model method 
        
        // breadcrumbs
        $data['breadcrumbs'] = array();

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

        $data['breadcrumbs'][] = array(
            'text' => $this->language->get('heading_title'),
            'href' => $this->url->link('custom/page', 'user_token=' . $this->session->data['user_token'], true)
        );
        
        // calling header, footer and column_left for our template to render properly
        $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('custom/page', $data)); // send our $data array to view
    }
}

This is minimal set for good looking admin page, with all default menus and breadcrumbs.

As in model, your file path and controller name should be the same. controller/custom/page.php becomes ControllerCustomPage.

---

Creating language using path /admin/language/en-gb/custom/page.php

<?php
// Heading
$_['heading_title']           = 'Custom Page';

// Text
$_['text_custom_block']       = 'Custom Block';
$_['text_total_informations'] = 'Total informations:';

---

Creating view using path /admin/view/template/custom/page.twig

{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">    
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-thumbs-up"></i> {{ text_custom_block }}</h3>
      </div>
      <div class="panel-body">{{ text_total_informations }} {{ information_total }}</div>
    </div>
  </div>
</div>
{{ footer }}

In this example I used standard block structure, inherent in this system. You can use any HTML you want. As you can see, {{ header }}, {{ column_left }}, {{ footer }} added for standard admin navigation support.

Working with .twig files don't forget to clear twig cache to see changes.

---

After all those manipulations, don't forget to set permissions for your new application. In admin panel go to System > Users > User groups, edit Administrator group (or/and any other you want). On edit page set find custom/page in both Access Permission and Modify Permission blocks, and mark it as selected. Save.

---

Now your new application is accessible by url yoursite.com/admin/index.php?route=custom/page&user_token=XXXXXX

Form this point you might want to add your custom page to the left menu of admin panel. You can do it by editing core files or, better, by OCMOD file.

Create custom_page.ocmod.xml

<?xml version="1.0" encoding="utf-8"?>
<modification>
  <name>Custom Page OCMOD</name>
  <code>custom-page</code>
  <version>1.0</version>
  <author>Me</author>
  <link>http://mywebsite.com</link>

  <file path="admin/controller/common/column_left.php">
    <operation>
      <search><![CDATA[// Stats]]></search>
      <add position="before"><![CDATA[
      $data['menus'][] = array(
        'id'       => 'menu-custom',
        'icon'     => 'fa-thumbs-up', 
        'name'     => $this->language->get('text_custom'),
        'href'     => $this->url->link('custom/page', 'user_token=' . $this->session->data['user_token'], true)
      );
      ]]></add>
    </operation>
  </file>  
  
  <file path="admin/language/en-gb/common/column_left.php">
    <operation>
      <search><![CDATA[// Text]]></search>
      <add position="after"><![CDATA[
        $_['text_custom']                  = 'Custom Page';
      ]]></add>
    </operation>
  </file>  

</modification>

Install the file in Extensions > Installer

Than go to Extensions > Extensions and clear OCMOD cache.

In this OCMOD file we just modified 2 OpenCart core file without editing them directly. Now you will see a link on a Custom Page in left admin menu.

More about OCMOD you can read in Opencart Modification System Related Questions and OpenCart OCMOD and VQMOD Modification Systems