From Beginner to Advanced in OpenCart: More Module Development

Welcome back to the OpenCart developer series. In our previous article on module development, we built our first “Hello World Module” by using MVC (Model-View-Controller) with respect to the dashboard. 

In this article, we’re going to build a module for the front-end. I’d recommend that you review my previous article if you haven’t read it yet. Many developers are afraid of developing modules for OpenCart, as they first search for available modules in the market, but it’s actually very easy to develop functionality on your own.

As you know, we have built a simple module that takes one input from the back-end and saves it to the database.

OpenCart admin page
  1. Put some dummy content in the “Hello World Code” field.
  2. Set the layout, position, status and its sorting order as per the following screenshot.
Module configuration options

To understand what the layouts are, you can read my article on OpenCart configuration.

  1. Navigate to catalog/controller/module and create a new PHP file.
  2. Name the file helloworld.php.
  3. Open the file in your favorite IDE and use the OpenCart Class Naming Convention, i.e. class ControllerModuleHelloworld extends Controller {} .
  4. Make an OpenCart default function inside the class, i.e. public function index() {} . (For reference, please read this article.)
  5. Inside the default index() function, write the code given below:

And we are done creating our controller.

Note that it’s important to read the comments after every line of code above to understand what work is being done.

  1. Navigate to your store default template folder; in my case it is: catalog/view/theme/default/template/module.
  2. Create a new template file.
  3. Name it helloworld.tpl
  4. You can write your own HTML to display the content of your module. The way I wrote the HTML is as follows:
  1. Create a helloworld.php language file inside your catalog/language/(language)/module
  2. Add some language data inside your language file, in my case: 

If your site is multilingual, place the language file in all of your languages.

Basically, our module works simply because it takes a single input from the dashboard and displays it on the store’s front-end. In this regard, we’ve added some dummy data from the back-end Hello World Module and set the layouts and positioning where the module should be displayed. In our case, those layouts are Contact and Account and their positions are at Column Left and Column Rightrespectively.

The work for writing a module for our store front-end is done. But never assume that it works without actually testing the code.

  1. You can either go to the Contact Us page from the bottom of the store’s front-end or by hitting the http://localhost/OpencartStore/index.php?route=information/contact URL. 
  2. There our module should be in its defined position as per the following screenshot.
Module shown on the front-end

Wonderful! The module appears in the right position and in the right layout. This means that all of your work is fine. You can also check whether your module appears in the Accounts Layout or not. If you’ve followed the right steps, then it should also appear there.

At this point, you’ve done the most significant work in the OpenCart development series. As I mentioned in the introduction of this article, developing modules for OpenCart is easy enough for beginners to pick it up and get started.

In upcoming tutorials, we’ll be focusing on API Integration with OpenCart and some theme development. I hope that you are enjoying our articles—a lot of fun stuff is coming on the way!

If you like my articles, do provide your feedback using the feed below



發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *