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 fileHtml.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js"); //Load CSS fileHtml.AddCssFileParts("~/CSS/styles.css");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.
