Download Source
In previous post we show you how to create add to cart using session. In this article you will learn how to create add to cart using cookies.
accept all the details from user before add to cart in not necessary.
Create Table Product
HTML Homepage
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="assets/css/styles.css" rel="stylesheet" />
<link href="assets/css/button.css" rel="stylesheet" />
<style>
#tbl1 {
border: 3px #fff solid;
padding: 10px;
margin: 5px;
min-height: 300px;
min-width: 230px;
box-shadow: 3px 5px 15px #b6b6b6;
}
#tbl1:hover {
border: #ffd926 3px solid;
padding: 10px;
margin: 5px;
min-height: 300px;
min-width: 230px;
box-shadow: 3px 5px 15px #b6b6b6;
}
#output {
float: right;
border: groove;
width: 315px;
margin: 11px;
box-shadow: 3px 5px 15px #b6b6b6;
}
</style>
</head>
<body style="background-color: #F7F5EE">
<form id="form1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div style="float: right; margin-right: 50px;">
<input type="submit" runat="server" id="btncart" value="View Cart" class="shiny-button" onserverclick="btncart_ServerClick" />
<asp:Label ID="lblcount" runat="server" Font-Size="Large"></asp:Label>
</div>
<table>
<tr>
<td>
<img id="img2" runat="server" width="300" src="~/image/shoplogo.png" /></td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div style="float: left; margin-left: 150px;">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<br />
<asp:DataList ID="Datalist1" runat="server" RepeatDirection="Horizontal" RepeatColumns="4" OnItemCommand="Datalist1_ItemCommand">
<ItemTemplate>
<table id="tbl1" style="background-color: white">
<tr style="height: 10%;">
<td style="text-align: center;" colspan="2"><b>
<asp:Label ID="lblname" Font-Size="22px" runat="server" Text='<%#Eval("ProductName") %>'></asp:Label></b><hr />
</td>
</tr>
<tr>
<td colspan="2" style="height: 80%;">
<img id="img1" class="img1" runat="server" src='<%#Eval("ProductImage") %>' /></td>
<td></td>
</tr>
<tr style="height: 10%;">
<td>Rs:<asp:Label ID="lblprice" runat="server" Text='<%#Eval("Amount") %>'></asp:Label></td>
<td>
<input type="hidden" id="hiddenid" value='<%# DataBinder.Eval(Container.DataItem, "ProductID") %>' runat="server" />
<input type="hidden" id="hiddenname" value='<%# DataBinder.Eval(Container.DataItem, "ProductName") %>' runat="server" />
<input type="hidden" id="hiddenamount" value='<%# DataBinder.Eval(Container.DataItem, "Amount") %>' runat="server" />
<input type="hidden" id="hiddenimg" value='<%# DataBinder.Eval(Container.DataItem, "ProductImage") %>' runat="server" />
<asp:Button ID="btnwishlist" runat="server" Text="Add To cart" CommandName="Add" CssClass="shiny-button" /></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
C# Hompage
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Web.UI.HtmlControls;
using System.Collections;
namespace CookiesAddToCart
{
public partial class Home : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Binddata();
count();
}
}
private void Binddata()
{
SqlConnection con = new SqlConnection("Data Source=Servername;Initial Catalog=databasename;Integrated Security=True");
con.Open();
SqlDataAdapter da = new SqlDataAdapter("select * from Product", con);
DataSet ds = new DataSet();
da.Fill(ds, "Product");
Datalist1.DataSource = ds;
Datalist1.DataBind();
}
public void count()
{
if (Request.Cookies["ShoppingCart"] != null)
{
var value = Request.Cookies["ShoppingCart"].Values.Count;
lblcount.Text = value.ToString();
}
else
{
var value = "0";
lblcount.Text = value.ToString();
}
}
protected void Datalist1_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "Add")
{
string id = ((HtmlInputHidden)e.Item.FindControl("hiddenid")).Value;
string name = ((HtmlInputHidden)e.Item.FindControl("hiddenname")).Value;
string amount = ((HtmlInputHidden)e.Item.FindControl("hiddenamount")).Value;
string image = ((HtmlInputHidden)e.Item.FindControl("hiddenimg")).Value;
HttpCookie c = null;
if (HttpContext.Current.Request.Cookies["ShoppingCart"] == null)
c = new HttpCookie("ShoppingCart");
else
c = HttpContext.Current.Request.Cookies["ShoppingCart"];
string itemdetails;
itemdetails = id + "|" + name + "|" + amount + "|" + image;
c.Values[id] = itemdetails;
c.Expires = DateTime.Now.AddDays(2);
Response.Cookies.Add(c);
Response.Redirect(Request.RawUrl);
}
}
protected void btncart_ServerClick(object sender, EventArgs e)
{
HttpCookie myCookie = new HttpCookie("ShoppingCart");
myCookie = Request.Cookies["ShoppingCart"];
if (myCookie != null)
Response.Redirect("Cart.aspx");
else
Response.Cookies["ShoppingCart"].Expires = DateTime.Now.AddDays(-1);
}
}
}
Cart Page HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="assets/css/button.css" rel="stylesheet" />
<style>
#output {
border: groove;
width: 480px;
box-shadow: 3px 5px 15px #b6b6b6;
border-radius: 13px 13px 13px 13px;
background-color: white;
margin:0px auto;
margin-top:65px;
}
</style>
</head>
<body style="background-color: #F7F5EE">
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<div id="output">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<img src="image/cart.png" width="45" height="45" /></td>
<td>
<asp:Label ID="lblcount" runat="server" Font-Size="X-Large"></asp:Label></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<div style="border-bottom: groove 1px; min-height: 220px;">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Repeater ID="rptcart" runat="server" OnItemCommand="rptcart_ItemCommand">
<ItemTemplate>
<table style="width: 100%">
<tr>
<td style="width: 20%">
<asp:Label ID="lblid" runat="server" Text='<%#Eval("ProductID") %>'></asp:Label></td>
<td style="width: 20%">
<img id="img1" class="img1" runat="server" width="40" height="40" src='<%#Eval("ProductImage") %>' /></td>
<td style="width: 20%">
<asp:Label ID="lblqty" runat="server" Text='<%#Eval("ProductName") %>'></asp:Label></td>
<td style="width: 20%">
<asp:Label ID="lblprice" runat="server" Text='<%#Eval("Amount") %>'></asp:Label></td>
<td style="width: 20%">
<asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "quantity") %>' Columns="3"></asp:TextBox>
<asp:LinkButton ID="saveqty" runat="server" Font-Size="12px" CommandName="countqty" OnClick="saveqty_Click">Save</asp:LinkButton>
</td>
<td>
<input type="hidden" id="hiddenid" value='<%# DataBinder.Eval(Container.DataItem, "ProductID") %>' runat="server" />
<input type="hidden" id="hiddenqty" value='<%# DataBinder.Eval(Container.DataItem, "quantity") %>' runat="server" />
<input type="hidden" id="hiddenamount" value='<%# DataBinder.Eval(Container.DataItem, "Amount") %>' runat="server" />
<asp:ImageButton CommandName="delete" ID="btndelete" runat="server" ImageUrl="~/image/close.png" CommandArgument='<%#Eval("ProductID") %>' Width="15" Height="15" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div style="height: 125px;">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<table width="98%">
<tr>
<td style="text-align: center; width: 50%">
<br />
<b style="font-size: 15px">Estimated Total : </b>
<b>
<asp:Label ID="lbltotalamt" runat="server" Font-Size="15px"></asp:Label></b></td>
</tr>
<tr>
<td style="text-align: center; width: 50%;">
<br />
<input type="submit" id="btnempty" runat="server" style="font-size: 15px" value="Clear Cart" class="shiny-button" /></td>
<td style="text-align: center; width: 50%">
<br />
<input type="submit" id="btnproceed" runat="server" style="font-size: 15px" value="Place Order" class="shiny-button" /></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
Cart Page C#
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace CookiesAddToCart
{
public partial class Cart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
FillCartFromCookies();
}
}
private void FillCartFromCookies()
{
if (Request.Cookies["ShoppingCart"] != null)
{
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('|');
shopdetail item = new shopdetail();
item.ProductID = int.Parse(vals[0]);
item.ProductName = vals[1];
item.Amount = decimal.Parse(vals[2]);
item.ProductImage = vals[3];
item.Quantity = 1;
items.Add(item);
}
rptcart.DataSource = items;
rptcart.DataBind();
saveqty_Click(null, null);
}
else
{
Response.Redirect("Home.aspx");
}
}
protected void rptcart_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "delete")
{
string id = ((HtmlInputHidden)e.Item.FindControl("hiddenid")).Value;
HttpCookie c = HttpContext.Current.Request.Cookies["ShoppingCart"];
c.Values.Remove(id);
Response.Cookies.Add(c);
FillCartFromCookies();
if (Request.Cookies["ShoppingCart"] != null)
{
var value = Request.Cookies["ShoppingCart"].Value;
if (value == "")
{
Response.Cookies["ShoppingCart"].Expires = DateTime.Now.AddDays(-1);
}
}
}
}
protected void saveqty_Click(object sender, EventArgs e)
{
decimal total = 0;
try
{
foreach (RepeaterItem rpt in rptcart.Items)
{
if (rpt.ItemType == ListItemType.Item || rpt.ItemType == ListItemType.AlternatingItem)
{
TextBox t = (TextBox)rpt.FindControl("TextBox2");
Label l = (Label)rpt.FindControl("lblprice");
int quantity = int.Parse(t.Text);
decimal unitprice = Decimal.Parse(l.Text);
total = total + (unitprice * quantity);
}
}
}
catch
{
}
lbltotalamt.Text = total.ToString();
}
}
}
Output Preview
Download Source