How to Make a Theme With OpenCart from Scratch

OpenCart, 4 mins, 56 secs Read, 5 years ago
new_theme This post would be very interesting sake of creating an own theme on popular e-commerce CMS (Content Management System). Before you make a theme with OpenCart, you should have basic understanding of MVC pattern and structure of OpenCart theme. Covering full part in single article is rather difficult job where by I decided to explain it shortly. I assume that you know basics PHP and HTML perception. You may also understand basic structure of theme from official default theme. Just open it and browse the directories, get access to theme directory through catalog/view/theme/default

A Quick Explanation to Theme Structure of OpenCart

I believe you working on local environment and not live site. So open htdocs folder and start tweaking now. First of all create a new theme folder in catalog/view/theme, i have named it as mytheme then Create image, JavaScript, template directories inside catalog/view/theme/mytheme directory, these are the base directories for theme files. opencart-theme-structure
  • Image: It consists of only theme related images, every front-end image files store under this directory. Don’t be confused back-end images stores at /admin/view/image folder
  • Stylesheet: OpenCart uses this directory to store front-end stylesheets. looks like /catalog/view/theme/stylesheet/stylesheet.css
  • Template: not all the template files stored under this, it is container storing theme related files, get access to template folder over /catalog/view/theme/[Theme Name]/template
As mentioned above all template are stores inside /catalog/view/theme/default/template directories with .tpl extension. Opencart uses .tpl extension that means template file. If you missed to build any important directories in custom theme, OpenCart's fallback system will find for the missed files or directories and if not exists loads it from default theme directory. Once you finished all the steps, eventually one step is remaining create files inside corresponding directories. here i going to cover a small module for creating or customizing theme.

Creating a Custom Page

You will need to create a controller and view file under controller and view folder respectively.
php class ControllerAccountRegister extends Controller { public function index() { $this->document->setTitle($this->language->get('heading_title')); $this->document->addScript('catalog/view/javascript/jquery/colorbox/jquery.colorbox-min.js'); $this->document->addStyle('catalog/view/javascript/jquery/colorbox/colorbox.css'); if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) { $this->model_account_customer->addCustomer($this->request->post); } $this->data['heading_title'] = "My First Custom Page"; $this->data['entry_firstname'] = $this->language->get('entry_firstname'); $this->data['entry_lastname'] = $this->language->get('entry_lastname'); $this->data['entry_email'] = $this->language->get('entry_email'); $this->data['button_continue'] = $this->language->get('button_continue'); if (isset($this->error['warning'])) { $this->data['error_warning'] = $this->error['warning']; } else { $this->data['error_warning'] = ''; } if (isset($this->error['firstname'])) { $this->data['error_firstname'] = $this->error['firstname']; } else { $this->data['error_firstname'] = ''; } if (isset($this->error['lastname'])) { $this->data['error_lastname'] = $this->error['lastname']; } else { $this->data['error_lastname'] = ''; } if (isset($this->error['email'])) { $this->data['error_email'] = $this->error['email']; } else { $this->data['error_email'] = ''; } $this->data['action'] = $this->url->link('account/register', '', 'SSL'); if (isset($this->request->post['firstname'])) { $this->data['firstname'] = $this->request->post['firstname']; } else { $this->data['firstname'] = ''; } if (isset($this->request->post['lastname'])) { $this->data['lastname'] = $this->request->post['lastname']; } else { $this->data['lastname'] = ''; } if (isset($this->request->post['email'])) { $this->data['email'] = $this->request->post['email']; } else { $this->data['email'] = ''; } if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/account/register.tpl')) { $this->template = $this->config->get('config_template') . '/template/account/register.tpl'; } else { $this->template = 'default/template/account/register.tpl'; } $this->children = array( 'common/column_left', 'common/column_right', 'common/content_top', 'common/content_bottom', 'common/footer', 'common/header' ); $this->response->setOutput($this->render()); } protected function validate() { if ((utf8_strlen($this->request->post['firstname']) < 1) || (utf8_strlen($this->request->post['firstname']) > 32)) { $this->error['firstname'] = $this->language->get('error_firstname'); } if ((!ctype_alpha($this->request->post['firstname'])) && (($this->request->post['firstname'] == !NULL))) { $this->error['firstname'] = "Enter only character Values"; } if ((!ctype_alpha($this->request->post['lastname'])) && (($this->request->post['lastname'] == !NULL))) { $this->error['lastname'] = "Enter only character Values"; } if ((utf8_strlen($this->request->post['lastname']) < 1) || (utf8_strlen($this->request->post['lastname']) > 32)) { $this->error['lastname'] = $this->language->get('error_lastname'); } if ((utf8_strlen($this->request->post['email']) > 96) || !preg_match('/^[^\@]+@.*\.[a-z]{2,6}$/i', $this->request->post['email'])) { $this->error['email'] = $this->language->get('error_email'); } if ($this->model_account_customer->getTotalCustomersByEmail($this->request->post['email'])) { $this->error['warning'] = $this->language->get('error_exists'); } if ($this->config->get('config_account_id')) { $this->load->model('catalog/information'); $information_info = $this->model_catalog_information->getInformation($this->config->get('config_account_id')); if ($information_info && !isset($this->request->post['agree'])) { $this->error['warning'] = sprintf($this->language->get('error_agree'), $information_info['title']); } } if (!$this->error) { return true; } else { return false; } } $this->response->setOutput(json_encode($json)); } } ?>
The language file should as follows for corresponding controller file to fetch the from it. next is the view function it will load according to controller functions

Quote of the day: live life

Subscribe our Newsletter

Join our mailing list to receive updates on the latest blog posts and other things.