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 latest version of OpenCart at the time of writing this book is 2.0.1.1, which boasts of a multitude of great features:
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.
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:
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.
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.
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.
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.
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:
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
180and150in the Width and Height fields respectivelyStatus: 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.
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:
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 asroute=account. If you want to show the module in the account section whereroute=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, andcolumn leftas 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:
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.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 withroute=affiliate/in the URL.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.
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 positionColumn 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:
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 ofstylesheet.css. Thestylesheet.cssfile is the customized style sheet used in OpenCart. Thebootstrapfiles are the main CSS files, located atcatalog/view/javascript/bootstrap/css. The Font Awesome toolkit is also used, which is located atcatalog/view/javascript/font-awesome/css. Thestylesheet.cssextends 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'sstylesheetfolder.template: Thetemplatefolder contains multiple folders and each folder contains many template files (.tpl). Each folder is meant for creating a collection of related files. For example, theproductfolder contains all template files related to the products, such ascategory.tpl,product.tpl,compare.tpl,manufacturer_info.tpl,manufacturer_list.tpl,review.tpl,search.tpl, andspecial.tpl. The defaulttemplatefolder contains the following folders and each folder contains related files:AccountAffiliateCheckoutCommonErrorInformationMailModulePaymentProduct
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.
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.
