NopCommerce Posts

Professional NopCommerce Training Released!

Hey there, I’m excited to announce that I have released a professional NopCommerce training course today through Pluralsight!  Pluralsight is one of the largest online training companies in the world and offers tons of great development courses. I have published Introduction to NopCommerce Plugin Development, which you can find here.  This is a greatly extended and enhanced version of the free training I released a few months ago.  The course provides almost 3.5 hours of video training, through both conceptual slides and code demos.  You will learn how to build an advanced plugin from start to finish and explore topics the other training does not cover.

This course covers the following topics:

  • Overview of the NopCommerce platform, architecture, and plugin system
  • Data Access and Infrastructure
  • Configuring, setting up and installing a plugin
  • Building Admin Interface pages
  • Working in depth with Kendo UI
  • Building front end widgets
  • Polishing the user experience through form validation, localization, and more
  • An entire module devoted to miscellaneous but important NopCommerce development tasks

Overriding NopCommerce Admin Views and Partial Views

Overriding NopCommerce Admin Views is often a topic of confusion for Nop developers, but the task seems more difficult than it really is.  If you haven’t read my other blog post, Overriding and Adding Views in a NopCommerce Plugin,  I recommend you do before reading this.  The other reading isn’t required to understand this post, particularly if you’re adept at MVC, but it provides some additional insights.  This post is meant to be a comprehensive overview of Overriding Admin views – I will try to strike a balance between conceptual and coding examples.

So anyway, the easiest way to override a NopCommerce Admin View is to create a Custom View Engine that extends the Razor View Engine to search your plugin.  For full Views (meaning not partial views) you also need to override the corresponding Admin route and Controller Action if you want to alter logic.  This process is really no different than overriding other NopCommerce views in Nop.Web, but the Admin routes are a bit trickier because they use MVC areas.  Remember, MVC areas are like large sections of an MVC application that can contain their own controllers, views and routes.  They are a way of easily seperating major portions of your application, such as an admin area and a user facing area (as is the case with Nop).

Remember, a View Engine is responsible for finding and rendering our views.  By default the NopCommerce View Engine (ThemableRazorViewEngine) does not know it needs to search our plugin for views.  We have to create a View Engine that is aware of our plugin and proritizes it in its search locations.

Fixing Broken NopCommerce Razor Intellisense

I’ve been working with NopCommerce plugins for a while now, and for a long time I never really used Razor (at least not its intellisense).  Don’t get me wrong, I think Razor is awesome and I use it when I can, but by default Razor intellisense simply doesn’t work in NopCommerce plugin projects.  I saw a lot of people out there with the same problem and decided to get to the bottom of it.  After all, it’s a huge productivity barrier to not have full Razor support in larger projects.

It turns out this isn’t really a NopCommerce issue, but rather a Visual Studio issue.  It simply surfaces in Nop projects because of the choice to make plugins class libraries and not MVC projects or Areas.  Outside of NopCommerce I’ve never actually ran into a situation where i wanted to use Razor in a non MVC project, at first I thought it was a NopCommerce architecture issue.  However, the real problem is simply that Razor intellisense is not supported in class library projects.

There is a fairly easy way to fix this, though it feels a bit hacky.  I have seen various instructions out there for how to fix this issue – none of them worked for me so I pieced together these steps.  Here is what you do:

Advanced NopCommerce Plugin Tutorial – Data Access, Services, Kendo UI and more!

Hey there,

I recently completed a fairly extensive NopCommerce plugin tutorial.  I created this with the goal of providing a complete training series – one that takes you through the process of building a Nop plugin from start to finish and shows all the code.   The plugin is also something you can use on your own stores and is something of value rather than just a “Hello World!” test. The video series is fairly long so I have divided it into four logical sections.  Below you will find a summary of each and the associated video embedded.  The full source code is also available below.

 Download Source Code

Part 1 – An overview of the plugin, setting up our project, and getting started with data access

In this first video I will provide a demo of the completed plugin so you have an idea of what we will be building.  From there we will download NopCommerce and install it, and then create our initial plugin project in the Visual Studio solution.  We will properly configure this plugin so we have a solid base going forward.  We will then move on to some of our data access classes and set up some of the default wiring most meaningful Nop plugins require.

Trial Tracker – Empowering your NopCommerce Trial Downloads

Overview

