OpenCart Theme and Module Development

4 (1 reviews total)
By Rupak Nepali
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies

About this book

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.

This book embarks on an exciting journey of creating custom themes, pages, and templates in OpenCart.

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.

Publication date:
June 2015
Publisher
Packt
Pages
208
ISBN
9781783987689

 

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

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.

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:

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:

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.

Tip

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.

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.

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.

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:

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.

    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.

  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.

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.

  • 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

    • Erro r

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

 

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.

About the Author

  • Rupak Nepali

    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.

    Browse publications by this author

Latest Reviews

(1 reviews total)
Very helpful to understand a little jumbled OpenCart
Book Title
Unlock this book and the full library for FREE
Start free trial