Creating a custom opencart page – (Opencart 2.x and above)


Opencart is built using the MVC pattern. Each page in opencart contains an associated view (.tpl) file, controller (.php) file and also a model (.php) file (Note: Model file is required only if you’re going to perform database related functions).

First, the controller acts as an entry point for any page in which you’ll define most of the application logic.The model deals with the back-end database, and the view is responsible for preparing the content to be rendered to the end user. In the context of OpenCart, you’ll at least need to implement a controller and a view in order to create a new custom page.


Setting up the controller

The controller is the first element that will get executed when you request a page. Thus it is mandatory to set up all the required variables that are to be used in the view page within the controller.

In this example let us try to create a new page called sample. The controller for this page has to be placed within a directory within the controller. Although  you can use the existing directory within the controller for this, it is advisable to create a new directory and place your custom page within the directory. So for our example let us create a new directory called mysample underneath catalog/controller. Once you have created the directory go ahead and create the page sample.php  and paste the following code in it.


class ControllerMysampleDelivery extends Controller


public function index()



$data[‘heading_title’] = ‘Sample’;

$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’ => ‘Sample(Your file name)’,

‘href’ => $this->url->link(‘tool/backup’, ‘token=’ . $this->session->data[‘token’], true)


$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(‘mysample/sample’, $data));




The class name of the controller has to in the above format. The name Controller followed by the name of the directory and then the file name. This has to extend the main controller class. The index function inside the class will be the first function that will be loaded when a page is requested. Thus all the required variables needed for the view page has to  be loaded within this function. In the above case we have loaded the title, breadcrumbs, header, footer and other modules which are common for all the pages. At last we have set the output page for the controller page.

Remember that the directory/filename given within the setOutput() will be the corresponding view page for the controller.

Creating the view page

The view page goes under the catalog/view/template directory. Remember to create the same directory and the filename that you have given in the setOutput() function in your controller page. In this case create the file sample.tpl within the mysample folder under catalog/view/template folder. Add the following code within the page


<?php echo $header; ?>

<?php echo $column_left; ?>

<div id=”content”>

//Your content goes here


<?php echo $footer; ?>

Add your content within the content div. And that’s it.



Parent article:–cms-22054


Leave a Reply

Your email address will not be published. Required fields are marked *