Notice: This plugin is currently unavailable while I finish migrating the site to a new platform and updating the plugin to work with newer versions of NopCommerce.  Please check back soon!  Fill out the contact form if you would like to be directly notified.

Supported Platforms:  NopCommerce 3.3, NopCommerce 3.4

Trial Tracker is a plugin that allows you to require customers to provide a name and email before they can download any trial products.  This can be used by you for conversion optimization, analytics, mailing list generation, product trials, and other purposes.  Trial Tracker replaces one of the standard NopCommerce interfaces – after the plugin is installed, when users click on the “Download Trial” button they are first presented with a pop up to fill in their information rather than directly receiving the download.  After they submit correctly formatted information, the pop up returns their download link.

NopCommerce Plugin Localization for Validation Errors and Properties

NopCommerce features strong support for Localization, and at some point you’ll want to add this feature into your plugins. Localization allows for all of the user facing text in your plugin to be content manageable – meaning it can either be edited to say something else or translated into another language through the Admin area.  NopCommerce localization is actually pretty easy and straight forward once you know how to set things up.

I recently released a plugin you can download here that assists you with tracking trial downloads.  This plugin features pretty strong localization support so I’ll be using code samples from it in this tutorial.

The trick with localization is to turn all user facing text into String Resources, which are basically small pieces of text that can be managed through the NopCommerce admin area.  Creating string resources couldn’t be easier. Inside your main plugin class you can simply create and delete new string resources inside of the Install and Uninstall methods.  These methods are defined in the BasePlugin class that your own plugin class should inherit from.

Let’s define a few string methods that we will use for the display names of our Model properties as well as the validation errors.

Here is an example of the install method:

Understanding How Routing Works in NopCommerce Plugins

A Sample NopCommerce Route

Note: Basic working knowledge of MVC routing is assumed for this article – this is not a tutorial on what routing is or how it works, but rather a light analysis of how NopCommerce plugin routing is architected

Routing can sometimes be a challenging or confusing topic in .NET development.  There are a lot of pieces that fit together to make things work right, especially with MVC.  When working with a huge platform like NopCommerce, this is especially true due to the need for extensibility.  NopCommerce allows developers to write their own plugins and integrate them into the NopCommerce routing system.  Adding routes into your Plugin can be confusing, so let’s take a look at how this all works.  Below I have pasted a sample route from the NopCommerce plugin tutorial.

routes.MapRoute("Plugin.Payments.PayPalStandard.PDTHandler",
     "Plugins/PaymentPayPalStandard/PDTHandler",
     new { controller = "PaymentPayPalStandard", action = "PDTHandler" },
     new[] { "Nop.Plugin.Payments.PayPalStandard.Controllers" }
);

This is a pretty standard MVC (and NopCommerce) route.  MapRoute is a shorthand method that returns a new Route object that implements the default MVC Route Handler.  If we quickly analyze the parameters in order we can see there is nothing special going on here:

Overriding and Adding Views With a NopCommerce Plugin

While recently working on a NopCommerce project I needed to override a few different views from a theme and the Nop core. I was also looking for a way to include new views without having them be compiled into the plugin DLL, meaning they are actual files on the file system that get served up in the usual MVC fashion.

I quickly came across this blog post.  It provides an overview of different ways to include views in a plugin, so thank you to Woon Cherk Lam.  The section labeled The Advanced Method – “Custom View Engine” is what we are going to expand on here.  Basically it shows you how to use a custom view engine to serve up view files and avoid compiling them into the DLL.  This is a great concept but it did not solve my specific problem.  The code in Woon’s blog post doesn’t prioritize the plugin’s views in all situations – sometimes you will want to be greedy and make sure your plugin’s views always take priority.  This is what we will look at here.

Basically, the problem (in my situation) involved one line of code from Woon’s article:

System.Web.Mvc.ViewEngines.Engines.Add(new CustomViewEngine());

The issue with this line of code is that the “Add” method appends the custom view engine to the end of the ViewEngines list, meaning it gets evaluated after the other view engines.  ASP.NET comes with two view engines out of the box – razor and the legacy aspx engine.  If either of these engines finds a view before your custom engine, those will be given priority.  Since neither of these view engines search your plugin directories, they will never find your views first.  Woon’s article shows how your custom view engine will have your plugin added as a search location, but if it is the last to search, some of your views will still never be found.

Side Note: Why doesn’t razor find views in your plugins? NopCommerce plugins are created as additional projects of the Class Library type. By default the razor view engine won’t search these types of new projects.  Razor will only search projects added as MVC Areas.

