jump to navigation

How to close common nopCommerce Gaps for .NET e-commerce providers December 6, 2012

Posted by fofo in asp.net, ASP.NET 4.0, ASP.Net MVC.
Tags: , ,

For those of you, who do not know nopCommerce, let me first say that it is probably the best .NET e-commerce system out there with a comprehensive set of features and extensible architecture. .NET developers interested in e-commerce will certainly be more than happy to learn that nopCommerce is developed using .NET 4.5, EF 5 and MVC 4.

NopCommerce should certainly be in the toolbox of every .NET web company but as feature-rich and as extensible as it might be, you cannot offer the system to clients as it is, at least not with the default Dark Orange theme. But this is a normal part of the open source model and that is why every such system has a network of third party vendors to fill the gaps in the free software.

NopCommerce has quite a lot of customization partners and a few product vendors. But one particular set of products stand out from the rest.

In this blog post and the posts to follow I will try to show you how you can use the nopCommerce themes and extensions from Nop-Templates.com to build a solution for your e-commerce clients in literary minutes.

Looking at the default nopCommerce installation , http://demo.nopcommerce.com/,the first thing that I would like to have on my e-shop and probably the first thing that my e-commerce client will ask me for is how to put banners on the web site.  As a .NET web developer you have two options. Go out and find a sliding JQuery script, write some MVC code to integrate the JQuery script in wherever is appropriate in nopCommerce, and hard code some sliding images. This solution while possible will certainly require time researching and developing the code. If you are not familiar with nopCommerce you will have to factor in the learning curve too.

Fortunately we have the Nop Anywhere Sliders from Nop-Templates which will not only do all this but will also offer you a set of features, which will empower your nopCommerce with the possibility to put sliding images on any page and on as many pages as you need.

As a nopCommerce savvy user I have found working with the Nop Anywhere Sliders quite easy and intuitive. First of all you need to install the plugin via the nopCommerce administration:installPlugins

It is important that the SevenSpikes.Core plugin is installed before the Nop Anywhere Sliders.

Once you have the Nop Anywhere Sliders installed you can go to the administration of the plugin by clicking on the Plugins -> Nop  Anywhere Sliders -> Manage Sliders:


A slider according to the Nop-Templates terminology is a set of images and settings, which are setup to slide in one place. You can define as many of these sliders as you need and add them to any part of your web site. For example you can define a slider called HomePageMainSlider:


Make sure that the slider dimensions are the same as the dimensions of your images. Most of the Slider Settings are self-explanatory and have a tooltip. If you need clarification on some of them you can visit the documentation page of the plugin which is also accessible via the Plugins -> Nop Anywhere Sliders -> Help Menu:


Once you have configured your slider you can add some images to it by going to the Pictures tab:


For every image you can set the following settings:


When you have you slider and images set up, what is left to do is to add it to your web site. You have several ways of doing this. The easiest way is add it via the predefined widget zones:


If we add the slider to the home_page_slider_top widget zone, it will appear on our home page just below the main menu. You have more than 20 predefined widget zones by default which should be plenty to position your sliders wherever you need on your nopCommerce web site. However if you do not find an appropriate widget zone you can manually integrate the slider. To do this you need to add the following line of razor code on the page where you want you slider to appear:

@Html.Action(“Slider”, “AnywhereSliders”, new { systemName = “HomePageMainSlider”})

Alternatively you can define your own widget zones and add them to the plugin so that you can use them for your sliders. For more information on this you can read the documentation:


One of the coolest features that the Nop Anywhere Sliders is the ability to map sliders to categories:


This is an important functionality for cases where you need a different slider for every category. The category page is the same for every category. It pulls the data for the category dynamically based on the id or name specified in the query string. Therefore you need this mapping so that the plugin knows when a specific category is being loaded which slider to add to the page. The category mapping is also supported by the manual integration of the plugin. If you are to add a slider manually to your category page you need to use the following line of Razor code:

