OpenCart 2 Theme Development – Introduction
- Article
- Comment
OpenCart Themes are a bit Complicated due the directory creation and files management. Don’t get panic Because, this is fuzzy thing to make directories for your theme. Let’s See OpenCart 2 Theme Development. I Can’t See Proper Manual Or Tutorials to Develop Theme for Opencart 2.X Developing a theme is not a single page article to read and develop accordingly. We have more Amount of work in it. Let’s start with Basic.
The Major Topic Can be listed below.
- Introduction & Folders/ Files Creation
- Admin Side Work
- Theme Work
Let’s Take a look at each items clearly.
1. Introduction
OpenCart has a lot of features in themes. Also It runs under MVC-L .So we need to create 4 Files for each page. Than it work fine. Most of the time, you need MVC(Model, View, Controller) Files. Language is Optional File. Opencart theme needs an activation from extensions Area. So you need to create an Extension for your theme, There after enable the Extension to make your theme available to select it on OpenCart Site Settings. Let’s Take brief look at the Extension Creation and Files which are necessary to create an Extension. The Below Image describes you more about the files and directory for your Custom Theme Option.
You have to Create these three files under this directory Structure. Once you have created these files you are ready for next level of Writing Code.
Note:
Here two php files and one tpl file, which is for the view page. So Carefully make these files and also just remember, we dont need to create a file under model
directory. So Don’t get confuse with it. I have not omitted that, Actually, we don’t need this moment. We will see that in future customization and extended Features Area.
2. Admin Side Work
Let’s write Code to these new files, I prefer to start with kvvaradha.php
on the Controller File. Because, we need to create a class and extend the feature from it .
Controller/kvvaradha.php
<?php class ControllerExtensionThemekvvaradha extends Controller { private $error = array(); public function index() { $this->load->language('extension/theme/kvvaradha'); $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('kvvaradha', $this->request->post, $this->request->get['store_id']); $this->session->data['success'] = $this->language->get('text_success'); $this->response->redirect($this->url->link('extension/extension', 'token=' . $this->session->data['token'] . '&type=theme', 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['text_product'] = $this->language->get('text_product'); $data['text_image'] = $this->language->get('text_image'); $data['text_general'] = $this->language->get('text_general'); $data['entry_directory'] = $this->language->get('entry_directory'); $data['entry_status'] = $this->language->get('entry_status'); $data['entry_product_limit'] = $this->language->get('entry_product_limit'); $data['entry_product_description_length'] = $this->language->get('entry_product_description_length'); $data['entry_image_category'] = $this->language->get('entry_image_category'); $data['entry_image_thumb'] = $this->language->get('entry_image_thumb'); $data['entry_image_popup'] = $this->language->get('entry_image_popup'); $data['entry_image_product'] = $this->language->get('entry_image_product'); $data['entry_image_additional'] = $this->language->get('entry_image_additional'); $data['entry_image_related'] = $this->language->get('entry_image_related'); $data['entry_image_compare'] = $this->language->get('entry_image_compare'); $data['entry_image_wishlist'] = $this->language->get('entry_image_wishlist'); $data['entry_image_cart'] = $this->language->get('entry_image_cart'); $data['entry_image_location'] = $this->language->get('entry_image_location'); $data['entry_width'] = $this->language->get('entry_width'); $data['entry_height'] = $this->language->get('entry_height'); $data['help_product_limit'] = $this->language->get('help_product_limit'); $data['help_product_description_length'] = $this->language->get('help_product_description_length'); $data['help_directory'] = $this->language->get('help_directory'); $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['product_limit'])) { $data['error_product_limit'] = $this->error['product_limit']; } else { $data['error_product_limit'] = ''; } if (isset($this->error['product_description_length'])) { $data['error_product_description_length'] = $this->error['product_description_length']; } else { $data['error_product_description_length'] = ''; } if (isset($this->error['image_category'])) { $data['error_image_category'] = $this->error['image_category']; } else { $data['error_image_category'] = ''; } if (isset($this->error['image_thumb'])) { $data['error_image_thumb'] = $this->error['image_thumb']; } else { $data['error_image_thumb'] = ''; } if (isset($this->error['image_popup'])) { $data['error_image_popup'] = $this->error['image_popup']; } else { $data['error_image_popup'] = ''; } if (isset($this->error['image_product'])) { $data['error_image_product'] = $this->error['image_product']; } else { $data['error_image_product'] = ''; } if (isset($this->error['image_additional'])) { $data['error_image_additional'] = $this->error['image_additional']; } else { $data['error_image_additional'] = ''; } if (isset($this->error['image_related'])) { $data['error_image_related'] = $this->error['image_related']; } else { $data['error_image_related'] = ''; } if (isset($this->error['image_compare'])) { $data['error_image_compare'] = $this->error['image_compare']; } else { $data['error_image_compare'] = ''; } if (isset($this->error['image_wishlist'])) { $data['error_image_wishlist'] = $this->error['image_wishlist']; } else { $data['error_image_wishlist'] = ''; } if (isset($this->error['image_cart'])) { $data['error_image_cart'] = $this->error['image_cart']; } else { $data['error_image_cart'] = ''; } if (isset($this->error['image_location'])) { $data['error_image_location'] = $this->error['image_location']; } else { $data['error_image_location'] = ''; } $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_extension'), 'href' => $this->url->link('extension/extension', 'token=' . $this->session->data['token'] . '&type=theme', true) ); $data['breadcrumbs'][] = array( 'text' => $this->language->get('heading_title'), 'href' => $this->url->link('extension/theme/kvvaradha', 'token=' . $this->session->data['token'] . '&store_id=' . $this->request->get['store_id'], true) ); $data['action'] = $this->url->link('extension/theme/kvvaradha', 'token=' . $this->session->data['token'] . '&store_id=' . $this->request->get['store_id'], true); $data['cancel'] = $this->url->link('extension/extension', 'token=' . $this->session->data['token'] . '&type=theme', true); if (isset($this->request->get['store_id']) && ($this->request->server['REQUEST_METHOD'] != 'POST')) { $setting_info = $this->model_setting_setting->getSetting('kvvaradha', $this->request->get['store_id']); } if (isset($this->request->post['kvvaradha_directory'])) { $data['kvvaradha_directory'] = $this->request->post['kvvaradha_directory']; } elseif (isset($setting_info['kvvaradha_directory'])) { $data['kvvaradha_directory'] = $setting_info['kvvaradha_directory']; } else { $data['kvvaradha_directory'] = 'kvvaradha'; } $data['directories'] = array(); $directories = glob(DIR_CATALOG . 'view/theme/*', GLOB_ONLYDIR); foreach ($directories as $directory) { $data['directories'][] = basename($directory); } if (isset($this->request->post['kvvaradha_product_limit'])) { $data['kvvaradha_product_limit'] = $this->request->post['kvvaradha_product_limit']; } elseif (isset($setting_info['kvvaradha_product_limit'])) { $data['kvvaradha_product_limit'] = $setting_info['kvvaradha_product_limit']; } else { $data['kvvaradha_product_limit'] = 15; } if (isset($this->request->post['kvvaradha_status'])) { $data['kvvaradha_status'] = $this->request->post['kvvaradha_status']; } elseif (isset($setting_info['kvvaradha_status'])) { $data['kvvaradha_status'] = $this->config->get('kvvaradha_status'); } else { $data['kvvaradha_status'] = ''; } if (isset($this->request->post['kvvaradha_product_description_length'])) { $data['kvvaradha_product_description_length'] = $this->request->post['kvvaradha_product_description_length']; } elseif (isset($setting_info['kvvaradha_product_description_length'])) { $data['kvvaradha_product_description_length'] = $this->config->get('kvvaradha_product_description_length'); } else { $data['kvvaradha_product_description_length'] = 100; } if (isset($this->request->post['kvvaradha_image_category_width'])) { $data['kvvaradha_image_category_width'] = $this->request->post['kvvaradha_image_category_width']; } elseif (isset($setting_info['kvvaradha_image_category_width'])) { $data['kvvaradha_image_category_width'] = $this->config->get('kvvaradha_image_category_width'); } else { $data['kvvaradha_image_category_width'] = 80; } if (isset($this->request->post['kvvaradha_image_category_height'])) { $data['kvvaradha_image_category_height'] = $this->request->post['kvvaradha_image_category_height']; } elseif (isset($setting_info['kvvaradha_image_category_height'])) { $data['kvvaradha_image_category_height'] = $this->config->get('kvvaradha_image_category_height'); } else { $data['kvvaradha_image_category_height'] = 80; } if (isset($this->request->post['kvvaradha_image_thumb_width'])) { $data['kvvaradha_image_thumb_width'] = $this->request->post['kvvaradha_image_thumb_width']; } elseif (isset($setting_info['kvvaradha_image_thumb_width'])) { $data['kvvaradha_image_thumb_width'] = $this->config->get('kvvaradha_image_thumb_width'); } else { $data['kvvaradha_image_thumb_width'] = 228; } if (isset($this->request->post['kvvaradha_image_thumb_height'])) { $data['kvvaradha_image_thumb_height'] = $this->request->post['kvvaradha_image_thumb_height']; } elseif (isset($setting_info['kvvaradha_image_thumb_height'])) { $data['kvvaradha_image_thumb_height'] = $this->config->get('kvvaradha_image_thumb_height'); } else { $data['kvvaradha_image_thumb_height'] = 228; } if (isset($this->request->post['kvvaradha_image_popup_width'])) { $data['kvvaradha_image_popup_width'] = $this->request->post['kvvaradha_image_popup_width']; } elseif (isset($setting_info['kvvaradha_image_popup_width'])) { $data['kvvaradha_image_popup_width'] = $this->config->get('kvvaradha_image_popup_width'); } else { $data['kvvaradha_image_popup_width'] = 500; } if (isset($this->request->post['kvvaradha_image_popup_height'])) { $data['kvvaradha_image_popup_height'] = $this->request->post['kvvaradha_image_popup_height']; } elseif (isset($setting_info['kvvaradha_image_popup_height'])) { $data['kvvaradha_image_popup_height'] = $this->config->get('kvvaradha_image_popup_height'); } else { $data['kvvaradha_image_popup_height'] = 500; } if (isset($this->request->post['kvvaradha_image_product_width'])) { $data['kvvaradha_image_product_width'] = $this->request->post['kvvaradha_image_product_width']; } elseif (isset($setting_info['kvvaradha_image_product_width'])) { $data['kvvaradha_image_product_width'] = $this->config->get('kvvaradha_image_product_width'); } else { $data['kvvaradha_image_product_width'] = 228; } if (isset($this->request->post['kvvaradha_image_product_height'])) { $data['kvvaradha_image_product_height'] = $this->request->post['kvvaradha_image_product_height']; } elseif (isset($setting_info['kvvaradha_image_product_height'])) { $data['kvvaradha_image_product_height'] = $this->config->get('kvvaradha_image_product_height'); } else { $data['kvvaradha_image_product_height'] = 228; } if (isset($this->request->post['kvvaradha_image_additional_width'])) { $data['kvvaradha_image_additional_width'] = $this->request->post['kvvaradha_image_additional_width']; } elseif (isset($setting_info['kvvaradha_image_additional_width'])) { $data['kvvaradha_image_additional_width'] = $this->config->get('kvvaradha_image_additional_width'); } else { $data['kvvaradha_image_additional_width'] = 74; } if (isset($this->request->post['kvvaradha_image_additional_height'])) { $data['kvvaradha_image_additional_height'] = $this->request->post['kvvaradha_image_additional_height']; } elseif (isset($setting_info['kvvaradha_image_additional_height'])) { $data['kvvaradha_image_additional_height'] = $this->config->get('kvvaradha_image_additional_height'); } else { $data['kvvaradha_image_additional_height'] = 74; } if (isset($this->request->post['kvvaradha_image_related_width'])) { $data['kvvaradha_image_related_width'] = $this->request->post['kvvaradha_image_related_width']; } elseif (isset($setting_info['kvvaradha_image_related_width'])) { $data['kvvaradha_image_related_width'] = $this->config->get('kvvaradha_image_related_width'); } else { $data['kvvaradha_image_related_width'] = 80; } if (isset($this->request->post['kvvaradha_image_related_height'])) { $data['kvvaradha_image_related_height'] = $this->request->post['kvvaradha_image_related_height']; } elseif (isset($setting_info['kvvaradha_image_related_height'])) { $data['kvvaradha_image_related_height'] = $this->config->get('kvvaradha_image_related_height'); } else { $data['kvvaradha_image_related_height'] = 80; } if (isset($this->request->post['kvvaradha_image_compare_width'])) { $data['kvvaradha_image_compare_width'] = $this->request->post['kvvaradha_image_compare_width']; } elseif (isset($setting_info['kvvaradha_image_compare_width'])) { $data['kvvaradha_image_compare_width'] = $this->config->get('kvvaradha_image_compare_width'); } else { $data['kvvaradha_image_compare_width'] = 90; } if (isset($this->request->post['kvvaradha_image_compare_height'])) { $data['kvvaradha_image_compare_height'] = $this->request->post['kvvaradha_image_compare_height']; } elseif (isset($setting_info['kvvaradha_image_compare_height'])) { $data['kvvaradha_image_compare_height'] = $this->config->get('kvvaradha_image_compare_height'); } else { $data['kvvaradha_image_compare_height'] = 90; } if (isset($this->request->post['kvvaradha_image_wishlist_width'])) { $data['kvvaradha_image_wishlist_width'] = $this->request->post['kvvaradha_image_wishlist_width']; } elseif (isset($setting_info['kvvaradha_image_wishlist_width'])) { $data['kvvaradha_image_wishlist_width'] = $this->config->get('kvvaradha_image_wishlist_width'); } else { $data['kvvaradha_image_wishlist_width'] = 47; } if (isset($this->request->post['kvvaradha_image_wishlist_height'])) { $data['kvvaradha_image_wishlist_height'] = $this->request->post['kvvaradha_image_wishlist_height']; } elseif (isset($setting_info['kvvaradha_image_wishlist_height'])) { $data['kvvaradha_image_wishlist_height'] = $this->config->get('kvvaradha_image_wishlist_height'); } else { $data['kvvaradha_image_wishlist_height'] = 47; } if (isset($this->request->post['kvvaradha_image_cart_width'])) { $data['kvvaradha_image_cart_width'] = $this->request->post['kvvaradha_image_cart_width']; } elseif (isset($setting_info['kvvaradha_image_cart_width'])) { $data['kvvaradha_image_cart_width'] = $this->config->get('kvvaradha_image_cart_width'); } else { $data['kvvaradha_image_cart_width'] = 47; } if (isset($this->request->post['kvvaradha_image_cart_height'])) { $data['kvvaradha_image_cart_height'] = $this->request->post['kvvaradha_image_cart_height']; } elseif (isset($setting_info['kvvaradha_image_cart_height'])) { $data['kvvaradha_image_cart_height'] = $this->config->get('kvvaradha_image_cart_height'); } else { $data['kvvaradha_image_cart_height'] = 47; } if (isset($this->request->post['kvvaradha_image_location_width'])) { $data['kvvaradha_image_location_width'] = $this->request->post['kvvaradha_image_location_width']; } elseif (isset($setting_info['kvvaradha_image_location_width'])) { $data['kvvaradha_image_location_width'] = $this->config->get('kvvaradha_image_location_width'); } else { $data['kvvaradha_image_location_width'] = 268; } if (isset($this->request->post['kvvaradha_image_location_height'])) { $data['kvvaradha_image_location_height'] = $this->request->post['kvvaradha_image_location_height']; } elseif (isset($setting_info['kvvaradha_image_location_height'])) { $data['kvvaradha_image_location_height'] = $this->config->get('kvvaradha_image_location_height'); } else { $data['kvvaradha_image_location_height'] = 50; } $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('extension/theme/kvvaradha', $data)); } protected function validate() { if (!$this->user->hasPermission('modify', 'extension/theme/kvvaradha')) { $this->error['warning'] = $this->language->get('error_permission'); } if (!$this->request->post['kvvaradha_product_limit']) { $this->error['product_limit'] = $this->language->get('error_limit'); } if (!$this->request->post['kvvaradha_product_description_length']) { $this->error['product_description_length'] = $this->language->get('error_limit'); } if (!$this->request->post['kvvaradha_image_category_width'] || !$this->request->post['kvvaradha_image_category_height']) { $this->error['image_category'] = $this->language->get('error_image_category'); } if (!$this->request->post['kvvaradha_image_thumb_width'] || !$this->request->post['kvvaradha_image_thumb_height']) { $this->error['image_thumb'] = $this->language->get('error_image_thumb'); } if (!$this->request->post['kvvaradha_image_popup_width'] || !$this->request->post['kvvaradha_image_popup_height']) { $this->error['image_popup'] = $this->language->get('error_image_popup'); } if (!$this->request->post['kvvaradha_image_product_width'] || !$this->request->post['kvvaradha_image_product_height']) { $this->error['image_product'] = $this->language->get('error_image_product'); } if (!$this->request->post['kvvaradha_image_additional_width'] || !$this->request->post['kvvaradha_image_additional_height']) { $this->error['image_additional'] = $this->language->get('error_image_additional'); } if (!$this->request->post['kvvaradha_image_related_width'] || !$this->request->post['kvvaradha_image_related_height']) { $this->error['image_related'] = $this->language->get('error_image_related'); } if (!$this->request->post['kvvaradha_image_compare_width'] || !$this->request->post['kvvaradha_image_compare_height']) { $this->error['image_compare'] = $this->language->get('error_image_compare'); } if (!$this->request->post['kvvaradha_image_wishlist_width'] || !$this->request->post['kvvaradha_image_wishlist_height']) { $this->error['image_wishlist'] = $this->language->get('error_image_wishlist'); } if (!$this->request->post['kvvaradha_image_cart_width'] || !$this->request->post['kvvaradha_image_cart_height']) { $this->error['image_cart'] = $this->language->get('error_image_cart'); } if (!$this->request->post['kvvaradha_image_location_width'] || !$this->request->post['kvvaradha_image_location_height']) { $this->error['image_location'] = $this->language->get('error_image_location'); } return !$this->error; } }
Don’t Feel like this is a complicated code. Just copy and use it.
Language/kvvaradha.php
Next will be the language area, Here I Just coded it for English-gb the Default one. You can check here in Next Page.