Fr

ee

OpenCart is an e-commerce cart application built with its

own in-house Model-View-Controller-Language framework.
With its popularity and ease of use for e-commerce,
OpenCart is being used more and more to create custom
extensions, themes, and pages.

What you will learn from this book

This book embarks on an exciting journey of creating custom

themes, pages, and templates in OpenCart.

Change the design of your OpenCart module

It shows you how to change and manage the general

setting of your store and manage the modules and their
layout, along with files and folders of the default theme. You
will explore the featured module to help you understand
module code and its functionality. Finally, you will learn to
create customized pages for feedback management and
make an admin section where you will make forms and lists
to perform CRUD functionalities and show this feedback at
the frontend.

Who this book is written for

Create a custom theme with the use of

OpenCart's default theme
Create listing pages and a form page, and
perform actions such as data retrieval,
insertion, and deletion
Explore most of the system level libraries
OpenCart provides
Discover how the backend code behind
modules is developed
Use Bootstrap, Font Awesome, and FlexSlider
to design templates and themes efficiently

$ 29.99 US
19.99 UK

community experience distilled

P U B L I S H I N G

Rupak Nepali

This book is aimed at developers and designers who want

to start developing their own themes and extensions and
for those who want to know about the code workflow of the
OpenCart theme and modules.

Integrate a custom design into the

OpenCart framework

OpenCart Theme and Module Development

OpenCart Theme and

Module Development

pl

C o m m u n i t y

E x p e r i e n c e

D i s t i l l e d

OpenCart Theme and

Module Development
Create custom themes and modules using the exciting new
features of OpenCart

Prices do not include

local sales tax or VAT
where applicable

Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

Sa
m

Rupak Nepali

In this package, you will find:

The author biography

A preview chapter from the book, Chapter 1 'Getting Started with
OpenCart 2.0'
A synopsis of the books content
More information on OpenCart Theme and Module Development

About the Author

Rupak Nepali is from Nepal. He has been working as a PHP programmer and

on the OpenCart framework since 2010. He has also completed many projects
and built many modules on OpenCart to meet his clients' requirements. He is
currently working as a web developer at Corner Edge Interactive, Arizona, and as
a freelancer on Elance, oDesk, and other freelancer sites. Rupak holds a bachelor's
degree in computer information systems from Nobel College, Kathmandu, Nepal.
He is currently studying for his MS degree in computer science from the Maharishi
University of Management, Iowa, USA.

Preface

Preface
If you can build OpenCart themes, then you can also customize the presentation
layer of OpenCart. Likewise, if you can code OpenCart's extensions or modules, then
you can also customize the functionality of the OpenCart e-commerce framework
and make an e-commerce site easier to administer and look better. You can also
change the way the default OpenCart system works. In this book, you will learn
about the third-party frameworks used in the OpenCart framework, such as
Bootstrap, Font Awesome, and FlexSlider. Similarly, you will learn about the global
methods used in OpenCart. We will create a custom theme and describe most of
the code of the presentation layer. Then you will be able to get a description of the
modules' code and create a custom module.
In OpenCart, modules are a way of customizing and extending the functionality of
OpenCart. This book shows you how to create a customized theme and make all sorts
of extensions: OpenCart modules, an Order Total module, the idea of creating payment
and shipping modules, and ways of creating custom pages and forms on an OpenCart
module to carry out insert, edit, delete, and list operations (the CRUD functionality).
This book focuses on teaching you all aspects of OpenCart's modules and themes
by showing and defining code examples. We describe how to build a new theme
and module from the default OpenCart theme and module. This book describes
every line of code so that you will know what the code does. You will be cloning
the default theme to make a new customized theme.
Each chapter teaches you how to create a new customized OpenCart theme. You will
be able to create a customized theme and a Hello World module by cloning HTML.
Likewise, you will get a description of every line of code of the default Featured
module of OpenCart. Then we will create feedback pages used to manage feedback,
and you will be able to create an Order Total module called Tips Order Total module.
Each chapter builds a practical theme and a module from the ground up using
step-by-step instructions and examples.

Preface

What this book covers

