Create a Custom Theme With OpenCart Introductionin Photoshop
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
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 the
AdminDirectory. Files dealing with front-end interface are placed in the
CatalogDirectory. 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
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 case
ViewPart is where we will place all the theme related code. In a quick overview of the
CatalogWe will see how OpenCart does its magic, structure
- Controller It's responsible for handling the application logic
- Language It's useful for separating language specific information for multilingual sites
- Model It's responsible for fetching the data from back-end database
- 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
A default OpenCart theme is available in
ViewDirectory. This is the part which we will explore in this section. There are two more directories:, At the deeper level
What we are really interested in is the
ThemeDirectory. Looking further, there is a directory named
DefaultWhich 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
- ImageAs you've likely guessed, all the image files related to the theme go here
- StylesheetWhich is likely to be stylesheets, Skinning related code, will go here
- 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 example
AccountDirectory 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
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
TemplateDirectory. 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
- 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
- ErrorIt's just the error template which resides here, At the moment
- InformationSitemap Page and Static informational page, You can find here templates related to Contact Page
- 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-end
Catalog/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
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
- 3 Tips for Building a Cohesive Design Across Your ...
- Problems and Challenges of WordPress eCommerce Sol...