From Beginner to Advanced in OpenCart: Module Development

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.

OpenCart has its own Extension Market where a large number of extensions are already available. Or you can check out the wide range of OpenCart modules and extensions on Envato Market.

OpenCart modules and extensions on Envato Market
OpenCart modules and extensions on Envato Market

If you need a particular task completed in OpenCart and are struggling to do it yourself, try ordering one of the great value custom OpenCart development services on Envato Studio.

OpenCart developers on Envato Studio
OpenCart development on Envato Studio

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. Create an Controller to Admin Path: admin/controller/module/helloworld.php .
  2. Create a Language File to Admin Path: admin/language/english/module/helloworld.php .
  3. Create a View to Admin Path: admin/view/template/module/helloworld.tpl .

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 1: The Default Function 

Step 2: Validation Method

As we tried to validate data on save in default function. So here comes the validation method.

Now save the file and you're done with the Admin Controller of our Hello World Module!

3. View File

As previously done in controller, you have to create some HTML for the view. For that, we'll do the following:

Step 1: Build Some Basic Controls

A form is an element that will contain elements like an text input element, a textarea, and buttons for saving or canceling input.

To create a form like this, review the code below:

Step 2: Adding a Table List

Under the form, a table list will appear where we can settle the module position and the page where the module to be displayed.

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

The last thing, we need to add a child footer in the end of the view:

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!

Tags:

Comments

Related Articles