@Html.Action(“CategorySlider”,”AnywhereSliders”, new { categoryId = Model.Id })

The category mapping of the plugin is quite a nifty feature, which can save you tons of coding and integration if you are to implement this from scratch.

I have covered the basics of working with the Nop Anywhere Sliders and I hope you will find this useful. The plugin is quite powerful and flexible and just does the job that it is supposed to do with very little effort required from the nopCommerce store owner or developer.

For more information do visit the product page:



How to use cookies in ASP.Net applications October 6, 2010

Posted by fofo in asp.net, VB 2005, VB 2008, Visual Studio 2005, Visual Studio 2008, Visual Studio 2010.

In this post we are going to see a step by step example on how to read,write,delete cookies in asp.net websites.

Cookies are small pieces of text that you can associate with a website which are transfered down to the user’s computer when the user visits the website.

You can use any of the versions of Visual studio (VS 2005,VS2008,VS2010 express editions work fine).

I will use VS 2010 Ultimate edition and VB.net as the .Net language of choice.

Before we begin it is very important to note some of the limitations of cookies. They store relatively small amount of information about 4kbytes.

Browsers limit the number of cookies associated with a website ( 20 cookies for a certain website ). There is also a limit on how many cookies a browser can handle regarding all websites and that is about 300.

All the data in cookies is stored as text so bear that in mind that you should not store sensitive information in a cookie. You should use the information in the cookie to identify a user, a user’s last visit e.t.c

1) Create an Asp.net web site and name it as you want.

2) Let’s add a cookie in the cookies collection. In the Page_Load event handling routine of the default.aspx page type

Response.Cookies("LastVisit").Value = DateTime.Now.ToString()
Response.Cookies("LastVisit").Expires = DateTime.Now.AddDays(10)

3)  We add a new cookie now that it will be stored in the user’s computer and we set it to expire after 10 days.So if someone visits our website today and then it visits it after 12 days, the browser will delete the cookie

from the users hard disk.Comment out the two line of code in the Page_Load event handling routine.We can use an alternative way to create a cookie and write information on it.

Dim mycookie As HttpCookie = New HttpCookie("LastVisit")
mycookie.Value = DateTime.Now.ToString()
mycookie.Expires = DateTime.Now.AddDays(10)

4)  You can store multiple values in the same cookie with the help of subkeys. Comment out the 4 lines of code above. Type the following lines of code in the Page_Load routine

Response.Cookies("mydata")("LastVisit") = DateTime.Now.ToString()
Response.Cookies("mydata")("username") = "fofo"
Response.Cookies("mydata").Expires = DateTime.Now.AddDays(10)

5) Comment out the line above. We will write the same statement as above with a different syntax.Type the following lines of code in the Page_Load routine

 Dim mycookie As HttpCookie = New HttpCookie("mydata")
mycookie.Values("LastVisit") = DateTime.Now.ToString()
mycookie.Values("username") = "fofo"
mycookie.Expires = DateTime.Now.AddDays(10)

6) Another thing we can do with the cookies is to specify the scope of the cookie. For example we might want to have a cookie stored on the user’s computer only

if the user visits a specific folder-page e.g Marketing. So if someone visits http://www.mysite.com the cookie is not visible, but if he visits http://www.mysite.com/marketing and all pages within that folder the cookie is visible.

In order to achieve that we use the Path property to restrict the cookie to a particular path to a website.Comment out the lines above and type the following

Dim mycookie As HttpCookie = New HttpCookie("mydata")

        mycookie.Values("LastVisit") = DateTime.Now.ToString()
        mycookie.Values("username") = "fofo"
        mycookie.Expires = DateTime.Now.AddDays(10)
        mycookie.Path = "/Marketing"

7) Another property we can use is the Domain property. So in the previous example we can comment out the

mycookie.Path = “/Marketing”

and type

mycookie.Domain = "help.mysite.com"

