It's been a year now since the release of OpenCart 2.x.x, and now things seem to be stabilized as far the core APIs are concerned. Obviously, most of the popular extensions support the 2.x.x version and are out there along with their 1.5.x version code. You'll also find lots of extensions which allow migration from the existing 1.5.x setup to the latest version. 

Of course, there are certain limitations with these kind of extensions as they can't convert everything, specifically custom modules.

So in this article we'll go ahead and dissect the code snippets of the major components of the OpenCart module. Further, we'll see how you can convert it to be compatible with OpenCart 2.x.x. Without any further theory, I'll straight away dive into the geeky stuff!

Changes in the Controller File

In this section, we'll see the code changes required in the controller file. For the purpose of this example, I've selected the "account.php" controller file under the "catalog/controller/account" directory.

URL Redirection

Let's have a look at the 1.5.x snippet for the redirection. In the older version, the redirect method was part of the abstract Controller class, so you could call that directly using the $this object.

$this->redirect($this->url->link('account/login', '', 'SSL'));

Now, here's what it looks like in the 2.x.x version. In the recent version, the redirect method belongs to the Response class and is thus accessed via that object.

$this->response->redirect($this->url->link('account/login', '', 'SSL'));

Load the Language File

In 1.5.x, you would use the following snippet to load the corresponding module language file.

$this->language->load('account/account');

On the other hand, you need to use a slightly different version in the case of OpenCart 2.x.x, as shown in the following snippet.

$this->load->language('account/account');

Variable Assignment

We could say that it's one of the major changes in the context of the controller method, as most of the time you'll end up assigning your variables so that you can access them in the view template files.

In 1.5.x version, you would do something like this:

$this->data['heading_title'] = $this->language->get('heading_title');

In 2.x.x, the same can be achieved by:

$data['heading_title'] = $this->language->get('heading_title');

As you can see, in the recent version the $data array is prepared exclusively and it's passed as a view argument. In the earlier version, it was a properly of the abstract Controller class.

Breadcrumb

In the recent version, you don't need to provide a "separator" as an array key as opposed to the earlier version.

Here's the snippet from the 1.5.x version:

$this->data['breadcrumbs'][] = array(
  'text'      => $this->language->get('text_home'),
  'href'      => $this->url->link('common/home'),
  'separator' => false
);

A similar result can be achieved by using the following code:

$data['breadcrumbs'][] = array(
  'text' => $this->language->get('text_home'),
  'href' => $this->url->link('common/home')
);

Children Template Assignment

In 1.5.x, you needed to provide an array to assign all the children templates like header, footer, column_left, etc.

$this->children = array(
  'common/column_left',
  'common/column_right',
  'common/content_top',
  'common/content_bottom',
  'common/footer',
  'common/header'        
);

In the case of the 2.x.x version, you'll use the controller method of the Loader class.

$data['column_left'] = $this->load->controller('common/column_left');
$data['column_right'] = $this->load->controller('common/column_right');
$data['content_top'] = $this->load->controller('common/content_top');
$data['content_bottom'] = $this->load->controller('common/content_bottom');
$data['footer'] = $this->load->controller('common/footer');
$data['header'] = $this->load->controller('common/header');

Template Assignment

In the earlier version of OpenCart, you would have used the following code to assign the template file and render it.

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/account/account.tpl')) {
  $this->template = $this->config->get('config_template') . '/template/account/account.tpl';
} else {
  $this->template = 'default/template/account/account.tpl';
}
$this->response->setOutput($this->render());

In the recent version, you'll need to use a slightly different and shorter way to handle it.

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/account/account.tpl')) {
  $this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/account/account.tpl', $data));
} else {
  $this->response->setOutput($this->load->view('default/template/account/account.tpl', $data));
}

As you can see, in the recent version we're using the view method of the Loader class.

So, that's it as far as the controller-related changes are concerned. Using the checklist above, you should be able to convert the controller code from the older to newer version easily.

Changes in the Model File

Although model files are almost identical in both versions, there's a new feature called "Event Notifications" introduced in the recent version of OpenCart. It's a nice concept which allows you to trigger certain events and thus inform the corresponding observers if available.

Using the "Event Notifications" feature, you could allow data modification by the other modules which implement the observers for the related events before saving to the database. Let's take an example snippet from the "catalog/model/account/address.php" file.

$this->event->trigger('pre.customer.add.address', $data);

It'll trigger an event before the address of the customer is added or updated. It'll allow other modules to alter the address data before it's saved to database. So basically, that's the only major change as far as the model is concerned. Having said that, you could also trigger the events from other components of the module.

Changes in the View File

In the final section of this tutorial, we'll discuss the changes in the view component of the module. One of the major changes is the introduction of the "Bootstrap" library, thus making the template responsive. Of course, your old templates will work in the recent version too, but won't be responsive. OpenCart 2.x.x is mobile first, so you can't ignore the responsiveness of your template.

I would like you to explore "catalog/view/theme/default/template/account/account.tpl", in which you'll see CSS class names like "col-sm-6" and "col-sm-9", which indicate the presence of the bootstrap library. So basically, as bootstrap is in the core itself, you would like to utilize most of the features provided by it.

So in the case of the view files, you need to convert the old XHTML code to the new responsive structure. Apart from that, it's the same way variables are printed and other children templates included.

So, that's it as far as today's article is concerned. I am sure that the steps which are mentioned above will help you to convert your modules from the 1.5.x to 2.x.x version.

Conclusion

Today, we discussed exactly what changes you need to make in your existing 1.5.x based OpenCart modules to convert them to be 2.x.x compatible. I hope that you've enjoyed it, and feel free to post your thoughts on the topic!

An OpenCart Theme

If you'd like to take your learning to the next level, see what it's like to see it in action, and practically apply what you've learned in this tutorial, then check out the MediaCenter Responsive OpenCart Template.