Meditation and Mindfulness for Software / IT Professionals. Conducted by Bipin Joshi in Thane. Read more...

Developing a Shopping Cart - Part 1

Introduction

Many ecommerce web sites require a shopping cart as an essential part. There are many ways to develop these shopping cart. Some of them are - cookie based, session based and database driven. Each technique has advantages and disadvantages of its own. In this series of articles I will explore each technique with code sample and finally present you a generic solution that will work in any of these situations. To begin with this article illustrates developing a cookie based shopping cart.

Using Cookies for state storage

Any shopping cart essentially needs to store product details such as product code, product name, unit price and quantity. You will be presenting a product catalog to the user from which he can select the products. He may also navigate to other parts of the site while he is shopping. You need to maintain his selection across the pages so that finally when he visits shopping cart page you can show collective details there.

Cookies can be used to preserve this state information across the requests. In ASP.NET cookie is represented by a class called HttpCookie. This article does not tell you how to work with cookies. You can learn that here. We will be using multi-value cookies for our example.

Developing a simple product listing page

We will first build a simple web form that lists Products table of Northwind database in a DataGrid.

  1. Create a new web project in VS.NET with C# as the language.
  2. Add a web form called ProductCatalog.aspx to it
  3. Drag and drop a DataGrid control on it.
  4. Write a function called BindGrid() as shown below:
private void BindGrid()
{
SqlDataAdapter da=
new SqlDataAdapter
("select * from products",
@"data source=.\vsdotnet;initial catalog=northwind;user id=sa");
DataSet ds=new DataSet();
da.Fill(ds,"products");
DataGrid1.DataSource=ds;
DataGrid1.DataBind();
}
  1. Call this function in the Page_Load event handler
private void Page_Load(object sender, System.EventArgs e)
{
	if(!Page.IsPostBack)
	{
		BindGrid();
	}
}
  1. Write following code in the SelectedIndexChanged event of the DataGrid.
private void 
DataGrid1_SelectedIndexChanged
(object sender, System.EventArgs e)
{
HttpCookie c=null;
if(HttpContext.Current.Request.Cookies["shoppingcart"]==null)
c=new HttpCookie("shoppingcart");
else
c=HttpContext.Current.Request.Cookies["shoppingcart"];
string itemdetails;
itemdetails=DataGrid1.SelectedItem.Cells[1].Text + 
"|" + DataGrid1.SelectedItem.Cells[2].Text + 
"|" + DataGrid1.SelectedItem.Cells[3].Text;
c.Values[DataGrid1.SelectedItem.Cells[1].Text]=itemdetails;
Response.Cookies.Add(c);
}

Here, we create a cookie called shoppingcart. This cookie further contains subkey-value pairs. Based on user selection we simply add sub keys to this cookie with product id as the key. Then we write that cookie to Response.Cookies collection.

  1. Drag and drop a button control on the web form and write following code in the it's click event handler.
private void Button1_Click
(object sender, System.EventArgs e)
{
Response.Redirect("cart.aspx");
}

Here, we are simply navigating to the cart.aspx page which displays the shopping cart.

Creating the shopping cart web form

  1. Add another web form to the above project called cart.aspx
  2. Create a class called CShoppingCartItem as shown below:
public class CShoppingCartItem
{
private int intProductID;
private string strProductName;
private decimal decUnitPrice;
private int intQuantity;

public int ProductID
{
	get
	{
		return intProductID;
	}
	set
	{
		intProductID=value;
	}
}
public string ProductName
{
	get
	{
		return strProductName;
	}
	set
	{
		strProductName=value;
	}
}
public decimal UnitPrice
{
	get
	{
		return decUnitPrice;
	}
	set
	{
		decUnitPrice=value;
	}
}
public int Quantity
{
	get
	{
		return intQuantity;
	}
	set
	{
		intQuantity=value;
	}
}
}

This class is going to represent one item of the shopping cart.

  1. Drag and drop a DataGrid on the web form.
  2. Create a function called FillCartFromCookies() as shown beow:
private void FillCartFromCookies()
{
HttpCookie c=HttpContext.Current.Request.Cookies["shoppingcart"];
ArrayList items=new ArrayList();

for(int i=0;i<c.Values.Count;i++)
{
string[] vals=c.Values[i].Split('|');
CShoppingCartItem item=new CShoppingCartItem();
item.ProductID=int.Parse(vals[0]);
item.ProductName=vals[1];
item.UnitPrice=decimal.Parse(vals[2]);
item.Quantity=1;
items.Add(item);
}
DataGrid1.DataSource=items;
DataGrid1.DataBind();
Button1_Click(null,null);
}

Here, we are reading the cookies that we set previously and constructing CShoppingCartItem instances based on the selected values. These instances are then added to an ArrayList. Finally, this ArrayList is bound with the DataGrid.

  1. Drag and drop a button called Recalculate and write following code to its click event handler
private void Button1_Click
(object sender, System.EventArgs e)
{
decimal total=0;
try
{
foreach(DataGridItem dgi in DataGrid1.Items)
{
if(dgi.ItemType==ListItemType.Item 
|| dgi.ItemType==ListItemType.AlternatingItem)
{
TextBox t=(TextBox)dgi.Cells[3].Controls[1];
int quantity=int.Parse(t.Text);
decimal unitprice=Decimal.Parse(dgi.Cells[2].Text);
total=total + (unitprice * quantity);
}
}
}
catch
{
}
lblAmt.Text=total.ToString();
}

This code calculates the total amount of the items selected based on the quantity entered and displays it in a label.

  1. Finally, we will write code to delete items from the cart.
private void DataGrid1_DeleteCommand
(object source, 
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
HttpCookie c=HttpContext.Current.Request.Cookies["shoppingcart"];
c.Values.Remove(e.Item.Cells[0].Text);
Response.Cookies.Add(c);
FillCartFromCookies();
}

Code Download

The complete working example is available for download. Please see the link at the top of the article.

Summary

In this article we saw how to use cookies to preserve shopping cart values. This approach is quick and easy to code but has one big disadvantage. Not all browsers will have cookies enabled. Hence, you should use this technique with care. In the next article we will see how to develop similar shopping cart using session variables.

 




Bipin Joshi is a software consultant, an author and a yoga mentor having 21+ years of experience in software development. He conducts online courses in ASP.NET MVC / Core, jQuery, and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced Yoga way of life he also teaches Meditation to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 23 Jan 2005



Tags : ASP.NET Web Forms Server Controls