In this article by Rupak Nepali, author of the book OpenCart Theme and Module Development, we learn about the basic features of OpenCart and its functionalities. Similarly, you will learn about global methods used in OpenCart.

(For more resources related to this topic, see here.)

The features of OpenCart

The latest version of OpenCart at the time of writing this article 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

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.

Advantages of using Bootstrap in OpenCart themes

The following can be the advantages of using Bootstrap in an OpenCart 2 theme:

• Speeds up development and saves time: There are many ready-made components, such as those available at http://getbootstrap.com/components/, which can be used directly in the template like we can use buttons, alert messages, many typography tables, forms, and many JavaScript functionalities. These are made responsive by default. So, there is no need to spend much time checking each device, which ultimately helps decrease development time and save time.
• Responsiveness: Bootstrap is made for devices of all shapes. So, using the conventions provided by bootstrap, it is easy to gain responsiveness in the site and design.
• Can upgrade easily: If we create our OpenCart theme with bootstrap, we can easily upgrade Bootstrap with little effort. There is no need to invest lots of time searching for upgrades of CSS and devices.

Things to remember while making an OpenCart theme

Here are a few things to take care of before stepping into HTML and CSS to create an OpenCart theme:

1. In the header section, you can include a logo section, search section, currency section, language section, category menu section as well as mini-cart section. You can also include links to the home page, wish list page, account pages, shopping cart page, and checkout page. You can even show telephone numbers. These are provided by default.
2. In the footer section, you can include links to information pages, customer service pages (such as a contact us page), a return page, a site map page, extra links (such as brands, gift vouchers, affiliates, and specials), and links to pages such as my account page, the order history, wish list, and newsletter.
3. Include CSS modules in the style sheet, such as .box, .box .box-heading, .box .box-content, and so on, as clients can add many extra modules to fulfill their requirements. So, if we do not include these, then the design of the extra module may be hampered.
4. Include CSS that supports three-column structure as well as right-column-activated-two-column structure, left-column-activated-two-column structure, and one-column structure in such a way that the following happens: if the left columns are deactivated, then the right-column structure is activated. If the right columns are deactivated, then the left-column structure is activated. Finally, if both the columns are deactivated, then one column structure is activated. The following diagram shows the four styles of a theme:
   
5. Include only the modified files and folders. If the CSS does not find the referenced files, then it takes them from the default folder. Try to create a folder structure like what is shown in this screenshot:
   
6. Prepare CSS for the buttons, checkout steps, cart pages, table, heading, and carousel.

Steps to create new theme based on default theme

The following steps help create a new theme based on the default theme:

1. Navigate to the catalog/view/themefolder and create a new folder. Let’s name it packttheme.
2. Now navigate to the catalog/view/theme/defaultfolder, copy the image and stylesheetfolder, go to the catalog/view/theme/packtthemefolder, and paste it here.
3. Go to the catalog/view/theme/packtthemefolder and create a new folder, named template.
4. Next, navigate to the catalog/view/theme/default/template folder, copy the commonfolder, go to the catalog/view/theme/packttheme/templatefolder, and paste the commonfolder there. Now the folder structure looks like this:
   
5. Open catalog/view/theme/packttheme/header.tpl in your favorite text editor, and find and replace the word default with packttheme.
6. After performing the replacement, save header.tpl, and your default base theme is ready for use.
7. Now log in to the admin section and go to Administrator | System | Setting. Edit the store for which you wish to change the theme, and click on the Store tab. Then choose packttheme in the template select box.
8. Next, click on save. Now refresh the frontend, and packttheme will be activated.

Now we can make changes to the CSS or the template files, and see the changes. Sometimes, we need theme-specific JavaScript. In such cases, we can create a javascript folder, or another similar folder as per the requirement.

Global library methods

OpenCart has many predefined methods that can be called anywhere, for example, in controller, model, as well as view template files. You can find system-level library files at system/library/. We will show you how methods can be written and what their functions are.

