Create a Custom Theme With OpenCart

Published on February 2017 | Categories: Documents | Downloads: 78 | Comments: 0 | Views: 362
of 31
Download PDF   Embed   Report

Comments

Content

Create a Custom Theme
With OpenCart:
Introduction
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!

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. 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.

The OpenCart Design Pattern: MVC-L

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.

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

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: javascript and theme .

For now, let's just assume that all of the required JavaScript files are placed in
the javascript directory. Sometimes there is an exception to this in which case we
can also place stylesheets and related image files under this directory, as well. For
example, OpenCart provides the colorbox library which contains more than just
JavaScript.
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.

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

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.

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 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.
Advertisement

Template Categorization
1. Common. Template files for the common elements across different pages are placed in
this directory. Examples include header, footer, and sidebar related templates. You
should also place your template files here if you plan to use that across different pages

which makes it easier to maintain in the long run. Of course it's not mandatory to do so,
but it's nice to do the things the way itshould be done.
2. Error. At the moment, it's just the error template which resides here.
3. Information. You can find here templates related to Contact Page, Sitemap Page and
Static informational 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 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.

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. If you have
any questions or feedback, feel free to leave your comment!
we explored the basic theme structure of OpenCart. Now, let's move one step further
and learn how to can create a custom theme. If you haven't gone through the first part
of this tutorial series yet, read through it so that you understand where we're headed in
this article as we continue to build our own theme.

OpenCart comes with the decent default theme which will serve as a base theme for our
new custom theme. Generally speaking, there are two scenarios in which you would
want to create your custom theme:
1. You want to replace the default front-end interface completely with a new interface of
your choice,
2. You would like to change couple of things like color combination, layout structure and
branding related changes.

In either case, I recommend creating a new custom theme instead of modifying the
default theme files directly as it'll make the life easier during the version upgrade of the
OpenCart.
Before proceeding, you should have a working installation of OpenCart. If you haven't
done that, go ahead and set up the same.
Once done, let's get started!

Setting Up the Skeleton
Let's create a new directory,
named mycustomtheme underneath catalog/view/theme . This will serve as a
container for the other files like images, stylesheets, and templates. Furthermore, you
need to create three more directories within the mycustomtheme
directory: image , stylesheet , and templates .

You have set up the basic skeleton structure needed for your custom theme once
you've done with this. In fact, you can just go ahead and enable your custom theme
from the back-end and it'll work just fine.

Activate the New Theme
Let's go ahead and activate your custom theme from the back-end. Once you're logged
in the back-end, go to System > Settings. It'll list out all the stores available in your
OpenCart installation.

In most cases, it'll display a single store entry, but if you have multiple stores set up,
you'll see more than a single row. OpenCart allows you to set up multiple stores using
single installation.
This is really an important feature if you've multiple stores and you don't want to set up
OpenCart installation for each and every store. You can manage all the stores using
single admin interface! Multi-store set up is something out of the scope of this tutorial
but it's an important feature worth to explore.
Back to our business, click on the Edit link in the Action column which should open the
store configuration interface.

Click on the Store tab. This will open the configuration form that allows us to select a
front-end theme. You should see that our custom theme, mycustomtheme , is also listed
along with the default theme in the Template dropdown box. Select that and click
on Save button to apply our changes.

Now if you check the front-end, everything is working fine. We haven't created a single
file in our custom theme yet - how does this work? That's where template overriding
comes into play.