Chapter 1, Getting Started with OpenCart 2.0, describes the structure of the files and
folders of the default theme. This chapter shows you how to manage the layout and
position of the module in a theme. You also learn the following: how to change the
general settings of the images; module images; how to create and manage banners,
carousels, and slideshows; and managing the layout.
Chapter 2, Bootstrap, Font Awesome, and FlexSlider in OpenCart 2 Themes, teaches you
how OpenCart uses third-party frameworks, and how we can use them to design
themes and modules easily, effectively, and efficiently. You get to learn these topics:
why Bootstrap is used in OpenCart themes, basic templating with the use of the
Bootstrap, and how to use Font Awesome and FlexSlider.
Chapter 3, Creating Custom Themes, gives a checklist to be taken into consideration
for the header, footer, and other sections when creating a new custom theme. In
this chapter, we change the style of the currency module, show it in a row, describe
the code of the top category menu, and then style the top menu with different CSS.
We describe most content area codes, such as the home, category, information, and
contact us pages. We also edit CSS in a style sheet to change the background and get
the knowledge to customize the theme and make a new design for the theme.
Chapter 4, Getting Started with OpenCart 2 Modules, starts off with modules in
OpenCart. Here, you learn to clone the HTML content module into the Hello World
module, and you are shown the way to install, configure, and uninstall an OpenCart
module, and show the structures of admin and frontend files.
Chapter 5, Extensions Code, describes the code of extensions, lists all the global
methods of OpenCart, shows you how to configure the feature product module,
describes the code of the Featured module, shows you how to start coding for the
shipping module, and describes the payment module.
Chapter 6, Create OpenCart Custom Pages, is where we create a listing page and a
form page; perform actions such as data retrieval, insertion, and deletion; and show
them in the frontend. You get to learn the ways to manage data and create a page
to list it, insert data into the database, retrieve it (either to display or to edit), and
finally delete the data. Likewise, we show you how to list the data at the frontend
by creating the required page. In this way, you will be able to create modules and
pages to manage data across OpenCart.

Getting Started with

OpenCart 2.0
OpenCart is an e-commerce cart application built with its own in-house framework,
which uses the Model-View-Controller-Language (MVCL) pattern. Thus, each
theme is in the OpenCart view folder, and every module follows the MVCL pattern.
In this chapter, we will describe some basic settings in OpenCart version 2.0,
and help you set up the required environment for template designing, or theme
designing, and module making.

The features of OpenCart

The latest version of OpenCart at the time of writing this book is 2.0.1.1, which boasts
of a multitude of great features:

Modern and fully responsive design, OCMod (virtual file modification)

A redesigned admin area and frontend

More payment gateways included in the standard download

Event notification system

Custom form fields

An unlimited module instance system to increase functionality

Its pre-existing features include the following:

Open source nature

Templatable for changing the presentation section

[1]

Getting Started with OpenCart 2.0

It also supports:

Downloadable products

Unlimited categories, products, manufacturers

Multilanguage

Multicurrency

Product reviews and ratings

PCI-compliant

Automatic image resizing

Multiple tax rates related products

Unlimited information pages

Shipping weight calculation

Discount coupon system

It is search engine optimized and has backup and restoration tools. It provides
features such as printable invoices, sales reports, error logging, multistore features,
multiple marketplace integration tools such as OpenBay Pro, and many more.
Now, let's start with some basic general setting that will be helpful in creating our
theme and module.

Changing the OpenCart shop's general

settings
Let's begin with the general settings that affect the frontend so that you will
understand things you need to take into consideration when creating the OpenCart
theme and module. While installing fresh OpenCart, it uses the default data
and settings in the database provided by OpenCart. We describe it based on
the default settings.

[2]

Chapter 1

In OpenCart 2.0.1.1, go the address http://localhost/packtthemeshop/admin

(if you are browsing through localhost), the admin menu will appear in the left
column, and it can be extended as required by clicking on the icon in the top-left
corner icons near the logo, shown here:

Now, let's start setting images' height and width.

Setting image height and width

Most of the time, developers and store administrators are confused about the image
height and width, so we are covering it here. Most image sizes are managed from
the admin sections, such as the category image size, product images, and so on.
We can set most of the image size from the admin dashboard menu, go to System
| Settings. Then, edit the store for which you want to edit the image size. The
following screenshot shows the Store List from which you can select your particular
store to edit by clicking on the edit icon shown in blue:

[3]

Getting Started with OpenCart 2.0

After editing, you have to click on the Image tab. You will notice that most of the
image settings are done from here except for the module image setting. In the Image
tab, you will see something like this:

We can change the logo from here, so when designing a new OpenCart theme, we
must take care to ensure that the logo is retrieved from the database. Likewise, the
favicon icon is also inserted from the Image tab, so we should take care about
that as well. Category image sizes are also managed from here. Let's check out the
Desktops category page, you can see the page by hovering the cursor over Desktops
in the menu and clicking on See All Desktops. This is what you will see from the
default options:

[4]

Chapter 1

Now, change the * Category Image Size: input field from 80 to 770, and the next
field from 80 to 100 (the length is in pixels). Then, refresh the Desktops category
page link and you will see the changes in the Desktops category image size.
Similarly, images in the product details page are also adjustable. The product's main
image is adjustable from * Product Image Thumb Size as well as additional product
image size. The following screenshot shows the product image thumbnail and
additional product images:

