What's new in NopCommerce 4.0 - ASP.NET Core 2.0

What's new in NopCommerce 4.0 - ASP.NET Core 2.0

We have been working with nopCommerce since version 1.60 and have seen the product evolve through almost 30 releases in a total of 7 years. So you might think that a new release of nopCommerce is not something that will get us jumping up and down. Well, this is not exactly so. Especially when we have a major release of our favorite e-commerce system and especially when this release marks an important milestone for the platform.

NopCommerce 4.0 has just been released and with it comes not only a multitude of improvements and new features but also the most important move to ASP.NET Core 2.0.

In this article, I am going to describe the new features in nopCommerce 4.0 and most notably the migration to ASP.NET Core 2.0 and what it means for the platform. So without further ado let’s dive into the details.

Migration to ASP.NET Core 2.0

NopCommerce 4.0 now runs on ASP.NET Core as compared to the previous 3.90 version, which runs on ASP.NET 4.6.  ASP.NET Core was originally named ASP.NET 5. But only increasing the major version from 4 to 5 would have meant that ASP.NET 5 is bigger, better and simply a continuation of the previous version. In reality, it is not exactly so.

ASP.NET Core is actually a complete re-write from the ground up, but much lighter and more modular than its predecessor. So what has changed in this flagship version of the framework? Well, it would be a much shorter list if we were to write what has not changed. But it would also be a much more boring one. So here are the main new features of ASP.NET Core and what makes it such a huge step forward for .NET:

  • Open source - ASP.NET core is a community-driven framework and its source code can be found on Github.
  • Cross-platform - ASP.NET Core can run on Windows, Linux, Mac, regardless.
  • Side-by-side - You can choose to deploy the CoreCLR with your application, which means that you do not have to have. NET Core installed on the host machine.
  • Grunt and Gulp - Being cross-platform entails no reliance on Windows technologies. Therefore ASP.NET Core integrates with Node.js for example, which can run Grunt or Gulp pre and post-build tasks.
  • Modular - ASP.NET Core ships as a set of nuget packages which includes the .NET Core runtime. Because of the modularity of the framework upgrading to a new version will only require upgrading the nuget packages.
  • Tag Helpers - ASP.NET Core comes with a new feature supported by its Razor engine - the Tag Helpers. Now you are probably thinking that this sounds similar to HTML Helpers and wondering how they are different. Let’s remind ourselves how HTML helpers looks like:

    HTML helper

    Essentially you have a server-side C# method accepting a lambda expression as the only parameter. All this adds unnecessary complexity and noise to the otherwise HTML-like nature of the code. Experienced ASP developers would often compare this to the “spaghetti code” they used in their ASP scripts in the late 90s and early 2000s. Looking at an HTML helper it is difficult to guess what the returned HTML will be.

    Fortunately, now we have the Tag Helpers, which use only HTML tags while still executing code written in C# on the server. Let’s see how the previous HTML Helpers can be rewritten with Tag Helpers:

    Tag Helpers
  • View Components - child actions and partial views are gone in ASP.NET Core. Instead, we have the view components which are much more powerful an leaner than partial views. Unlike partial views View Components:
    1. Do not have a dependency on a controller
    2. Are not reachable via an HTTP request.
    3. Do not pass through the full MVC request pipeline and render only a chunk rather than a whole response.
    4. Have no model binding because the parameters are not coming from the HTTP request but are rather passed when the view component is invoked. This allows for overloads of the invocation method.
    5. Do not support action filters. Action filters when overused can cause real headaches so their absence here is more than welcomed.
    6. Allow dependency injection and can perform complex business logic.
    7. Follow the same separation of concerns as controller actions which makes them unit testablе.
    In short, view components are a lighter and much more powerful way of creating reusable rendering logic.

These are the most notable features of the new framework but it is important to know that nopCommerce is not making use of probably the most important one. NopCommerce 4.0 is still not cross-platform. When your application runs on ASP.NET Core it can target either the .NET Core framework or the previous .NET 4.6.1 framework. NopCommerce 4.0 runs on .NET 4.6.1 because at the time of its release Entity Framework Core (EF Core) did not support all the ORM features from the previous EF 6.0 version and most importantly it did not support lazy loading. EF Core 2.0 has already been released and it does support lazy loading among other new features and improvements. So you can soon expect the new nopCommerce 4.10 version, which is going to be based on .NET Core 2.1 and support EF Core.

Moving to .NET Core is a huge step forward for nopCommerce. Being able to run on any operating system will bring a whole new landscape of opportunities for the system and will certainly be instrumental in its development going forward. But we will have to wait for this in version 4.20.

So while the nopCommerce team is working hard to bring us the next two very important versions of the platform, let’s look at a few additional great features in 4.0.

Enabled "Force SSL for all site pages" by default

An important change in nopCommerce 4.0 is that the “Force SSL for all site pages” setting now comes enabled by default.

In previous versions this setting was not enabled by default and https was forced only for certain pages like the login, register, check out. Other pages could be accessed not only through https but also through HTTP despite the fact that the whole website was secured by an SSL.

Mozilla Firefox and Google Chrome have recently implemented the Strict Secure Cookies policy. This means that cookies marked with the Secure attribute and transported via https cannot be read by a non-secure connection.

Let me try to explain the problem in the context of nopCommerce. You have your store secured by SSL but you have not forced it for all pages, which means that https is forced for only your login, register and checkout pages. Let’s imagine that a customer visits your nopCommerce store and goes through either the registration or login process. Because your store is protected by SSL these pages will be served via https and all authentication cookies that they write will be marked as Secure. If next the customer opens a page in your store via HTTP, let’s imagine that they load a bookmarked URL from your store or enter it directly in the browser, the request for the page will not be able to read the secure authentication cookies and the customer session will essentially be lost resulting in a dodgy user experience.

Google analytics plugin - reverse an e-commerce transaction and process only paid orders

In nopCommerce 4.0 when an order is canceled the Google Analytics plugin will send a reversed e-commerce transaction, effectively setting the amount of the original transaction to 0. This means that now your canceled orders will not result in inaccurate results in Google Analytics. Please note that reversing a transaction does not remove it. Both the original transaction and the reversed one are included in the reports in Google Analytics. You can see the transactions report if you log in to your GA account and go to Conversions -> Ecommerce -> Sales Performance.

The Google Analytics plugin in nopCommerce 4.0 improves on its reporting capabilities even further. Now it records a transaction only when the order is paid. Previously, the plugin sent the transaction data as soon as the order was placed. A client might place an order but never pay for it resulting in inaccurate and inflated revenue in Google Analytics.

Added a setting indicating whether to use canonical URLs with query string parameters

This is quite an esoteric new feature so let me start with a little bit of a background.

When paging through or applying filter criteria to a category, manufacturer, products by tag, etc. page, nopCommerce reloads the page with the paging or filter information added in the query string of the page url, essentially loading a different URL.

Different URLs mean different pages and thus different content to search engines. But in this case, the content can be quite similar. For example, if a customer visits a category page in your store and then filters by price, the chance is that at least some of the products and content will remain the same. Search engines will see this and consider it duplicate content which will hurt the SEO of your category page.

Canonical URLs aim to solve this problem by telling search engines that no matter what paging or filter criteria is applied to the page, they are viewing one and the same page. For example, if on my clothes category I have the canonical tag:

<link rel="canonical" href="http://www.themes.pavilion.nop-templates.com/clothes" />

and Google visits:

http://www.themes.pavilion.nop-templates.com/clothes?specs=1,2

and then visits:

http://www.themes.pavilion.nop-templates.com/clothes?specs=3,4

It will know that they are essentially looking at the main clothes category page.

Canonical URLs can be enabled for various nopCommerce pages which use paging and filtering. You can do so by checking the “Enable canonical URLs” option on the Settings -> General Settings-> SEO page.

In nopCommerce 4.0 you can have the query string (in our example “?specs=1,2”) included in the canonical URL. This means that:

http://www.themes.pavilion.nop-templates.com/clothes?specs=1,2

will have the following canonical URL:

<link rel="canonical" href="http://www.themes.pavilion.nop-templates.com/clothes?specs=1,2" />

and

http://www.themes.pavilion.nop-templates.com/clothes?specs=3,4

will have the following canonical URL:

<link rel="canonical" href="http://www.themes.pavilion.nop-templates.com/clothes?specs=3,4" />

If you go down this path, we would advise that you be absolutely sure that your filtered pages contain different content. Otherwise, your store SEO can be affected significantly.

But you might be wondering why have canonical URLs at all in this case. The answer is because the applied specification IDs in the “specs” filter can be in different order “specs=1,2” or “specs=2,1”. So you want to make sure that these two pages:

http://www.themes.pavilion.nop-templates.com/clothes?specs=1,2

http://www.themes.pavilion.nop-templates.com/clothes?specs=2,1

have the same canonical tag:

<link rel="canonical" href="http://www.themes.pavilion.nop-templates.com/clothes?specs=1,2" />

You can achieve this by going to the nopCommerce administration -> Settings -> All settings search for “”querystringincanonicalurlsenabled” and set it to True.

Plugins and Themes can be uploaded directly through the administration

NopCommerce 4.0 rolls out with a new easy way for store owners to upload plugins and themes to their stores. Plugins and themes .zip packages can now be directly uploaded through the administration. NopCommerce reads the theme or plugin information from the uploadedItems.json file, which each plugin or theme should include in their .zip package file. That uploadedItems.json file contains a list of the items included in the package, their type, version, system name, and directory path.

When such a package is uploaded through the administration, nopCommerce will delete the old version of the package if there is one, restart the application and load the new package.

Gone are the days when store administrators had to FTP to their server and upload and install manually a nopCommerce theme and plugin. In nopCommerce 4.0 this process is easier than ever, saving time and effort for the store owners and allowing developers to distribute their plugins and themes in a much more streamlined fashion.

Dynamical update the order total when checkout attributes are selected (shopping cart page).

Your store customers will surely appreciate the next feature. In nopCommerce 4.0 the order total on the shopping cart page is updated automatically when the client selects a checkout attribute. For example, if a customer adds a piece of jewelry to their shopping cart and checks the gift wrapping option, the order total will be automatically updated and will show the price of the jewelry plus the price for the wrapping.

Order total updated when checkout attributes are selected

Zip/postal code is a required field to estimate shipping

'Zip/postal code' is now a required field on the shopping cart page, which allows more accurate shipping cost estimation. Also, the country list has been updated and previously missing countries have been added.

Postal Code required

Admin area improvements – managing product attributes

In previous nopCommerce versions, a store owner could manage product attributes directly in the product grid which was a clumsy and complicated user experience. Now a store owner can manage the product attributes on a separate page.

Manage product attributes on a separate page

Override tax display type (excl/incl tax) based on customer role

In nopCommerce 4.0 a store owner can override the tax display type based on the customer role. For example, if you are selling both to clients and businesses, you will most probably add your business clients to a separate customer role, let’s say B2B. And you might need to exclude the tax from the product prices when these business customers are browsing your website. In nopCommerce 4.0 you can do this. What you need to do is go to your admin area and then edit the B2B role. On the administration page for the role, you will see a new “Override default tax display type” checkbox, which you need to check and then select the “Excluding tax” option from the “Default tax display type” drop-down.

Override tax based on customer role

Admin area - product details page improvements 

In nopCommerce 4.0 “visibly individually” option is available only for “simple” products. In previous nopCommerce versions, you had to make sure that this option is unchecked if you are creating a grouped product. 

Visibly individually option available for simple products

Log an entry in the Activity Log when the System Log is cleared

Now, store owners can find out if and when someone clears the store System Log. In nopCommerce 4.0 an entry is created in the Activity Log every time the System Log is cleared.

System Log cleared - entry in Activity Log

"Accept terms of use" for vendors

Rarely an online marketplace will approve vendors unless they have explicitly signed and agreed to specific terms and conditions. Therefore in nopCommerce 4.0 store owners can now create “terms of service” and require all vendors applying for a vendor account to accept them.

Terms of Use for Vendors

Administrators (in impersonation mode) can buy products marked as “call for price”.

In nopCommerce 4.0 if a product is marked as "call for price", a store owner or a sales representative can now buy the product on behalf of a client. This option comes handy when a store owner tries to close a deal via phone or secure chat. For this feature to be available the store owner needs to go to Configuration > Settings > Order Settings and enable “Allow admins to buy Call for price products”.

Call for Price in Impersonated mode

With this last feature we are going to wrap up our digetst of the new nopCommerce 4.0 release. As with every release nopCommerce is boosted with useful new features and improvements. But unlike most releases, version 4.0 marks a turning point for the platform, which is the migration to ASP.NET Core.

We hope that this article has been useful to you. If you have questions, comments, suggestions for other nopCommerce 4.0 features which you would like us to elaborate on, do let us know in the comments.