4elements, web design and consultancy

In the previous articles, we examined the MVC architecture and created our first controller, model, and view in the OpenCart application. We did this in order to help gain a better understanding of the core application.

To take things a step further, we're going to look at creating a custom module for OpenCart.

What Are OpenCart Modules?

OpenCart modules are analogous to add-ons, plugins, or extensions in other content management systems. It's through modules that OpenCart gives us the ability to extend its functionality without having to edit the application's files.

As with many other content management systems, it's generally considered to be a best practice to extend functionality of the core application through the provided APIs and OpenCart is no different. Modules allow us to introduce, remove, or modify functionality of the core application that's done in a compartmentalized and maintainable way.

Additionally, OpenCart has its own Extension Market where a large number of extensions are already available.

Our First Module

In order to get acclimated with OpenCart's module system, we can write the obligatory "Hello World" module. This will take input from the dashboard and display it on the front-end of the site.

Note that OpenCart has a number of pre-build modules. As such, we'll try to leverage those when possible when working on our own. To get started, perform the following:

1. The Language File

As discussed in our previous articles, the language file contains the static text what should be displayed in our view file. For the helloworld.php language file, the following variables contain the possible text fields what we require to display in our module:

1. The Controller

Open the "Hello World" controller file that we just created and add the class class ControllerModuleHelloworld extends Controller {} following the Class Naming Convention. Next, place the following code inside the class.

Step 3: Adding Some JavaScript

As you can see in the previous step, there is an "Add Module" button. Specifically, we have: <a onclick="addModule();" class="button"><?php echo $button_add_module; ?></a> where user can add multiple rows to display the output of the module in different layouts on different positions.

For that, we need to write some JavaScript that will append a row to the table list. This will improve the user interface for those using our module:

Step 4: Adding a Footer

At this point, we're done preparing our first Hello World module. At this point, it's time to check whether our module is working or not.

To do that, login to dashboard and go to the Extensions > Modules page where you'll see a list of modules of OpenCart System. There will also be "Hello World" listed with an "Uninstalled" State, click on "Install" and try editing the module and you'll see a screen something like this:

You can input some random value and try saving it, Now try editing the module again and you'll see you input entered as default.

Conclusion

In this article, we tried to build a basic OpenCart Module using MVC. It's easy to manipulate OpenCart Modules if you're familiar with the core concepts of MVC. This article gives just a basic idea how to develop a simple module following some simple steps.

In our next article, we're going to work with the frontend and will try to extend it for a store frontend. Please provide us with your feedback in the comments below!