This cookie will only be sent back to the server is the page is associated with the domain “help.mysite.com”

8) In order to read cookies sent through the user’s browser back to the server we do the following.

First you need to add a label web server control to your default.aspx page. Then in the Page_Load event handling routine type

If Not Request.Cookies("LastVisit") Is Nothing Then 

Label1.Text = Server.HtmlEncode(Request.Cookies("LastVisit").Value)
End If

9) Run you application and you will see that you successfully set a cookie and read it back from the user’s computer.

10) If you want to modify the cookie’s value and expiration date you can type something like

Response.Cookies("LastVisit").Value = DateTime.Now.ToString()
Response.Cookies("LastVisit").Expires = DateTime.Now.AddDays(30)

The code above will reset the value of “LastVisit” to the actual current time and set a new expiration date for the cookie

11) If you want to delete a cookie from the user’s computer you can type the following

 Response.Cookies("LastVisit").Expires = DateTime.Now.AddDays(-1)

Then the browser will delete the cookie from the user’s  computer.

If you need the source code just email me.

Hope it helps!!!

Caching an ASP.Net page October 6, 2010

Posted by fofo in asp.net, VB 2005, VB 2008, VB 9.0, Visual Basic 10.0, Visual Studio 2005, Visual Studio 2008, Visual Studio 2010, VS 2010.
1 comment so far

The issue of “caching” keeps coming up in my asp.net seminars so I though it would be a good idea to write a post. I know it is a well documented feature and widely used but I really believe most people will be able to use this rather simple example and understand the concepts behind caching.

You can use any of the versions of Visual studio (VS 2005,VS2008,VS2010 express editions work fine).

I will use VS 2010 Ultimate edition and VB.net as the .Net language of choice.

1) Create an Asp.net web site and name it as you want.

2) In the default.aspx page add a new paragraph or header with content of your choice.In my case i have added something like this

<h2>Caching is really useful!!!!</h2>

3) Let’s think simple at first. We do want to cache the entire page (default.aspx)

Just below the Page directive ( top of the page ) you add the following bit of code:

<%@ OutputCache Duration="20" VaryByParam="none" %>

We do cache the page for 20 seconds. That is determined by the Duration Attribute.

4) Save your work and run your application. The first time we see the output of the asp.net page, this is served directly from the asp.net engine.

If you hit refresh for a period for less than 20 seconds the page is served from the Cache.

5) Let’s see a more complex scenario involving query strings and how we can make a decision on whether to cache the page or not based on the value of the query string. Add a new label control to the .aspx page

 <asp:Label ID="mylabel" runat="server"></asp:Label>

In the Page_Load event handler routine add the code

If (Not Request("id") Is Nothing) Then 
mylabel.Text = " The query string value is " + Request("id").ToString()

End If

6) Change the OutputCache directive to

 <%@ OutputCache Duration="20" VaryByParam="id" %>

7) Run your application and type in the url address bar http://localhost:6141/caching/Default.aspx?id=5. See the results. If you hit refresh right away the page is refreshed from the cache and it is not reloaded.

If you type this http://localhost:6141/caching/Default.aspx?id=6 ( within the 20 seconds period ) it senses that the id has changed now and it re-renders the page. It also sets a new caching period of 20 seconds.

8) What is really interesting to bear in mind ( and not many people know ) is that you can have different caching settings depending on the client’s browser.The first step is to change the OutputCache directive to this

<%@ OutputCache Duration="20" VaryByParam="id" VaryByCustom="browser" %>

9) Basically we say “Continue to cache the page as long as the clients use the same browser”. So if you have 3 people in a row that have IE8 hitting your page, will all get the same cached version of the page.

If someone hits our page with Firefox or Chrome, they will a brand new rendered page. At this time it will be created a 20 seconds cache window period specific for each browser.This functionality is built into the caching module, and will insert separate cached versions of the page for each browser name and major version.

