nopCommerce Tutorials, Tips & Tricks

There has been numerous questions posted on nopCommerce forums and StackOverflow about how to make nopCommerce plugins' Views text-editeable as CSHTML files. This is because the most widely known method of displaying Views in nopCommerce is to mark the .CSHTML files as Embedded Resource, which essentially makes the Views behave like binary files (such as DLLs), which in turn makes the Views uneditable in text editors. In fact, you can't even find the CSHTML files on the compiled plugins folder!

For example, the figure below is how a compiled nopCommerce plugin looks like. You notice that there's no .CSHTML that you can edit. Why is this a bad thing? Because if you are developing an nopCommerce plugin for your clients, that means there is no easy way they can edit how the plugin renders on their shop.

How can we go about solving this limitation? Read on to learn!

There's a post in nopCommerce forums that asks about how can one have a log in box at the home page. Through a series of replies, I've successfully helped the poster solve her problem with some easy customizations. But it seems like some other forumers are still not clear about how to achieve this, so I am writing this blog post to detail the exact steps in achieving this. After this, you'll be able to place the login box in just about any pages while still keeping the same box in the login page. Here's a screenshot of the box added to the home page.

Ready to go? Fire up your Visual Studio and start following! (Note: I am using nopCommerce 2.80 as an example, but it should be generally applicable to other 2.XX versions of nopCommerce)

I believe many of you nopCommerce pro users and developers are aware that nopCommerce 2.70 and 2.80 have employed a cleaner URL compared to the previous versions. From URLs that are suffixed with '.aspx' in versions 1.XX; to extentionless but rather verbous URLs in versions 2.65 and below, we have seen a lot of changes in the URL structure in nopCommerce. However, none of them are as mysterious as the URLs in 2.70 and 2.80. Why? Because nopCommerce seems to know the magic to convert from any arbitrary texts to integer IDs.

For example, the link for my NopLite - nopCommerce Responsive Theme is http://www.pronopcommerce.com/noplite-nopcommerce-responsive-theme. You don't see ANY integer in the URL, but nopCommerce somehow knows how to map from the URL to the appropriate ID. On the other hand, the nopCommerce 2.65 URL for my NopLite theme would have been: http://www.pronopcommerce.com/p/7/noplite-nopcommerce-responsive-theme. Note the '7' somewhere in between the URL, that's the Integer Product ID.

So the question is, how does nopCommerce 2.70 and 2.80 know the ID without looking the ID?

As a world-class shopping cart, nopCommerce has a very flexible MVC-based theming system. nopCommerce themes are made up of a collection of Cascading Style Sheets (CSS), JavaScripts (JS), images and other resources. Creating a basic theme in nopCommerce is nothing more than supplying your own CSS to change the color, width, height, and other basic user interface (UI) display elements.

If you haven’t done that already, please download a copy of nopCommerce source code package from its CodePlex project page (this posts is explained using nopCommerce 2.80, but the general principles should apply to other nopCommerce 2.XX versions). Extract the files to a desired folder and open NopCommerce.sln in Visual Studio. In the Solution Explorer in Visual Studio, you can see that a complete, beautiful default theme – Default Clean – has already been created for you (the original theme prior to nopCommerce 2.80 is Dark Orange).

As we can see from the image, a theme named DefaultClean is included under the Themes folder. Now, Rebuild the whole solution, Start the website (CTRL + F5) in Visual Studio and you’ll see a beautiful default theme of nopCommerce. Your entire e-commerce website is built in less than 10 minutes. Pretty cool huh!

Hi there! Welcome to Pro nopCommerce!

This website is created to be a collection of resources of nopCommerce. It is designed to host tutorials, Q&A's and discussions about nopCommerce themes, plugins and development tips! 

So who am I? I am Lam Woon Cherk (call me "Woon Cherk"), an ASP.Net developer from Malaysia who has created countless nopCommerce themes, plugins and other types of customizations for countless e-commerce websites! Ok, "countless" doesn't really mean countless, it means a reasonably large number! So this blog will be the place where I share my experience designing, developing, customizing, deploying and destroying nopCommerce online stores! This website also runs on nopCommerce, cool huh!

I am also honoured to be awarded the nop mvp status by nopCommerce's founder - Andrei Mazoulnitsyn. For me to be an nopCommerce MVP means that I must be super active in the official nopCommerce forums! In other words, I've probably answered your questions in the forums before, and I am happy to see you here! 

Please feel free to navigate around this website. You'll probably noticed that it's super empty now! I'll spare my time to slowly build up the content so bear with me at the moment! If you have any question about nopCommerce or you wish certain topics explained/covered, please do not hesitate to contact me using the Contact page! Last but not least, add me on my LinkedIn or Twitter profile!