The fix for this is simple – just change the line of code above to:

System.Web.Mvc.ViewEngines.Engines.Insert(0, new CustomViewEngine());

The insert method allows you to prioritize your custom view engine by explicitly adding it at the front of the list. This is of great significance, because it means all of NopCommerce will search your plugin’s views directories first every time it looks for a view.

This idea of a custom view engine that always gives your plugin priority when searching for views is a big deal in Nop.  Woon does a good job explaining some of the benefits of this, but I want to expand and reiterate a few points on why this is valuable.

It allows you to override partial views without overriding the parent view.

This is a big deal.  In MVC, partial views are fairly static razor files that get included into a parent view.  Unlike Html.Action, Html.Partial does not hit a controller action in order to serve up a view.  This creates a problem in Nop because there is no controller method or route to override.  In order to override a partial view in Nop, you must first override the entire parent, and then change the call to the partial inside of that parent.  For example, if you want to override the download button view that exists on a product details page, you have to override the entire product template that references it.  However, with this custom view engine you need only drop your new version of the download button into the views directory of your plugin and you’re good to go.

It allows you to avoid overriding routes and mimicking folder structures.

With the custom view engine, you don’t need to override a controller method or route.  View Engines do their work after a controller method is executed. If you just want to change which view gets served up in the response and not the logic behind it, you can simply create a new view with the same name and drop it into your plugin.  

It allows you to output views as files on the file system rather than compiling them into the DLL.  

Woon covers this in his post, but I want to reiterate what a great bonus this is, especially if you are doing product development and want to allow customers to edit the HTML and CSS for a view themselves.  It also allows you to release multiple versions of the same view, such as different versions for different themes.

It allows you to not have to use fully qualified view names (no namespaces required).

This one is fairly self explanatory if you’ve read Woon’s article.  You can once again refer to all views in your plugins by their actual name, meaning your controller action methods don’t need to specify fully qualified namespaces, etc.

I have not run into any issues using the custom view engine, as long as you follow the steps Woon provides. In fact, I find this solution more stable because you don’t need to interfere with routing and controller actions as often, which results in cleaner and lighter code. Remember to include the web.config in your views folder!  This whole process makes working with views in Nop a lot easier.  It is not uncommon to create a custom view engine in MVC for very specific tasks, so I don’t consider this a hack, especially since all logic and code is contained within the plugin.

P.S. Thanks again Woon!

Free NopCommerce Slider Plugin! Check out Mega Slider, my latest pet project.

Notice: This plugin is currently unavailable while I finish migrating the site to a new platform and updating the plugin to work with newer versions of NopCommerce.  Please check back soon!  Fill out the contact form if you would like to be directly notified.

My first NopCommerce product – Mega Slider – has been released!  This was a fun product to create and I spent a lot of time on it.  It basically allows you to create content/image sliders for your NopCommerce site and place them almost anywhere you want.  I will probably be creating a tutorial soon to provide a general idea of how to build something like this.  I learned a lot from this project, particularly how to manage image uploads and the new Kendo UI in NopCommerce 3.3. The plugin includes a number of great features and customizeable settings, including:

  • Transition Time
  • Slider Cycling
  • Pause on Hover
  • Two User Control Modes (“Classic” and Panel)
  • Active Color Setting
  • Captions (Title and Description)
  • Custom Display Order
  • Assign to any zone (only supports default NopCommerce zones)
  • Full Localization Support
  • Ajax Admin functionality
  • Responsive Design

Enabling Advanced Search By Default in Nopcommerce

Search functionality is an essential component of any Ecommerce site.  NopCommerce ships with a variety of search features, though the out of the box functionality might not always be what you want.  By default, NopCommerce only searches product titles for the keywords a user entered into the search bar.  For many clients and customers, this is too basic.

Luckily NopCommerce also comes with a handful of advanced search features.  Users can either click on a link to go to an advanced search page, or Nop will suggest advanced search after they have already ran a query.  However, some of the advanced search functionality seems as though it should be enabled by default, such as the ability to search product descriptions and tags.

Through the NopCommerce admin area you can enable full text search as long as you have full text search installed and configured on your database.   However, this still only applies to advanced search.  What if we want to have the default searchbox widget always search in product descriptions and tags without the user having to worry about advanced search?

The solution is actually pretty simple, assuming you’re at least somewhat familiar with NopCommerce development.