10) Now if we need to apply the caching techniques we just learnt in all pages of our asp.net application we will have to make a few modifications in the web.config file.We will add something that is called “Cache Profiles”

Just below the <system.web> add this snippet

          <add name="basic" 




So we have created a new profile that is called “basic”. Now let’s apply this cache profile to one or more pages in our website.

So we switch back to our default.aspx page and in the OutputCache directive, type

 <%@ OutputCache CacheProfile="basic" %>

Run your application again and you will see that we do have the same caching effects.

Obviously you can create different cache profiles and apply them to various pages.

I will have more posts on caching shortly.

Hope it helps!!!

Caching an asp.net page depending on the user’s browser language October 6, 2010

Posted by fofo in asp.net, VB 2005, VB 2008, Visual Studio 2008, Visual Studio 2010.
Tags: ,
add a comment

This is my second post regarding caching in asp.net applications.

A friend of mine asked me if he can control caching of an asp.net page depending on the user’s language browser.

Let’s see how we can accomplish that with a step by step example.

You can use any of the versions of Visual studio (VS 2005,VS2008,VS2010 express editions work fine).

I will use VS 2010 Ultimate edition and VB.net as the .Net language of choice.

We will identify the language of the user’s browser from the HTTP headers.

More specifically we will look at the Accept-Language header item.

1) Create an Asp.net web site and name it as you want.Add a label web server control to your default.aspx page.

2) In the default.aspx just below the Page directive ( top of the page ) you add the following bit of code:

<%@ OutputCache Duration="50" VaryByHeader="Accept-Language"

We want to use VaryByHeader and assign it to the header item Accept-Language that we want to vary caching by.

So now this page is going to be cached based on the language of the user’s browser.

3) Now switch back to the code behind and in the Page_Load event handling routine type the following

If Not (Request.Headers("Accept-Language")) Is Nothing Then 
mylabel.Text = "language of the user is " +
End If

4) Run your application and see the result-your browser’s language. In most cases it will be something like “en-us“, or anything else that the HTML page will output. So if now we have 20 people

hitting our page – within the 50 seconds cache period – and all of them have “en-us” as their browser’s language they are going to get the cached version of the page. The page will not be re-rendered through the whole

page events-lifecycle.

5) If we have people hitting our page with a browser with a different language (.eg fr,es ) the Asp.Net would cache a second version of the page in french. So now we would have 2 cached versions of the page, one in english and one in french.So the first french person (browser language) to hit the page, he would see the page rendered to him ( the whole page lifecycle will run ) and at the same time it will be cached so subsequent requests from french people-users-browsers will be served from the cache.

If you need the code, just email me.

Hope it helps !!!

Linq to Objects in ASP.Net October 6, 2010

Posted by fofo in asp.net, C#, LINQ, Visual Studio 2008, Visual Studio 2010.
1 comment so far

In this post I would like to talk about  Linq to Objects in an ASP.Net application.

In all my classes people seem to have the following answer to this question, “What kind of data can we query with LINQ?

Most people say “Well, we can query an SQL server database” . I am not very pleased when people forget the other flavors.

LINQ to Objects allow us to write “queries” over collections of objects.This is the first and most basic flavor of LINQ. LINQ to Objects enables you to perform
complex query operations against any enumerable object. By that I mean any object that implements the IEnumerable interface.

I will use Visual Studio 2010 Ultimate edition.You can use VS 2010/VS2008 Professional edition.

VS 2010/VS2008 Epxress editions will be fine for this example. I am using C# for this one.

1) Fire VS and create a new asp.net website with a name of your choice. Choose local filesystem as the location of your website files.

2)  Add a GridView web server control to the Default.aspx page.

3) Add a Class file in your website ( Add – > New item ) . I am going to have data related to football so i named it Football.cs