Understand the Magic of Template Overriding
Even if we have set up our new theme, mycustomtheme , as an active theme of the
store, the front-end is still looking exactly like as it was before we enabled our new
theme from the back-end. This is due to the fact that the template overriding system is
in place.
Let's take a look at a quick example so we can more easily understand this: To render
the home page, OpenCart uses template located
at catalog/view/theme/*/template/common/home.tpl . The asterisk here in the path
maps to the theme name. Now OpenCart will execute following procedure in order to
find the home.tpl template:


As we have set up mycustomtheme as an active theme for the store, first it will try to
find the file
at catalog/view/theme/mycustomtheme/template/common/home.tpl . If it's
found, OpenCart is happy and it will take that file and stop the process here.



If OpenCart can't find home.tpl in the active theme, it will fallback to the default theme
and try to pull catalog/view/theme/default/template/common/home.tpl .
Obviously, it's guaranteed that home.tpl will be there unless you've tyed with the
default theme template files!

OpenCart will always fallback to default theme whenever it can't find the required
template file in the active custom theme. So virtually we can say that it's
the default theme serving files at the moment even if mycustomtheme is in place.

This is really handy in the case where you only need to tweak few selected template
files. In that case, you would only copy those files to the custom theme directory to fulfill
the job.

Extending the Blank Custom Theme
It's an empty basket as far as our custom theme, mycustomtheme , is concerned. Lets
enrich it with some useful content.
Go ahead and create a new directory named common under the template directory of
our custom theme. Now copy home.tpl and header.tpl template files from
the template/common directory of the default theme. You should paste those files in
newly created common directory of our theme.
Similarly, copy all the stylesheet files from the stylesheet directory of
the default theme and paste it under the stylesheet directory of our theme. Repeat
the same process for all the images under image directory although we'll ignore this
directory for now.
At this point, your new theme directory tree should look something this like:

There are couple of important things to note here before we proceed further. You should
only copy the template files to the custom theme that requires customization. The
reason is that the missing file will be always picked up from the default theme so
there's no need to keep the duplicate of the same file unless you need to modify it.
Another thing to notice is that you should maintain the structure of the files similar to
the default theme specifically in the case of template files. As you've seen, we
created a common directory when we copied home.tpl and header.tpl files to
mimic the structure with the default theme.
From now on, I'll mention all the file paths relative to our custom theme directory. Going
further, open the template/common/header.tpl file in your favorite text editor. The
code in this file is responsible for displaying header part throughout the site. If you look

at the code closely, there are few stylesheet references hard coded to the “default”
theme.
Let's change it so it's fetched from the custom theme.
Find the following code,
1

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/style

And replace the same with,
1

<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/stylesheet

Do the same for the other stylesheet references elsewhere required.
In this way, we make sure all the stylesheet files are loaded from our custom theme.
Now open the template/common/home.tpl file and replace all the contents of that file
with following.

01

<?php echo $header; ?>

02
03

<?php echo $column_left; ?>

04

<?php echo $column_right; ?>

05
06
07

<div style="background: #00F;color: #FFF;font-weight: bold;padding-left: 10px;">If thi
</div><br/>
<div id="content">

08

<?php echo $content_top; ?>

09

<h1 style="display: none;"><?php echo $heading_title; ?></h1>

10

<?php echo $content_bottom; ?>

11

</div>

12

</div>

13
14

<?php echo $footer; ?>

Check your home page and you should see the change.
This is just one example of how to override and customize the templates using your
custom theme. In the real world, of course, you may need to alter a lot of templates so
that they correspond with the custom design you would like to integrate. Later in this
series, we'll see how to find a template related to a specific page in the front-end.

Summary
Ultimately, this article aimed to help you understand the nuances of creating a custom
theme. You can go ahead and explore the code of other template files for a better
understanding of the workings of OpenCart theme.
In the next part, we'll take a look at some of the common templates in detail. Of course,
your feedback is most welcome so please leave questions, comments, and so on in the
comments.
we learned how to create a custom theme and enable it from the back-end of OpenCart.
We also studied how the template overriding system works in the application.
In this part, we'll go further and dissect the important templates to understand the basic
elements used in a general OpenCart template. We'll also go through a detailed use
case to interpret the complete process of page generation. This should helpful for when
you need to customize any page in OpenCart.
Broadly speaking, when we look at the templates OpenCart provides, we can categorize
them into three different categories. It's important to note that this isn't officially stated in
the OpenCart documentation, but it will help us to understand what exactly it takes to
generate a complete page in the front-end.

Layout Templates
In terms of OpenCart, templates are called layouts. You can imagine a layout template
is a decorator template that collects the content for the different areas of the page,
pushes that content into the layout, and then generates a complete page.
Slots may refer to elements like the header, the footer, a sidebar element, and module
content. For nearly every page in the store front-end, there's an associated layout
template that exists.
It's important to note that OpenCart also allows you to create layouts from the back-end
which is another way you can change the partial structure of the certain front-end
pages.

Sub-Templates
This kind of template generates a slot for specific content. In a general scenario, the
content is generated by a sub-template and is pushed into the layout template. The
simplest example of this kind is template/common/header.tpl . It's responsible for
generating the header part for the every page in the front-end.
And as we discussed earlier, OpenCart provides a nice way to organize template files
such that it makes sense that header.tpl is placed within the common directory. Most
of the templates in this directory generate slot-specific content which is eventually
plugged into the layout.

Module Templates
Remember that a module is something like a block that is pushed to a specific region in
the layout template. As you've probably guessed, module templates these are related to

different modules, and, as we've seen, OpenCart comes with a lot of built-in modules to
extend the core functionality.
By default, there are four different region positions available in the layout template. They
are:
1. Content Top
2. Content Bottom
3. Column Left
4. Column Right

You can assign a module to any of these positions. As the name suggests, if you have
assigned a module to a "Content Top" position, it'll be displayed above the main content
of the page. Module templates are found within the template/module directory so if
you are creating a new module, you must place an associated template in this directory.
Module templates and sub-templates are similar in the way that they are treated by
OpenCart. Both of these are considered as a child template and pushed to the layout
template in the process of page generation.

Layout Template Discovery in the Front-End
First, let's go through the process followed by OpenCart to render any page in the frontend. Whenever you access the page in the front-end, the following procedure is
executed by the application:


Based on the "route" variable set in the URL, OpenCart finds an appropriate controller to
handle the request. We'll see exactly what a "route" variable is and what it does in a later
section. For now, let's just assume that it guides OpenCart to an appropriate controller
file for execution.



It's up to the controller now to do all the heavy lifting for the rest of the process. The
controller is the place where other elements like language files and model files are
included. It also fetches and sets up the actual content to be pushed to the layout
template for the display.



Once the controller is done with content set up, it hands over this information to a view
element that is responsible for displaying the final output to the user. The important thing
to note here is that the controller also sets the layout template filename which will be
used by the view at later stage.



Finally, a view element pulls the required template file and decorates it with the content
which was prepared earlier in controller. The process ends here by sending the output to
the end user.

Now consider a scenario in which you would like to change the layout structure of any
given page in the store front-end. The first question that this raises is how do we go
about finding a template associated with that particular page, Though there's no
specific way to do this, let's take a look at some of the options that are available.

1. Prediction Based on the Structure
This is the easiest way to predict the associated template with any route. In the
terminology of OpenCart, "route" is a query-string variable in the link URL.
For example, consider the following link URL in the front-end which displays the login
page to the user:
http://www.youropencartdomain.com/index.php?route=account/login .

So in the above URL, account/login is the value of the "route" parameter which will
be useful to us. You can simply map this value to the template directory of the default
theme. In this case, the template path you end up with is something like:
{opencart_document_root}/catalog/view/theme/default/template/account/logi
n.tpl

As you may have noticed, the second part of the "route" value, "login", becomes the
template filename ( login.tpl in above case). Let's take an another example:
http://www.youropencartdomain.com/index.php?
route=product/product&path=1&product_id=1

This is the example of "route" parameter format for the product detail page. Value of the
"route" parameter is product/product , so the template for this route should be found
at:
{opencart_document_root}/catalog/view/theme/default/template/product/prod
uct.tpl

2. The Geek Way
In most of the cases, the way described above should work but there are few
exceptions in which case you'll need to look into the controller file. Again, the route
parameter comes to the rescue which also helps to find an associated controller file.
Let's consider the link URL that displays the login page to the user in the front-end:
http://www.youropencartdomain.com/index.php?route=account/login

You can map the value of the route relative to the catalog/controller to find an
associated controller file. So in this case, the controller file you should end up with is:
{opencart_document_root}/catalog/controller/account/login.php

As you may have noticed, the second part of the "route" value, "login", becomes the
controller filename ( login.php in above case). Once you find an associated controller
file, you should look for the code something like:
$this->template = 'default/template/account/login.tpl';

This is the way of controller to tell the OpenCart that it should display the "login.tpl"
layout template from the "default" theme. And yes of course, if this template has been
overridden in your custom theme, it'll be given the first priority!
Among the two methods discussed to find a layout template for any page, the first one
is more theme-developer friendly and the second one is for those who feel a bit more
comfortable digging into the code.
Advertisement

The Common Elements of the Layout Template
At this point, you should feel a bit more comfortable finding a specific layout template
that you would like to customize. In the last section of this article, we'll catch a glimpse
of some of the usual elements in the layout template. We'll stick with our example for
the sake of this exercise.
Let's open the layout template file default/template/account/login.tpl for the
reference.
$header displays the content of the header part in an OpenCart page. The template
related to this can be found at default/template/common/header.tpl .
$footer displays the content of the footer part in an OpenCart page. The template
related to this can be found at default/template/common/footer.tpl .
$column_left is responsible for displaying the output of all the modules assigned to
"Column Left" position from the back-end. The template related to this can be found
at default/template/common/column_left.tpl .
$column_right is responsible for displaying the output of all of the modules assigned to
the "Column Right" position from the back-end. The template related to this can be
found at default/template/common/column_right.tpl .

An "Account" block displayed in the right sidebar of login page provides an example of
this kind of content. In the case in which you would like to customize the output of a
specific module, you should find that file at default/template/module/
{modulename.tpl} .

In the case of the "Account" module, the file
is default/template/module/account.tpl . As you can see, the naming convention of
the module template file is pretty easy to guess as it's exactly the same as the name of
module.
$content_top is responsible for displaying the output of all the modules assigned to
"Content Top" position from the back-end. The template related to this can be found
at default/template/common/content_top.tpl .
$content_bottom is responsible for displaying the output of all the modules assigned to
"Content Bottom" position from the back-end. The template related to this can be found
at default/template/common/content_bottom.tpl .

At this point, you should feel confident in the exercise of customizing templates for
OpenCart's front-end. As you may have noticed, you need to modify very few templates
in order to completely change the look and feel of the whole site.

Summary
In this part, we've thoroughly discussed the nature of templates and methods to
discover the templates in front-end for customization. We also discussed some of the
common variables used in layout templates all over the site.
In the final part of this series, we'll see a detailed use case to change the layout
structure of an OpenCart home page. Your thoughts and comments are welcome in the
feed below!

If you've followed the series thus far, you should be able to find the location of home
page layout template. Although a quick look at the templates here and there inside
"€œdefault"€ theme should give you a hint that it's located at
€œ default/template/common/home.tpl .
But if you may have noticed the route of the home page, it contains the
value €œcommon/home . So, as we discussed earlier, you can always map this route to
find the appropriate layout template file.

Looking at the œ home.tpl € file, you'll realize that most of the content is generated
via the generic elements like $header , $footer etc. We won't discuss
the $header and $footer elements as you already know that the contents of those
variables are coming from œ header.tpl  and €œ footer.tpl € files underneath
template/common  directory, respectively.

In the case of default OpenCart home page, there are no modules assigned at the
"€œColumn Left"€ or "€œColumn Right"€ position so you can say
that $column_left and $column_right variables are not doing anything. So
everything you see on the home page except for the header and footer, is coming from
either $content_top or $content_bottom variable. "€œSlideshow"€ and
"€œFeatured"€ modules are assigned to "€œContent Top" € position and
"€œCarousel"€ module is assigned to "€œContent Bottom" € position to the
"€œHome"€ layout.
Now lets go further and see how exactly these modules are assigned to " €œHome" €
page layout.

Module Assignment From the Back-End
Get logged into the back-end and go to "€œ Extensions > Modules"€. This will list out
all the modules available in the system. Now, click on the " €œ Edit"€ link for the
"€œ Slideshow"€ module which will display the module assignment interface.

Although there is quite a bit of configuration available here, the important column for us
are "€œ Layout"€ and "€œ Position"€. As per the values assigned there,
"€œ Slideshow"€ module will be displayed at " €œContent Top"€ part in the
"€œHome"€ layout.
From here, you can also assign a "€œ Slideshow"€ module to any layout at any
position using "Add Module" button. Now let's take a look at an another example, on the
module listing page click on the "€œ Edit"€ link for the "€œ Featured"€ module.

Again you can see that, the "€œ Layout"€ and "€œ Position"€ values are same as that
of the "€œ Slideshow"€ module. So now you should be familiar with how exactly these
modules are displayed in the home page. As you may have noticed that there is also
"€œ Remove"€ button available which is used to un-assign a module from the specific
layout. Go ahead and explore the settings for "€œ Carousel"€ module yourselves!

Homepage Layout Tweaking
Now that you are aware with how module is assigned and unassigned to a specific page
and position, we'll go through the same to tweak the home page layout. Jump into the
admin section, and go to the "€œ Extension > Modules"€ to bring the module listing
page on the table.
In this step, we'll remove all the assigned modules from the home page.



Click on the "Edit" link for the "Slideshow" module. Now, click on the "Remove" button
to un-assign a module from "Home" layout. After that click on "Save" button to apply
the changes. Repeat the same procedure for the "Carousel" and "Featured" modules.

At the end of this step if you check your home page, you should see almost an empty
home page except "header" and "footer"  parts. Don't worry, that's what we really
intended to do! In the next step, we'll assign a bit different set of modules to " €œColumn
Left"€ and "€œColumn Right"€ positions in home page. Let's go to the module listing
page again.


Click on the "€œ Edit"€ link for the "€œ Category"€ module. At the bottom right of the
page, you'll see an "€œAdd Module"€ button, clicking upon which would add a new row
to the listing. In that row, in the "€œ Layout"€ column select "€œHome"€ and in the
"€œ Position"€ column select "€œColumn Left"€. After that click on "€œ Save"€
button to apply the changes.



Click on the "€œ Edit"€ link for the "€œ Account"€ module. Click on the "€œAdd
Module"€ button to add a new row. In the newly added row, in the "€œ Layout"€
column select "€œHome"€ and in the "€œ Position"€ column select "€œColumn
Right"€. Apply your changes using the "€œ Save"€ button.

So now let's have a look at our front-page:

Layout File Changes
So far we have done all the layout related tweaking from the back-end itself. In this
section, we'll add a bit of static text content to the œ home.tpl . Whenever you need to
add a static text in any template, instead of putting the text directly inside the template
you should follow the standard way of the OpenCart. Let's exercise the same.
Of course, you won't directly edit the œ home.tpl file in the "€œdefault"€ theme, lets
override it in your custom theme!
Go ahead and open € catalog/language/english/english.php . Add the following
line at the end of the file just before the line which contains œ ?> .
1$_['text_welcome']

= "Lorem Ipsum is simply dummy text of the printing and typesetti
1500s, when an unknown printer took a galley of type and scrambled it to make a type speci

typesetting, remaining essentially unchanged. It was popularised in the 1960s with the rel
publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

Now go ahead and open œ catalog/controller/common/home.php . We'll include the
language variable added in the english.php file in this controller file so it's available in
the œ home.tpl file for display.
In "€œ home.php"€ before the following line,
1

$this->response->setOutput($this->render());

Add this one,
1

$this->data['welcome_text'] = $this->language->get('text_welcome');

This will make sure that the $welcome_text variable is available in the layout template
file just like any other variables. Now the only thing remaining is to
include $welcome_text in the home.tpl  file. So your home.tpl  should look like
this,
01

<?php echo $header; ?>

02

<?php echo $column_left; ?>

03

<?php echo $column_right; ?>

04

<div id="content">

05

<?php echo $content_top; ?>

06

<h1><?php echo $heading_title; ?></h1>

07

<div><?php echo $welcome_text; ?></div>

08

<?php echo $content_bottom; ?>

09
10

</div>
<?php echo $footer; ?>

I've done very few changes in this file. I've added the
variable $welcome_text surrounded by <div> tag. I've also removed
the display:none  from the <h1> tag so the title is displayed. Finally, a bit of
formatting of the code is done for better readability. Here's the final snap!

There are a couple of important things to note here, although we've directly
modified english.php  and home.php files but it's strictly discouraged to do so. It
was just done to keep this example simple. In fact, you should use "vQmod"  OpenCart
extension in the case in which you need to modify the core files.
So this was a pretty simple example to demonstrate the layout modifications on the
home page layout. Although we added a simple static text, you can fetch more dynamic
information from the database and display the same in the template!

Of course, that is something requires a bit of knowledge of how OpenCart model works.
You're encouraged to go further and assign couple of more modules to the different
positions to see how things work.

Summary
I hope this series helped you to understand what exactly OpenCart theme is all about
and how to customize the default theme with your own. You can always shoot your
comments and questions in the feed below.

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close