Advertisement
  1. Code
  2. OpenCart
Code

A Glance at the New OpenCart 2.0

by
Difficulty:BeginnerLength:ShortLanguages:

For a while now, OpenCart has been a popular e­-commerce framework for small to medium level online stores. Recently with the release of the 2.0 major version, it has reached a new milestone. In this tutorial, we'll go through some of the exciting new features incorporated in the latest version.

Built-in Responsive Design

Responsive design has become a must have feature for any framework in recent times. The latest version of OpenCart is no exception. It looks exceptionally good and embraces the differences between various devices. The result is that you'll see a consistent and user friendly front­-end interface across various devices like mobile, tablets and desktops.

Let's have a quick look at how it looks like in the mobile display.

Mobile Front-End

And believe me, it's not just the front­-end—the back­-end section looks just as beautiful!

Mobile Back-End

OCMOD ­Modification System

If you've worked with the earlier version of OpenCart, you have probably come across the buzzword "vQmod". If you are not familiar with that, it allows you to alter the core files of OpenCart using the XML file based modification system.

In the newer version of OpenCart, a similar system "OCMOD" is available, which is based upon the "vQmod" system itself. As "OCMOD" is integrated in the core of OpenCart itself, there's no more separate installation of the "vQmod" module required.

Bootstrap Library Integration

Although we've already mentioned that the latest version of the OpenCart is fully responsive, it's worth noting that Bootstrap 3 is now integrated into the core itself, which is a huge boost for front­-end developers.

Font Awesome Support

If you're a front­-end developer, you are likely to be aware of the "Font Awesome" toolkit. As per the official site, it provides 479+ icons at the moment!

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

It's also integrated as a part of the core in OpenCart 2.0, which enriches the look and feel of the front­-end.

UI Improvements to the Admin Interface

The admin section interface is completely replaced with a stunning new responsive interface. The navigation is more intuitive and pleasant. Also, the interface for the catalog and product management has been improved, and the filtering UI is improved.

UI Improvements in the Back-End

Extension Installation Made Easy

A ­built-in "Extension Installer" is a really powerful add­-on in the latest version of OpenCart. It eliminates the hassle of manual uploading of files to the server using FTP or something similar. Apart from this, it has made the process of installation far easier, specifically for newbies or back­-end editors who don't feel very comfortable with the manual extension installation process.

Extension Installer

Event Observer Pattern Integration

"Events (script notifications)" is the killer feature of OpenCart 2.0, which really improves the extensibility of the OpenCart core framework. If it looks like an alien feature to you, let me tell you it's one of the most powerful patterns followed in the world of object oriented programming called the "Event Observer Pattern".

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems.

In the core of the OpenCart framework, there are numerous events available to which you can listen. As an example, lets say whenever an order is placed in your store you would like to submit the order-related information to the third party reporting tool. In that case you could register your module with the post.order.add event. So every time a new order is placed, it'll call a certain piece of code in your module where you can use the order object to do the necessary stuff.

Dashboard Notifications

Dashboard Notifications

As an editor or back-­end admin, you would like to have hands-on statistics of your front-end store. In the new version, a notification section is visible once you're logged into the back-­end of the OpenCart. It highlights the quick and useful summarized statistics of the store. 

As an example, you'll see pending approvals for customers, affiliates and orders. It also provides figures regarding out of stock products and the status of sales orders.

Addition of Payment Gateways

Although the earlier version of OpenCart provided more than 20 payment methods in the core itself, the recent version adds a few more payment processors to the kitty. Here's the list of new payment methods available in OpenCart 2.0.

  • Secure Trading Payment Pages
  • Secure Trading Web Service
  • First Data EMEA Connect (3DSecure enabled)
  • First Data EMEA Web Service API
  • Realex Redirect
  • Realex Remote
  • BluePay Hosted Form
  • BluePay Redirect (Requires SSL)

Custom Fields

Custom Fields

Ever wanted to add more input fields to the default registration form of the OpenCart front-end to collect more customer-specific information? The "Custom Fields" feature is now available in the core of the newer version itself. It'll help you to add new custom fields to the user registration and profile pages.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.