When you click on the main image or the additional image, it then pops up to show
a larger image in the color box, whose image size is managed by the * Product Image
Popup Size:.
In the same way, related products' images, the compare image size, image sizes in
the wish list, and cart image sizes are all managed from image's settings page.
Downloading the example code
You can download the example code fies from your account at
http://www.packtpub.com for all the Packt Publishing books you
have purchased. If you purchased this book elsewhere, you can visit
http://www.packtpub.com/support and register to have the fies
e-mailed directly to you.

[5]

Getting Started with OpenCart 2.0

Managing the modules in the theme

We will now see how to manage modules in OpenCart 2.0.1.1. Layout and position
play a major role in making the frontend modular. We will see how to manage
modules in OpenCart 2.0.1.1.

Managing the image dimensions of modules

in the default theme
Most of the module's image dimensions are managed from the module settings. So,
when integrating the module into the theme, we have to take care of the settings.
Consider this: in the Latest product module, there are settings for number of limiting
the number of products to show, image width, and image height, as shown in the
following screenshot:

You can see this by going to the admin dashboard's menu and then to Extension |
Module. Edit the Latest module. You can insert the width and height of the image
to be shown in the frontend in the module. It is flexible, which means that you can
show images in different sizes on different pages and positions. So, while creating
the theme we have to take care of this as well.

[6]

Chapter 1

Creating and setting a promotional banner

A Banner is an image shown in the top, bottom, right, or left sidebar of a website,
especially for the promotions. Banners can be uploaded and customized from
Administrator section | System | Design | Banners. These banners are used in the
Banner modules, the Carousel module or in the Slideshow module. If you want to
add new banners, you have to navigate to Administrator section | System | Design
| Banners, then click the Add New button showing a + symbol and enter the banner
name; after that, click on the Add Banner shown with a + sign button, and you will
have to insert the following details:

Banner name: Add in a suitable name for the banner

Status: This should be set as Enabled to enable the banner

Title: Enter a title that will be shown to the customer when he hovers the
cursor over the banner

Link (icon): This sets the URL to which the banner will direct the user to

Image (icon): Upload your favorite image for the banner

The following shows the Banners page that has the preceding fields in it:

After filling in the input fields, click on the save button, and your banner is ready to
use in the modules.
[7]

Getting Started with OpenCart 2.0

Installing and uninstalling a module

OpenCart is a module-based system that allows us to extend this functionality.
We can add many modules and remove them as per our requirement. Go to
Administrator | Extensions | Modules, and then click the green + sign to install the
module. If it is already installed, you can click the red - sign to uninstall the module,
as shown in the following screenshot:

Setting the Banner, Carousel, and Slideshow

modules
In OpenCart version 1.5.6.1, all layouts and positions need to be chosen while
activating the module, but from OpenCart 2.0.1.1 onwards, the module section and
the layout section are different. We first activate the module from the extension
section, and choose the activated module and position for each layout. Let's show
the Banner module in the home page.
Go to Administrator | Extensions | Modules | Banner. Then, click on the green
+ button to install; if it is already installed, click on the blue edit button. When you
click on the blue edit icon, you should see the following screen:

[8]

Chapter 1

These are the options seen in the preceding screenshot:

Module Name: Enter a suitable module name

Banner: This contains the settings to choose from the list of banners

Width and Height: Insert the dimensions of the image that will be shown on
the frontend; enter 180 and 150 in the Width and Height fields respectively

Status: This enables the banner module

Likewise, we can activate the Carousel module in our OpenCart pages. Go to

Administrator | Extensions | Modules | Carousel, and click on it if it is not
installed. If it is installed, you can click the blue edit button, and then choose the
banners that you wish to show, the dimensions of the images, and the status of the
Carousel module. In a similar way, we can activate the slideshow module.

Managing the layout and position of a module

in a theme
OpenCart has default page layouts that are based on the route of the page. Some
of the layouts can be found by going to Administration | System | Design |
Layouts. They are Account, Affiliate, Category, Checkout, Contact, Default,
Home, Information, Manufacturer, Product, and Sitemap.
To manage layouts, perform the following steps:
1. Select any one of the layouts mentioned previously; let's consider the
Account layout. You have to provide the layout name and then choose the
Store and value of Route as account/%. This means that the module will be
seen where the route value contains account for that store. If your URL is
http://example.com/index.php?route=account/login, the module is
shown as route=account. If you want to show the module in the account
section where route=account, you have to add module, choose the module
that you want to show, select the position in which the module lies, and
insert the sort order for that module. If you don't see module in the module
dropdown, then you have to install it first by going to Administrator |
Extensions | Modules.

