nopAccelerate

Faster, scalable and reliable nopCommerce.

nopCommerce

How to add CSS and JS resource files into nopCommerce Plugin Views

If you are a nopCommerce developer you will definitely come across a situation where you need to add a custom resource files like CSS and JS to your nopCommerce plugin’s view files.

For most developers working on the nopCommerce for the first time, the simplest way to add such files is to directly add their references into plugin’s view files. However, this is highly not recommended. For your nopCommerce plugin to work correctly, you need to ensure that you’re using the standard way to add your resources.

If you already know, nopCommerce do a bundling of the JS and CSS files on the fly for performance optimization. However, if you’re using a direct link to resource files, it won’t include your JS and CSS files during bundling. Moreover, there may be chances of other issues as well.

So here are the simple steps for you to add your custom resource files into your nopCommerce plugin’s view files.

Before you begin, you should have a well organized plugin folder structure. For CSS you can use Content folder, and for storing your JS files, you may use Script folder. Here is the screen shot from one of the existing plugin of nopCommerce.

nopcommerce plugin folder structure

Screenshot of nopCommerce Plugin Folder – Displaying how to organize your CSS and JS files

Move your CSS and JS files into appropriate folder. It is not compulsory to follow this folder structure, but if you’re using standard structure then it becomes easier for your and others working on it in future, and you don’t need to remember where you stored it.

Now, to load resource files correctly you need to add its references into your plugin’s view files.

You can use Html.AddScriptParts() or Html.AddCssFileParts() helper methods.

  • Html.AddCssFileParts() method has two parameters first is optional and second is required.
  • Html.AddScriptParts() method has three parameters first and third is optional and second is required.

You can check into more details about this methods by going to its definition in your nopCommerce projects.

Coming to the point, here is how you can add resources into your Plugin’s view file.

@{
     //Loading CSS file
     Html.AddCssFileParts(ResourceLocation.Head, "~/Plugins/{PluginName}/Content/{CSSFileName.Css}");

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

 

If you want to add resource link in the header then you can use ResourceLocation.Head and for footer you can use ResourceLocation.Foot. Note that you need to give correct plugin name and resource file name in above, and then it will work.

If you have any question, make sure to post your issue at nopCommerce forum. And if you’re looking for professional nopCommerce development company, make sure to checkout the amazing nopCommerce services we offer.

Thank you nopCommerce team for special recognition!

September 1st, 2014 has been a special day for all of our team member here at Xcellence-IT and nopAccelerate, as our CEO, Mr.Krunal Jariwala, has been recognised and awarded by nopCommerce as nopCommerce MVP (Most Valued Professional) for his contribution to the nopCommerce community. Check the snapshot here.

nopCommerce is a popular open source e-commerce solution built on the top of latest ASP.Net MVC with MS SQL as database backend. It has all the features that any modern e-commerce site will need.

 

nopCommerce is among the top 5 featured apps (only e-commerce app featured on top 5) on Microsoft Web Matrix, downloaded more than 368,000 times from there and witnessed more than 1,107,340 source code downloads from Codeplex.

 

If you’re new to nopCommerce, make sure to checkout nopCommerce Review article!

We, at Xcellence-IT, have been working with nopCommerce since September 2011 and since then worked on numbers of nopCommerce projects some of them are huge success. Since 2013, we have created a separate business unit focusing on the nopCommerce plugin, themes and custom development. And as a result, we have launched nopAccelerate.

nopAccelerate is an enterprise grade plugin for nopCommerce which integrates Apache Solr with nopCommerce, enabling you to offer enhanced catalog navigation and advanced search features and at the same time makes it very easy to scale your store to support millions of products and visitors without slowing down your store front-end. This helps improve overall usability of the store directly improving the conversion rates and profitability of the store.

It has been really great to be a part of nopCommerce community for all of us. We’ll continue contributing to the success of nopCommerce and its users helping them build their online stores using nopCommerce.

With this joyous moments, we want to share special thanks to nopCommerce community – specially to the incredible nopCommerce team who build and maintain nopCommerce solutions in a true open source spirit for their great effort in building nopCommerce, nopCommerce community and to all our customers, friends and family without the help of them, this wouldn’t be possible!

We are now offering high quality and affordable nopCommerce development services to our customers worldwide under the name of nopAccelerate. Moreover, we’re getting ready to start offering free and premium themes for nopCommerce very soon.

And we’ll have some more exciting news soon for all of you. Stay tuned!

nopCommerce 3.40 Release Review

As you may already know nopCommerce 3.40 is already released. There are numbers of good changes we’ve seen being made into this release. The highlighted features of the release are:

  • Performance Optimization
  • Full support for in-store pickup
  • Dropping of jQuery Mobile Version Support

You can read the full Release Notes here!

We must recommend that this is the one release that you must upgrade because of the huge improvement in the performance.

The performance has improved a lot! Really Lot!!

Apart from the new features and bug fixes, the incredible nopCommerce team has worked really hard to improve a nopCommerce performance. There are numbers of nice changes that has improved the performance, which resulted into faster nopCommerce, out of the box!

These changes has arrived at the right time, where we have already witnessed a couple of e-commerce sites with huge catalog base in nopCommerce. We’re sure there are more online retailers going to use nopCommerce now after this round of performance improvement.

So, now you can easily build a scalable e-commerce store that is

  • Easy to use,
  • Easy to extend and customize,
  • Has all the important features that any e-commerce store would need,
  • Faster, out of the box
  • Easy to scale to enterprise grade performance using nopAccelerate Solr Plugins to support millions of products and visitors

These make the nopCommerce, the perfect platform for enterprise grade e-commerce.

nopAccelerate is the premium nopCommerce plugin that brings enterprise grade performance, advanced search and navigation features to the nopCommerce by integrating Apache Solr with nopCommerce.

 

 

nopAccelerate powers many of the largest sites built on the nopCommerce with over millions of products and visitors.

The whole nopAccelerate team is very excited to work with latest nopCommerce version to help its clients build even more faster, reliable and scalable enterprise e-commerce store and at the same time work on more advanced and useful features that help improve the usability, product visibility and conversion using its plugins.

How to setup nopCommerce Multi-Store on Shared Hosting Environment

Multi-store is the most awaited feature for nopCommerce using which you can host multiple e-commerce store front-end using single nopCommerce installation. Here is a detailed guide/tutorial which covers the step-by-step guide on How to setup and configure multiple e-commerce stores using nopCommerce multi-store features. (more…)

nopCommerce 3.00 CDN Plugin Released with Multi-Store Support

We are happy to announce the availability of our popular free nopCommerce CDN Plugin with support for recently released nopCommerce 3.00. The nopAccelerate CDN Plugin is upgraded to support Multiple Stores. (more…)

Fill in form

and we will contact you

How can we help ?

Schedule a quick call, 15-minute meeting with one of our experts:

Thank You !

Our consultant will contact you in 24 hours.

Delivering generous mobile apps for Entrepreneurs, Startups & Businesses


Have a look at nopAccelerate Demo Store with 80,000+ products with nopAccelerate Solr and CDN Plugin.

download-trial Start Trial