Custom Theme Development in OpenCart
In the first part of this article, we had discussed about various essential elements of theme development in OpenCart. In this second part we are going to concentrate more on the actual development processes and we will deal with a lot of codes. Keep your minds concentrated and learn about various other things in this tutorial.
Lets start with it, keep two things in mind, when I say Theme then I am referring to the theme locate in the folder (catalog/view/theme/mytheme) and when I say the word template then I am referring to the template inside the folder (catalog/view/theme/yourtheme/template). Now we are all set to start with the theme development.
Step 1: Building a basic OpenCart theme: –
Go to the folder catalog/view/theme and create a new folder there with the name of mytheme. The hierarchies of this folder will something like this: –
- Default
- Mytheme
- Catalog/view/theme
Now that you are done with creating the folder go to AdminàSystemàSettingàEdit StoreàTab StoreàTemplateàmytheme. The folder is now created and the new and basic theme is active, it may look ugly and erratic now but you can always follow the further steps and compromise it according to your need.
Step 2: Basic OpenCart theme:
You may be required to go to the original theme folder and copy some of the files from their, remember you are not bound to copy all the files. Follow the enlisted steps for copying the required files: –
- header.tpl
- Common
- Image
- Stylesheet
- Template
- Default
- Mytheme
You will be required to copy all these files because they make up the basic of the themes in OpenCart.
Step 3:Customizing Theme
Now that we have created the theme and leveraged it with the basic files and folder, it is time to customize them as per your requirement. One thing you need to know is that Never change the files or the codes in the default theme, changing or deleting any code there will do a great damage to your site.
Step 4. Understanding Model
MVC is required to interact with the database and you will need to pay extra heed on its development because it is responsible for the developing a proper relationship between the database and the site.
Add all of these codes into your theme for ensuring proper integration.
Add load model: $this->load->model(‘catalog/product’);
get data: $this->model_catalog_product->getTotalProducts()
post data: $this->model_catalog_product->editProduct()
$this->load->model(‘catalog/product’) tell the opencart to load model/catalog/product.php either in admin or catalog controller. getTotalProducts(), editProduct() is a function inside the model/catalog/product.php.
Now open model/catalog/product.php and find public function getProduct. See list after return array, and you will found all product data. The question is, if the getProduct() listed all product data, why it doesn’t show at category page (frontpage)? This is because the category controller decided not to show all data.
Step 5: Changing VQmod for making your theme exquisite
VQmod is a special tool that allows you to make changes to the non-fallback files in the theme like controller. This tool allows you to enhance your theme without making any change to the default code of the themes. It is always advised to use the latest model of this tool, you can download it from Internet.
You will be required to install the Vqmod by copying these of files and folders from the opencart root: –
- Admin
- Catalog
- Download
- System
- Image
- vqmod
- Yoursite
Now that you have made the requisite changes you can open a new tab and access the site localhost/yoursite/vqmod/install and congratulations your theme is running well on your system. Look around for the needs and desires you have and make changes according to your need.