[9]

Getting Started with OpenCart 2.0

You can choose four positions: content top, content bottom, column
right, and column left as per your wish as to where the module should
be seen. The Sort Order field shows the module to be displayed first when
there are multiple modules in the same layout and position. Then, the
lower number has higher priority. Let's take an example, as shown in the
following screenshot:

2. As seen here, we have added the Category module with its position set to
Column Right. Now, if you want to show the Account module at the top
and the Category module just below it, in this case, the Sort Order option
plays an important role. As seen in the screenshot, the Account module will
show up first, and then the Category module show up below it. In this way,
you can add many modules in any position and show them in any order as
you please.
3. If you want to show the modules in the Affiliate section, you have to choose
the Affiliate layout as the route is affiliate/%, that is, anything starting
with route=affiliate/ in the URL.
4. Similarly, for other layouts, check the route at Administrator | System |
Setting | Design | Layouts | Edit, see the route, and check the URL route;
you will find where the module will show on choosing the layout name.

[ 10 ]

Chapter 1

5. You can add a new layout from Administrator | System | Setting | Design
| Layouts by clicking the blue plus sign at the top right corner. Then, insert
the layout name, like Special, then click on Add Route, and choose the
Default store to show in the default store, or you can choose required store
and insert value of Route to product/special. Then, click Add Module and
choose one of the module listed (in our case Category), then choose the
position Column left, and then click on the save button to save. Now, check
the front special page; you will see the category module on the left, as shown
in the following screenshot:

Describing the files and folders of the

default theme
Before starting to create a new theme, first you need to know the file and folder
structure of the default theme. The OpenCart directory consists of mainly two
interface styles: one is the frontend, and the other is admin. The frontend style is
represented by the top level of the OpenCart installation folder named catalog, and
the admin folder is admin. There are many other folders, such as the system folder,
which contains classes and methods used by both the admin and the catalog.

[ 11 ]

Getting Started with OpenCart 2.0

The system folder consists of a library folder, which consists of many classes
and method files such as cart, customer, affiliate, and more. The cache folder
contains cache files. The database folder consists of database drivers meant for
supporting different types of database engines, and the logs folder contains the
error log files. Similarly, the root image folder contains all the uploaded images and
the downloads folder contains all the downloadable files. The default theme files and
folders are located at catalog/view/theme/default/ and are structured as shown
in the following screenshot:

The view folder contains all the files necessary for changing the style and appearance
of the presentation layer of the site. The default theme is at catalog/view/theme/
default. The default/ folder contains three folders:

image: This contains all the image files used in the theme or template file. It

consists of images of buttons, reviews, menu background, payment logos,

notifications (such as warning image or success image), as well as many
other images that are used in the theme design.

[ 12 ]

Chapter 1

stylesheet: This folder consists of customized CSS files. In the default

theme, it consists of stylesheet.css. The stylesheet.css file is the
customized style sheet used in OpenCart. The bootstrap files are the main
CSS files, located at catalog/view/javascript/bootstrap/css. The
Font Awesome toolkit is also used, which is located at catalog/view/
javascript/font-awesome/css. The stylesheet.css extends only the
bootstrap CSS file and part of the theme folder. Other style sheets help in the
presentation of the site, so any style sheet for the frontend are placed in the
theme's stylesheet folder.

template: The template folder contains multiple folders and each folder
contains many template files (.tpl). Each folder is meant for creating a
collection of related files. For example, the product folder contains all
template files related to the products, such as category.tpl, product.tpl,
compare.tpl, manufacturer_info.tpl, manufacturer_list.tpl, review.
tpl, search.tpl, and special.tpl. The default template folder contains

the following folders and each folder contains related files:

Account

Affiliate

Checkout

Common

Error

Information

Mail

Module

Payment

Product

Sometimes, we need to add our own JavaScript functionality. In that case, we can
create extra folders here and insert those files. Default JavaScript files are not stored
in the theme location but are in the catalog/view/javascript folder.

[ 13 ]

Getting Started with OpenCart 2.0

Summary
In this chapter, we described the file and folder structure of a default theme. You
learned how to change the general settings of images and module images. You also
learned how to create and manage banners and layouts, carousels, and slideshows.
One main thing to remember is never ever delete the default theme folder. Always leave
it in place, as it is used as a fallback if a custom theme does not have template files.
So, in this way, you learned about the theme structure. In the next chapter, we will
deal with basic knowledge of Bootstrap, Font Awesome, and FlexSlider of OpenCart
version 2.

[ 14 ]

Get more information OpenCart Theme and Module Development

Where to buy this book

You can buy OpenCart Theme and Module Development from the
Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected: