Create a Custom Theme With OpenCart Introduction

I am going to explain how you can build a custom theme with the popular open source e-commerce framework, In this seriesOpenCartI'll explain basic structure of the OpenCart theme, In this first part

Before proceeding further, I assume that you have working OpenCart installation on your local workstation. If that's not the case, check the OpenCart online documentation and set it up (as doing so is outside the scope of this tutorial). Once you have a working OpenCart installation you are ready to dive in

A Quick Look at the OpenCart Structure

Image may be NSFW.
Clik here to view.

OpenCart is built using MVC design pattern which allows separation of concerns between the data and the presentation. You don't need to worry about tweaking the files all the time which contains the application logic and template code together, As a theme developer

OpenCart provides really clean directory structure when it comes to organization of the framework. All the files related to the back-end interface are placed in theAdminDirectory. Files dealing with front-end interface are placed in theCatalogDirectory. But what we are really interested in is the Catalog directory as eventually we will end up with the custom front-end theme at the end of this tutorial series

The OpenCart Design Pattern: MVC-L

Image may be NSFW.
Clik here to view.

Or MVC, Model View Controller, is a very popular design pattern in the field of software development. OpenCart just adds an another element to it: , LanguageWhich is why we refer to it as MVC-L.  

The, In our caseViewPart is where we will place all the theme related code. In a quick overview of theCatalogWe will see how OpenCart does its magic, structure

Elements Overview

1. Controller It's responsible for handling the application logic
2. Language It's useful for separating language specific information for multilingual sites
3. Model It's responsible for fetching the data from back-end database
4. View This is where we will spend most of our time. It's responsible for rendering the front-end layout

Getting Familiar With the Presentation Layer

Image may be NSFW.
Clik here to view.

A default OpenCart theme is available inViewDirectory. This is the part which we will explore in this section. There are two more directories:, At the deeper levelJavascriptAndTheme 

Let's just assume that all of the required JavaScript files are placed in the, For nowJavascriptDirectory. As well, Sometimes there is an exception to this in which case we can also place stylesheets and related image files under this directory. OpenCart provides the colorbox library which contains more than just JavaScript, For example

What we are really interested in is theThemeDirectory. Looking further, there is a directory namedDefaultWhich is the only built-in theme provided by OpenCart. Don't get just overwhelmed by the deeper theme structure as we'll explore that in more detail soon. See what a theme's structure looks like, For now

Default Theme Structure

1. ImageAs you've likely guessed,  all the image files related to the theme go here
2. StylesheetWhich is likely to be stylesheets,  Skinning related code, will go here
3. TemplateYou can find all the front-end template files here,  As the name suggests. All the template files are organized in a modular way to keep things neat and clean.  

If you give a quick look at the, For exampleAccountDirectory under template you will see most of the files are related to user screens in the front-end. We'll look at this in more detail in the next article

The World of Templates

Image may be NSFW.
Clik here to view.

As I mentioned earlier OpenCart provides a nice way to organize template files. In this article, I'll try explain what it looks like within theTemplateDirectory. You can develop your own modules as well for your custom requirements, Before moving ahead, it's worth noting that although OpenCart comes with a bunch of built-in modules that provide the features required by a basic shopping cart.  

With that said, let's have a closer look at the template categorization

Template Categorization

1. Common Template files for the common elements across different pages are placed in this directory. And sidebar related templates, footer, Examples include header. You should also place your template files here if you plan to use that across different pages which makes it easier toMaintainIn the long run. Of course it's not mandatory to do so, but it's nice to do the things the way itShouldBe done
2. ErrorIt's just the error template which resides here,  At the moment
3. InformationSitemap Page and Static informational page,  You can find here templates related to Contact Page
4. Module It's an important directory in terms of the kind of templates it keeps. As I said earlier in OpenCart we can create our own custom module to fulfill our custom requirements so this is the place where you would like to put your template files related to your custom module

Apart from the template structure explained above, there are still other template directories that contain page-specific template files. In terms of OpenCart, we can say that they are RouteSpecific template files.  

The template associated with that should be found under , For example, when you visit the "My Account" page in the front-endCatalog/view/theme/default/template/accountLater in the series, we'll see how to find a specific template file looking at the url path of that page

Summary

That's the end of the first part of this series. You should be familiar with the basic theme structure of the OpenCart

In the next part, we'll learn how to create a custom theme in the OpenCart. Feel free to leave your comment, If you have any questions or feedback

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.