Neste post mostrarei como criar um carrinho de compras simples para seu site de e-commerce, utilizando ASP.NET e Cookies, dispensando a utilização de banco de dados.
Optei por utilizar cookies ao invés do banco de dados para armazenamento no carrinho, em função da performance e também porque o carrinho de compras normalmente é utilizado para armazenamento temporário dos produtos.
Neste exemplo utilizarei o banco de dados Northwind. Se você não tiver um banco de dados poderá baixar o Nothwind.
Para desenvolver a aplicação utilizarei o Visual Studio 2008 Professional, porém você poderá utilizar o Visual Web Developer 2008 Express Edition, disponibilizado gratuitamente pela Microsoft em: http://www.microsoft.com/express/.
Seguirei os seguintes passos para criação do carrinho de compras:
1 – Abra o Visual Studio.
2 – Crie um webform chamado Produtos.aspx. Neste webform carregarei os produtos do banco de dados Northwind, para que posteriormente possamos adicioná-los ao carrinho de compras.
A seguir, o screenshot da página Produtos.aspx:
Lista de Produtos
Veja parte do código da página Produtos.aspx:
<div>
<b>Produtos</b><br /><br />
<asp:GridView ID="gvwProdutos" runat="server" AutoGenerateColumns="False" onrowcommand="gvwProdutos_RowCommand">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ID" />
<asp:BoundField DataField="ProductName" HeaderText="Nome" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lbtnAdicionar" runat="server" CommandArgument='<%# Eval("ProductID") %>'
CommandName="Adicionar">Adicionar ao Carrinho</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<p><a href="Carrinho.aspx">Meu Carrinho</a></p>
</div>
Veja a implementação da rotina de carregamento da grid de produtos e da rotina que adiciona os produtos no carrinho de compras:
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class Produtos : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
this.CarregarProdutos();
}
// Este evento é executado quando clicar em "Adicionar ao Carrinho"
protected void gvwProdutos_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Adicionar")
{
// Verifica o id do produto
string idProduto = e.CommandArgument.ToString();
// Adiciona o produto ao carrinho de compras
this.AdicionarAoCarrinho(idProduto);
// Redireciona para página Carrinho.aspx
Response.Redirect("Carrinho.aspx");
}
}
// Carrega a grid com a listagem de produtos
private void CarregarProdutos()
{
SqlConnection conexao = new SqlConnection("[STRING_DE_CONEXÃO]");
SqlCommand comando = new SqlCommand("select ProductID, ProductName from products where supplierid = 2");
SqlDataAdapter da = new SqlDataAdapter();
DataSet ds = new DataSet();
comando.Connection = conexao;
da.SelectCommand = comando;
da.Fill(ds);
gvwProdutos.DataSource = ds;
gvwProdutos.DataBind();
}
// Adiciona o Produto ao Carrinho
private void AdicionarAoCarrinho(string idProduto)
{
HttpCookie cookie;
// Se o cookie não existe, efetuamos sua criação
if (Request.Cookies["Carrinho"] == null)
{
cookie = new HttpCookie("Carrinho");
// Configura a expiração do Cookie para 4 horas
cookie.Expires = DateTime.Now.AddHours(4);
// Adiciona item ao cookie
cookie.Values.Add(idProduto, null);
}
// Caso o cookie já exista
else
{
bool existe = false;
// Resgata o cookie
cookie = (HttpCookie)Request.Cookies["Carrinho"];
// Configura a expiração do Cookie para 4 horas
cookie.Expires = DateTime.Now.AddHours(4);
// Verifica se o ID do produto já foi inserido ao cookie
foreach (string item in cookie.Values.AllKeys)
{
if (item == idProduto)
{
existe = true;
break;
}
}
// Se o produto não existir no carrinho ser adicionado
if (!existe)
cookie.Values.Add(idProduto, null);
}
// Grava o cookie
Response.Cookies.Add(cookie);
}
}
3 – Crie outro webform chamado Carrinho.aspx onde exibiremos os produtos adicionados ao carrinho. Serão armazenados os “IDs” dos produtos dentro dos cookies.
A seguir, o screenshot da página Carrinho.aspx:
Carrinho de Compras
Veja parte do código da página Carrinho.aspx:
<div>
<b>Carrinho de Compras</b><br />
<br />
<asp:GridView ID="gvwCarrinho" runat="server" AutoGenerateColumns="False" OnRowCommand="gvwCarrinho_RowCommand">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ID" />
<asp:BoundField DataField="ProductName" HeaderText="Nome" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lbtnRemover" runat="server" CommandArgument='<%# Eval("ProductID") %>'
CommandName="Remover">Remover Produto</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
O carrinho está vazio!
</EmptyDataTemplate>
</asp:GridView>
<p><a href="Produtos.aspx">Continuar Comprando</a></p>
</div>
Veja a implementação da rotina que exibe os produtos adicionados ao carrinho de compras e a rotina que remove os produtos do carrinho:
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class Carrinho : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
this.CarregarCarrinho();
}
// Este evento é executado quando clicar em "Adicionar ao Carrinho"
protected void gvwCarrinho_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Remover")
{
// Verifica o id do produto
string idProduto = e.CommandArgument.ToString();
// Remove porduto do carrinho
this.RemoverDoCarrinho(idProduto);
this.CarregarCarrinho();
}
}
// Carrega a grid com os produtos do carrinho
private void CarregarCarrinho()
{
// Recupera os ids dos produtos do cookie
string produtos = this.RecuperarIDProdutos();
SqlConnection conexao = new SqlConnection("[STRING_DE_CONEXÃO]");
SqlCommand comando = new SqlCommand();
SqlDataAdapter da = new SqlDataAdapter();
DataSet ds = new DataSet();
comando.Connection = conexao;
if (!string.IsNullOrEmpty(produtos))
{
comando.CommandText = "select ProductID, ProductName from products where supplierid = 2 and ProductID in (" + produtos + ")";
da.SelectCommand = comando;
da.Fill(ds);
gvwCarrinho.DataSource = ds;
}
gvwCarrinho.DataBind();
}
// Remove porduto do carrinho
private string RecuperarIDProdutos()
{
string ids = null;
int index = 1;
// Resgata o cookie
HttpCookie cookie = (HttpCookie)Request.Cookies["Carrinho"];
// Verifica se o ID do produto já foi inserido ao cookie
foreach (string item in cookie.Values.AllKeys)
{
ids += item;
if (index < cookie.Values.Count)
ids += ",";
index += 1;
}
return ids;
}
private void RemoverDoCarrinho(string idProduto)
{
// Resgata o cookie
HttpCookie cookie = (HttpCookie)Request.Cookies["Carrinho"];
// Configura a expiração do Cookie para 4 horas
cookie.Expires = DateTime.Now.AddHours(4);
// Remove o id do produto do cookie
cookie.Values.Remove(idProduto);
// Grava o cookie
Response.Cookies.Add(cookie);
}
}
Conclusão
Este é um exemplo básico da criação de um carrinho de compras em ASP.NET. Use a sua criatividade e explore novos recursos e funcionalidades.
Espero que aproveitem esta dica!
Se inscrever