How to write a nopCommerce plugin - Hello World

Scope

This is an article to discuss and may resolve the "does not implement IController" error. It gives a walk thru on how to write a NopCommerce plugin with the NopCommerce 3.1 framework.

Introduction

If you are new to NopCommerce and about to write a NopCommerce plugin, the likelihood is that you might have read this article already.

If you are then lucky enough to get the infamous "does not implement IController" error, with a bit of google, you would have landed and read this article.



If you are then still having the same error, unable to resolve the problem even followed all the suggested solutions by others like "pad a space to global.asax" etc, then the rest of the article is for you.

Project Setup

In this example, it is a quick walk thru on how to build  a not so simple Hello World widget plugin.

If you read the above how-to article, they suggested you to start a new class library project, but I found copying an existing project will save you from the mysterious "does not implement IController" error.

To begin, I made a copy of the Nop.Plugin.Widgets.NivoSlider plugin that is part of the framework and gave it a new name.

Things that I then need to modify are as follow:-

Project Properties

Change the output path and file name.

Properties\AssemblyInfo.cs

Fairly straight forward. And for the sake of completeness, I generated a new guid and replaced the one I copied (although I am not going to expose the dll to COM)

References folder

The good thing about copying an existing project is I can leave this untouched.

Description.txt

Fairly straight forward.

HelloWorldPlugin.cs

We will return "hello_world" in the GetWidgetZones(). This name will match the widget in the view that use this plugin later on, so the widget will be rendered in the desired place. The rest is pretty self explained from the comments.

HelloWorldSettings.cs

We will have 2 fields, to store greeting and name.

Controller

Following the same naming convention, we will call it WidgetsHelloWorldController.

In the constructor, we only need ISettingService, IStoreContext, IStoreService, IWorkContext.




The 3 main actions in this controller are Configure(), Configure(configurationModel) and PublicInfo(widgetZone).

Configure is for the configuration page in the admin; PublicInfo is the actual rendering of the plugin in the front end.

Fairly similar to the NivoSlider code so I won't go into details.

Models

Similarly,






Make sure the namespace is correct or it will throw runtime error.

Views

The Configure.cshtml view is quite a straight forward exercise of find and replace / code chopping.

The PublicInfo.cshtml view will display the message.

Hello World

We are now nearly there to greet the world.

Admin

Go thru the process and install the plugin, then enable it.



Click on the configure button and depends on your multi-store setup, you might get this.




Values can be stored site-wide or store specific, I will leave the fun parts for you to explore.

Front End

For demonstration purpose, we need to inject this widget / plugin into an view so it can be rendered in the front end. In this example, I picked the cart.cshtml view, you can find this in the Views\ShoppingCart as part of the NopCommerce platform.

We will add a line to indicate where we want the widget to go in the view.




And it should look like this.

Conclusion

The way how plugins are created were not so developer-friendly. It takes a lot of copy and paste works and some of the error messages are not so friendly neither. Nevertheless, it is a nice platform that allow you plug and play different plugins, install / uninstall / enable / disable. The multi-store ability with the plugin greatly helped reduce development times where in some platforms you maybe hacking your way until you can't hack further. I am looking forward to see what NopCommerce will evolve into in the future.