4) Inside the public class Football type

        public string FootballTeamName { get; set; }
        public string Manager { get; set; }
        public string TeamCaptain { get; set; }
        public int ChampionshipsWon { get; set; }

5) Now that we have a class to work with, we should create a simple generic List of the Football objects and then bind that list to the Gridview control.

6) This is the code for the generic list of the Football objects. We place this code in the Default.aspx page.

public List<Football> GetFootballData()
return new List<Football> {
new Football { FootballTeamName="Liverpool", Manager="Roy Hodgson", 
TeamCaptain="Steven Gerrard",ChampionshipsWon=18  },
new Football { FootballTeamName="ManUtd", Manager="Alex Ferguson", 
TeamCaptain="Rio Ferdinand", ChampionshipsWon=18},
new Football { FootballTeamName="Chelsea", Manager="Carlos Ancelotti", 
TeamCaptain="Frank Lampard",ChampionshipsWon=4 },
new Football { FootballTeamName="Everton", Manager="David Moyes", 
TeamCaptain="Phil Neville",ChampionshipsWon=9 }

7) Now we add the code in the Page_Load() event handling routine. We just type

 var football = GetFootballData();
 this.GridView1.DataSource = football;

8) Run your application and see the results in the web browser.

9) Imagine we want to filter our data. Let’s write the query first in a non-LINQ way.

Comment out the code in the Page_Load event handling routine.We want to query the data where the Manager is “Roy Hodgson”.

In the Page_Load event handling routine type

 var football = GetFootballData();
var query = new List<Football>();
foreach (var f in football)
if (f.Manager == "Roy Hodgson" ) query.Add(f);
this.GridView1.DataSource = query;

10) Run your application and see the in the browser the record that satisfies the criteria.

11) If we want to have more complex queries (grouping or sorting ) then the code becomes a bit hard to follow and maintain.

12) Now we will write a number of queries the “LINQ” way. We do not have to worry anymore on exactly how a query is going to be executed.

We just need to define what the query should return. The compiler must come up with a way and determine how the query will be executed.

13) Comment out the code inside the Page_Load event handling routine and type this code

        var football = GetFootballData();
        var query = from f in football
                    select f;
        this.GridView1.DataSource = query;

14) Run your application and see the results. We use the GetFootballData() method to obtain the generic list collection.Then we use the simplest LINQ query to select all the Football objects from the generic collection.

We do have new language keywords like select and from.

15) Now let’s say that we want only the Manager and FootballTeamName values. Comment out the code inside the Page_Load event handling routine and type this code

           var football = GetFootballData();
           var query = from f in football
                       select new { f.FootballTeamName, f.Manager };
           this.GridView1.DataSource = query;

Run your application and see the results.What we did here is called Projection and contains the Manager and FootballTeamName values for all the objects.

16) If we want to have some ordering(get the values back according to the object Manager descending) of the data we just re-write the code above

        var football = GetFootballData();
        var query = from f in football
                    orderby f.Manager descending
                    select new { f.FootballTeamName, f.Manager };
        this.GridView1.DataSource = query;

Run your application and see the results.

17) We do have query filters in LINQ. We can use the where clause.If we want to find how many teams won more than 10 championships we should type ( after commenting out all our code in the Page_Load )

        var football = GetFootballData();
        var query = from f in football
                    where f.ChampionshipsWon > 10
                    select f;
        this.GridView1.DataSource = query;

Run your application and see the results.

18) If we want to get only the Manager name and the team captain name for the last 2 records we should type (after commenting out all our code in the Page_Load)

        var football = GetFootballData();
        var query = (from f in football
        select new { f.Manager, f.TeamCaptain }).Reverse().Take(2);
        this.GridView1.DataSource = query;

Run your application and see the results. We use the Reverse() method that inverts the order of the elements in a sequence.

We also use the Take() method to return a specified number of elements from the start of a sequence.

This post can be very useful to people that begin to learn LINQ.Email me if you want the source code.

Hope it helps!!!