In this series, I am going to explain how you can build a custom theme with the popular open source e-commerce framework OpenCart. In this first part, I'll explain basic structure of the OpenCart theme.
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!
OpenCart is built using MVC design pattern which allows separation of concerns between the data and the presentation. As a theme developer, you don't need to worry about tweaking the files all the time which contains the application logic and template code together.
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 the
admin directory. Files dealing with front-end interface are placed in the
catalog directory. 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.
Model View Controller, or MVC, is a very popular design pattern in the field of software development. OpenCart just adds an another element to it: Language, which is why we refer to it as MVC-L.
In our case, the
view part is where we will place all the theme related code. In a quick overview of the
catalog structure, we will see how OpenCart does its magic.
A default OpenCart theme is available in
view directory. This is the part which we will explore in this section. At the deeper level, there are two more directories:
What we are really interested in is the
theme directory. Looking further, there is a directory named
default which 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. For now, see what a theme's structure looks like.
For example, if you give a quick look at the
account directory 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.
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 the
template directory. 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, you can develop your own modules as well for your custom requirements.
With that said, let's have a closer look at the template categorization.
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 route specific template files.
For example, when you visit the "My Account" page in the front-end, the template associated with that should be found under
catalog/view/theme/default/template/account. Later in the series, we'll see how to find a specific template file looking at the url path of that page.
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. If you have any questions or feedback, feel free to leave your comment!