nopCommerce Tips: Creating a Custom Layout, Part 3 – Plugins, Widgets and Customization, Oh My!
Written by Carole Bennett Sunday, 12 August 2012
Read Part 2 here!
Plugins and widgets are features that have been introduced to nopCommerce in order to provide additional options for display of products and information, and improvement of functionality for your nopCommerce site. Today, we’ll cover the difference between a plugin and a widget, the plugins that are native to nopCommerce, and some free and commercial plugins/widgets that are available for your nopCommerce site.
The basic installation of nopCommerce includes 42 plugins/widgets. These plugins & widgets are methods of providing the basic functionality of nopCommerce in a modular fashion, and allow additional functionality to be incorporated as needed. To see the installed plugins & widgets, go to Administration=>Configuration=>Plugins.
You’ll notice that on the right of each plugin, there’s a column for “Configure” and “Installation”; after your initial nopCommerce setup, you’ll see that there’s an uninstall link for all the plugins, and a “Configure” link for all the plugins that allow for customization, such as tax rate zip codes (for tax calculation).
The best way to think of a widget is to consider it an instance of a plugin. The first step is to install a plugin according to the instructions the writer of your plugin has included, then configure any settings required to customize the plugin to your needs. The plugin may be accessible through the “Widgets” menu, but is more likely to have more functionality displayed under Administration=>Configuration=>Plugins.
In my current project, my favorite plugins are the Nop Ultimate Plugin Collection (commercial) from Nop-Templates, and the MegaMenu plugin (free). Once I installed the plugins, I selected one of the WidgetZones for each of the widgets (plugin instances) to be displayed.
Many of the UI-based plugins come with their own custom skins; for instance, the Nop-Template plugins come with two basic skins to coordinate with the two skins nopCommerce ships with. One of the unexpected aspects of customizing them is discovering that all I had to do is rename the plugin theme folder to the same name as the custom nopCommerce skin – no further configuration required.
jQuery-based plugins often leverage the jQueryUI; in order to customize those plugins, use the jQueryUI ThemeRoller to get customized features like the tabs shown below: