How to add CSS and JS resource files in nopCommerce

Today, we will go over the process of adding CSS and JS resource files in nopCommerce. Some developers or web designers follow different ways to add resources / references into the web files, each way carry its own advantage and disadvantage.  So, we are not going to go over what is the “correct” way of adding references because this can lead to a never ending debate.

So, we are going to discuss what is the best “recommended” way to add CSS and JS resource files in nopCommerce project.

In order to load your resource files correctly in the view pages, you can use the following helper methods:

- Html.AddScriptParts(): For loading JS files
- Html.AddCssFileParts(): For loading CSS files

If you go to: Nop.Web/Views/Shared/ _Root.Head.cshtml

You can add the resource files like this:

//Load JS file
//Load CSS file

In order to load resource files in your plugin, you can use the same helper methods:
- Html.AddScriptParts()
- Html.AddCssFileParts()

Simply place these with the file path in the into your plugin’s view files like this:

       //Loading js file
       //Third parameter value indicating whether to exclude this script from bundling
       Html.AddScriptParts(ResourceLocation.Foot, "~/Plugins/{PluginName}/Scripts/{JSFileName.js}", true);
       //Loading CSS file
       Html.AddCssFileParts(ResourceLocation.Head, "~/Plugins/{PluginName}/Content/{CSSFileName.Css}");

A copy of this article is also available on Arvixe Blog.

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment