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
    Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");

    //Load CSS file
    Html.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}");
    }

Hope it helps!

 Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!