OpenCart: layout structure

In this article, we will see the default layout structure of OpenCart. We'll discuss the cascading stylesheet file from it and modify it according to our needs.

First of all, we'll use the reset style properties to eliminate cross-browser problems. We will discuss every property here. We'll also see the corresponding effects on our site.

Then, we'll do some basic styling for the site. For each change in style, we will see why we did that.

Folder structure

In our main OpenCart folder, we have the admin and catalog sections. These are two separate subsystems. As the name says, admin has the files and folders for administration operation. Catalog contains the store files and folders. Each admin and catalog section has a separate model, view, and controller. Under this admin and catalog folder, we will see the model, view, and controller folders. You will see different subfolders within those folders.

So, let's discuss this MVC structure in the following paragraph.

OpenCart is built with the MVC design pattern. So, it has model, view, and controller. A user requests the OpenCart controller to process the request. Then, the controller gets the data using the model and processes the fetched data to show the response with the view file. The following figure shows the above operation of MVC:

opencart-layout-structure-img-0

For theme modification, we will focus only on the View folder of the catalog in this article. It has javascript and theme folders. We place our themes under the theme folder and the necessary JavaScript files in the JavaScript folder.

Each theme has an image, stylesheet, and template folder. We will see how we can create a new theme later in this article.

Theme file style

As we stated earlier, OpenCart uses the MVC design pattern. So, the view files remain separated from the core code. These files are .tpl files. And, they are placed under catalogviewthemedefaulttemplate. These .tpl files are basically HTML files. They have PHP code within them to display the necessary data.

OpenCart doesn't use the smarty template engine. Rather, it uses embedded PHP codes that are easy to use. We assign the PHP variables in the controller with necessary data. Then, we call the variable in the .tpl view file. We can also use the global class reference variable. In the controller, we will assign the value like this:

$this->data['shop_name'] = 'store';

Here, we assigned store value to the shop_name variable.

In the .tpl view file, we will display the value like this:

<?php echo $shop_name; ?>

Creating a new theme

In this recipe, we will see the steps to create a new theme for OpenCart. There are some rules to create OpenCart themes.

Getting started

Let's get started with the steps to create a new theme with OpenCart.

How to do it

Following are the steps for creating a new theme for OpenCart:

First of all, we need to create a new folder under catalogviewtheme. For example, we will name it shop for this project.

Now, we need to copy some files from the default theme folder to our new theme folder. The files are the following:
- catalogviewthemedefaultstylesheet*.*
- catalogviewthemedefaultimage*.*
- catalogviewthemedefaulttemplatecommonheader.tpl

We have to edit some values in the header.tpl file for our new theme. We will replace all default keywords with our new theme name shop. Actually, there are six places where we need to replace the new theme name. The lines are the following:
<link rel="stylesheet" type="text/css"
href="catalog/view/theme/shop/stylesheet/stylesheet.css" />
// other lines ...
<link rel="stylesheet" type="text/css"
href="catalog/view/theme/shop/stylesheet/ie6.css" />
//other lines ...
<div class="div3">
<a href="<?php echo str_replace('&', '&', $special); ?>"
style="background-image: url('catalog/view/theme/shop/image/special.png');">
<?php echo $text_special; ?></a>
<a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/shop/image/bookmark.png');">
<?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&', $contact); ?>" style="background-image: url('catalog/view/theme/shop/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&', $sitemap); ?>" style="background-image: url('catalog/view/theme/shop/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div>
//other lines ...

And now, save it.

Now, we will go to the admin area. First log in with our stored admin credentials.

Go to System | Settings in the admin panel:

We will go to the Store tab. We will change the theme from default to shop, our new theme from a select list.

You can make changes on your theme's CSS file.

Resetting layout styles

Before beginning our theme styling work, we must first reset all the styles. This will help us with cross-browser problems.

Getting started

We need to modify the stylesheet.css file of our new theme first. We will go to catalogviewthemeshopstylesheet. And open up stylesheet.css in our favourite editor.

How to do it

Now, we will add reset styles to our stylesheet.css file. First, we need to change the browser's margin, padding, and border properties. We will set styles for several different HTML tags. We can add extra style properties into it:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

We will see the effect of our code in our store. The product images will come closer now.

Unlock access to the largest independent learning library in Tech for FREE!

Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

Renews at $15.99/month. Cancel anytime

We adjust the line height of body tag. So, put the following code in the CSS file.
body {
line-height: 1;
}

This also squeezes the lines in the body element. The following image depicts this:

By applying the above style, the line height of these tabs becomes shortened.

We need to reset the style for ordered/unordered list elements. Hence, we use the following reset value:
ol, ul {
list-style: none;
}

It shows all the ul, ol tags without the default bullet properties.

Now, we will reset the blockquote element styles. We will find the changes if we use blockquotes in our HTML code:
blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

For all the elements, we are going to change the focus-styling attributes. We change the outline properties to 0. We set the styles like the following:
:focus {
outline: 0;
}

There could be some styling for insert and deletion in some browsers. So, we will use this styling for the purpose:
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

We will control the styling of our tables also. We set the border and spacing qualities like the following:
table {
border-collapse: collapse;
border-spacing: 0;
}

We still need to set the attribute cell-spacing to 0.

So, our reset styling becomes the following:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

:focus {
outline: 0;
}

ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

We can place it at the start of our site's style file stylesheet.css, or we can create a new file and put the content there also. To do that, just create a new CSS file within the catalogviewthemeshopstylesheet folder. For example, we can name the new style file as reset.css. If we use a new style file, then we need to add the style file in the controller.

opencart-layout-structure-img-5