Affiliate (affiliate.php)

You can find most of the affiliate code written in the affiliate section. You can check out the files at catalog/controller/affiliate/ and catalog/model/affiliate/.

Here is a list of methods we can use for the affiliate library:

• When an e-mail and password are passed to this method, it logs in to the affiliate section if the username (e-mail) and password match among the affiliates. You can find this code at catalog/controller/affiliate/ login.php on validate method:

  $this->affiliate->login($email, $password);

• The affiliate gets logged out. This means the affiliate ID is cleared and its session is destroyed. Also, the affiliate’s first name, last name, e-mail, telephone, and fax are given an empty value:

  $this->affiliate->logout();

• Check whether the affiliate is logged in. If you like to show a message to the logged-in affiliate only, then you can use this code:

  $this->affiliate->isLogged();

• When we echo the following line, it will show the ID of the active affiliate::

  if ($this->affiliate->isLogged()){
  echo "Welcome to the Affiliate Section";
  } else {
  echo "You are not at Affiliate Section";
  }
  $this->affiliate->getId();

Changes made in the catalog folder

The following changes need to be made in the catalogfolder:

1. Go to catalog/model/shipping and copy weight.php. Paste it in the same folder and rename it to totalcost.php. Open it and find the following line:

   classModelShippingWeight extends Model {

   Change the class name to this:

   classModelShippingTotalcost extends Model {

   Now, find weightand replace all its occurrences with totalcost.

   After performing the replacement, find the following lines of code:

   $totalcost = $this->cart->gettotalcost();

   Make the changes as shown here:

   $totalcost = $this->cart->getSubTotal();

   Our requirement is to show the shipping cost as per the total cost purchased, so we have made the change you just saw.

2. Now, find these lines of code:

   if ((string)$cost != '') {
   $quote_data['totalcost_' . $result['geo_zone_id']] = array(
   'code'=>'totalcost.totalcost_'.$result['geo_zone_id'],
   'title'=>$result['name'].'('.$this->language->get('text_
   totalcost') . ' ' . $this->totalcost->format($totalcost, $this-
   >config->get('config_totalcost_class_id')) . ')',
   'cost' => $cost,
   'tax_class_id' => $this->config->get('totalcost_tax_class_id'),
   'text'=> $this->currency->format($this->tax->calculate($cost,
   $this->config->get('totalcost_tax_class_id'), $this->config-
   >get('config_tax')))
   );
   }

   In them, consider the following lines:

   'title'=>$result['name'].'('.$this->language->get('text_
   totalcost') . ' ' . $this->totalcost->format($totalcost, $this-
   >config->get('config_totalcost_class_id')) . ')',

   Make this change, as we only need the name:

   'title' => $result['name'],

   Weight has different classes, such as kilogram, gram, pound, and so on, but in our total cost purchased, we did not have any class specified so we removed it.

3. Save the file.
4. Go to catalog/language/english/shipping and copy weight.php. Paste it in the same folder and rename it to totalcost.php. Open it, find Weight, and replace it with Total Cost.

With these changes, the module is ready to install. Go to Admin | Extensions | Shipping, and then find Total Cost Based Shipping. Click on Install and grant permission to modify and access to the user. Then, edit to con figure it. In the General tab, change the status to Enabled.

Other tabs are loaded as per the geo zones setting.

The default geo zones for OpenCart are set as UK Shipping and UK VAT.

Now, insert the value for Total Cost versus Rates. If the subtotal reaches 25, then the shipping cost is 10; if it reaches 50, then the shipping cost is 12; and if it reaches 100, then the shipping cost is 15. So, we have inserted 25:10, 50:12, 100:15. If the customer tries to order more than the inserted total cost, then no shipping is activated.

In this way, you can now clone the shipping modules and make changes to the logic as per your requirement.

Database tables for feedback

Let’s begin by creating tables in the database. We all know that OpenCart has multistore abilities, supports multiple languages, and can be displayed in multiple layouts, so when creating a database we should take this into consideration. Four tables are created: feedback, feedback_description, feedback_to_layout, and feedback_to_store. A feedback table is created for saving feedback-related data, and feedback_description is created for storing multiple-language data for the feedback. A feedback_to_layout table is created for saving the association of layout to feedback, and a feedback_to_store table is created for saving the association of store to feedback.

When we install OpenCart, we use oc_ as a database prefix as shown in the following image and query. A database prefix is defined in config.php where mostly you find something such as define(‘DB_PREFIX’, ‘oc_’); , or what you entered when installing OpenCart. We create the oc_feedback table. It saves the status, sort order, date added, and feedback ID. Then we create the oc_feedback_description table, where we will save the feedback writer’s name, feedback given, and language ID, for multiple languages. Then we create the oc_feedback_to_store table to save the store ID and feedback ID and keep the relationship between feedback and whichever store’s feedback is to be shown. Finally, we create the oc_feedback_to_layout table to save the feedback_id and layout_id to show the feedback for the layout you want. This diagram shows the database schema:

Creating the template file for the frontend

Go to catalog/view/theme/default/template and create a feedback folder. Then create a feedback.tpl file and insert this code:

<?php echo $header; ?>
<div class="container">
<ul class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo
$breadcrumb['text']; ?></a></li>
<?php } ?>
</ul>

The preceding code shows the breadcrumbs array. The following code shows the list of feedback:

<div class="row"><?php echo $column_left; ?>
<?php if ($column_left && $column_right) { ?>
<?php $class = 'col-sm-6'; ?>
<?php } elseif ($column_left || $column_right) { ?>
<?php $class = 'col-sm-9'; ?>
<?php } else { ?>
<?php $class = 'col-sm-12'; ?>
<?php } ?>
<div id="content" class="<?php echo $class; ?>">
<?php echo $content_top; ?>
<h1><?php echo $heading_title; ?></h1>
<?php foreach ($feedbacks as $feedback) { ?>
<div class="col-xs-12">
<div class="row">
<h4><?php echo $feedback['author']; ?></h4>
<p><?php echo $feedback['description']; ?></p>
<hr />
</div>
</div>
<?php } ?>

This shows the list of feedback authors and descriptions, as shown in the following screenshot:

To show the pagination in the template file, we have to insert the following lines of code into whichever part we want to show the pagination in:

<div class="row">
<div class="col-sm-6 text-left"><?php echo $pagination; ?></div>
<div class="col-sm-6 text-right"><?php echo $results; ?></div>
</div>

It shows the pagination in the template file, and we mostly show the pagination at the bottom, so paste it at the end of the feedback.tpl file:

<?php if (!$feedbacks) { ?>
<p><?php echo $text_empty; ?></p>
<div class="buttons">
<div class="pull-right"><a href="<?php echo $continue; ?>"
class="btn btn-primary"><?php echo $button_continue; ?></a></div>
</div>
<?php } ?>

If there are no feedbacks, then a message similar to There are no feedbacks to showis shown, as per the language file:

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

In this way, the template file is completed and so is our feedback management. You can create a module and show it as a module as well. To view the list of feedback at the frontend, we have to use a link similar to http://www.example.com/index.php?route=feedback/feedback, and insert the link somewhere in the templates so that visitors will be able to see the feedback list.

Like this, you can extend to show the feedback as a module, and create a form at the frontend from which visitors can submit feedback. You can find these at demo code. Try this first and check out the code if you need any help. We have made the code files as descriptive as possible.

Summary

Using OpenCart themes, you can 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

Resources for Article:

Further resources on this subject:

• OpenCart Themes: Using the jCarousel Plugin [Article]
• Implementing OpenCart Modules [Article]
• OpenCart Themes: Styling Effects of jQuery Plugins [Article]