Na 1º parte deste artigo vou abordar a construção de um carrinho para sistema de vendas online, iremos usar 2 tabelas MySQL. Uma chamada ‘carrinho’ onde ficaram os itens adicionados e a tabela ‘compras’ onde ficaram os registros das comparas efetuadas no site, salientando que um registro da tabela compras poderá estar ligado a vários registros na tabela carrinho através de uma chave estrangeira. Usaremos o PHP para a lógica do sistema e um pouco de JavaScript para efetuarmos adição de itens, remoção, e recalculo de valores. Este sistema utilizará ainda tabela dos produtos e a de clientes que ficam a critério do usuário sua implementação, neste exemplo estou usando o PHP SESSION para gravar os dados do cliente.
Como neste artigo iremos precisar usar conexões com o BD e requisições JSON, é interessante que você leia:
http://www.botecodigital.info/php/exemplo-de-autenticacao-parte-1/
http://www.botecodigital.info/jquery/trocando-dados-utilizando-json/
Bom, vamos a prática. Começaremos criando as tabelas no BD:
Tabela ‘carrinho’:
CREATE TABLE IF NOT EXISTS `carrinho` ( `cod_compra` int(8) NOT NULL, `cod_produto` int(8) NOT NULL, `unidades_vendidas` int(8) NOT NULL, `data_insercao` date NOT NULL, `hora_insercao` time NOT NULL );
Tabela ‘compras’:
CREATE TABLE IF NOT EXISTS `compras` ( `cod_compra` int(8) PRIMARY KEY AUTOINCREMENT NOT NULL, `cod_cliente` int(8) NOT NULL, `forma_pgto` varchar(15) NOT NULL, `parcelamento` int(2) NOT NULL, `valor_liquido` varchar(10) NOT NULL, `valor_final` varchar(10) NOT NULL, `status` varchar(10) NOT NULL );
Adição de itens no carrinho:
Para adicionarmos no carrinho um iten usaremos o código do produto e a quantidade itens.
<input type='hidden' name='cod_produto' id='cod_produto' value='001'> <label>Quantiade de produtos:</label> <input type='number' name='quantidade' id='quantidade'> <input type='button' id='excluir' value='Excluir do Carrinho'> <input type='button' id='visualizar' value='Visualizar Carrinho'>
Código simples com o código do produto oculto, campo para digitação da quantidade de itens e botão que acionará nosso Javascript, temos também o botão de excluir e visualizar que esconderemos via Javascript.
Javascript:
$(document).ready(function(){
$("#excluir").hide('fast');
$("#visualizar").hide('fast');
$("#adicionar").click(function(){
var cod_produto = $("#cod_produto").val();
var quantidade = $("#quantidade").val();
$.getJSON('adicionar_carrinho.php?cod_produto_quantidade='+cod_produto+'@'+quantidade, function(retorno){
if(retorno[0].resposta == 'inseriu'){
alert('O produto foi inserido em seu carrinho.');
$("#quantidade").hide('fast');
$("#adicionar").hide('fast');
$("#excluir").show('fast');
$("#visualizar").show('fast');
}else{
alert('O produto não pode ser inserido no carrinho.');
}
});
});
$("#excluir").click(function(){
var cod_produto = $("#cod_produto").val();
$.getJSON('exclui_carrinho.php?cod_produto='+cod_produto, function(retorno){
if(retorno[0].resposta == 'excluiu'){
alert('O produto foi excluido de seu carrinho.');
$("#quantidade").show('fast');
$("#adicionar").show('fast');
$("#excluir").hide('fast');
$("#visualizar").hide('fast');
}
}
});
$("#visualizar").click(function(){
window.open('carrinho.php','_blank');
});
});
Explicando o código acima: Começamos escondendo os elementos com id ‘excluir’ ou ‘visualizar’ através do método hide(). Depois na linha 4 criamos uma função que será acionada quando o botão adicionar for clicado. Nas linha 5 e 6 gravamos nas variáveis ‘cod_produto’ e ‘quantidade’ a valor dos campos ‘cod_produto’ e ‘quantidade’. Enviamos via GET o cod_produto e quantidade separados por um ‘@’ para o arquivo ‘adicionar_carrinho.php’ através do $.getJSON. Criamos a função retorno e verificamos na linha 8 se o JSON retornou dentro da variável resposta o valor ‘inseriu’ se sim escondemos os elementos com ids ‘adicionar’ e ‘quantidade’ e mostramos os elementos com ids ‘excluir’ e ‘visualizar’, também exibimos para o usuário uma mensagem de sucesso através do alert(). Se não exibimos uma mensagem de falha.
Na linha 19 criamos uma função que será acionada quando clicarmos no elemento com id ‘excluir’. Na linha 20 fazemos o mesmo procedimento que na função anterior mas agora so gravamos na variável o código do produto, pois para excluir não precisaremos da quantidade. Enviamos novamente via GET através do $.getJSON para a página ‘exclui_carrinho.php’ a variável cod_produto. Na linha 22 verificamos se o retorno foi ‘excluiu’, se sim, mostramos os elementos com ids ‘adicionar’ e ‘quantidade’ e escondemos os elementos com ids ‘excluir’ e ‘visualizar’. Na linha 31 criamos uma função que será acionada quando o elemento ‘visualizar’ for clicado. Essa função irá abrir a página do carrinho em uma nova janela através do método window.open().
Agora vamos criar as páginas em php:
adicionar_carrinho.php
<?php
include('conf.php');
$parametro_recebido = $_GET['cod_produto_quantidade'];
$parametro_dividido = explode('@', $parametro_recebido);
$cod_produto = $parametro_dividido[0];
$quantidade = $parametro_dividido[1];
$data = date('Y/m/d');
$hora = date('H:i:s');
$consulta_compra_aberta = mysql_query("SELECT cod_compra FROM compras WHERE cod_cliente = '".$_SESSION['cod_cliente']."' AND status = 'aberta'");
$resultado_compra_aberta = mysql_num_rows($consulta_compra_aberta);
$resposta = "";
if($resultado_compra_aberta == 0){
$insere_compra = mysql_query("INSERT INTO compras(cod_cliente, status) VALUES ('$_SESSION['cod_cliente']', 'aberta')");
$cod_compra = mysql_insert_cod_compra();
$insere_produto = mysql_query("INSERT INTO carrinho(cod_compra, cod_produto, unidades_vendidas, data_insercao, hora_insercao) VALUES ('$cod_compra', '$cod_produto', '$quantidade', '$data', '$hora')");
if($insere_compra && $insere_produto){
$resposta .= "inseriu";
}
}else{
$row = mysql_fetch_array($consulta_compra_aberta);
$cod_compra = $row['cod_compra'];
$insere_produto = mysql_query("INSERT INTO carrinho(cod_compra, cod_produto, unidades_vendidas, data_insercao, hora_insercao) VALUES ('$cod_compra', '$cod_produto', '$quantidade', '$data', '$hora')");
if($insere_produto){
$resposta .= "inseriu";
}
}
$respostaJSON = Array(
array(
"resposta"=>"".$resposta.""
));
echo json_encode($respostaJSON);
?>
Na linha 2 incluímos o arquivo ‘conf.php’ que faz a conexão com o banco de dados. Na linha 3 atribuímos a variável ‘$parametro recebido’ o valor recebido via GET. Depois na linha 3 separamos o que esta antes e depois do @ gravando o resultado de antes do @ em ‘$parametro_dividido[0]‘ e o que vier depois em ‘$parametro_dividido[1]‘. Atribuímos os resultados as variáveis ‘$cod_produto’ e ‘$quantidade’. Nas linhas 8 e 9 usamos o método date() para pegar a data e a hora. Na linha 11 efetuamos uma consulta para verificar se há algum registro na tabela compras com o código do cliente e com status igual a ‘aberta’. Usamos o método mysql_num_rows() para contar o número de registros retornados.
Usamos um if para verificar se o resultado é 0, caso seja, inserimos na tabela compra um registro com o código do cliente e status igual a ‘aberta’. Na linha 16 atribuímos a variável ‘$cod_compra’ o valor do último campo auto increment inserido, que no nosso caso é o cod_compra. Depois inserimos na tabela ‘carrinho’ o(s) item(s) usando cod_compra que fará a relação com a tabela compra, o código do produto, a quantidade, a data e a hora. Na linha 18 verificamos se as inserções ocorram com sucesso, se sim, atribuímos a variável resposta o valor ‘inseriu’.
Na linha 21 temos o else que executará caso o valor retornado da primeira consulta seja diferente de 0. Usamos o mysql_fetch_array para pegar os resultados da consulta. Depois na linha 23 gravamos na variável ‘$cod_compra’ o valor retornado para o campo ‘cod_compra’. Efetuamos a inserção no carrinho da mesma forma como fizemos dentro do if. Verificamos se a inserção funcionou, se sim, gravamos na variável resposta o valor ‘inseriu’. Na linha 30 criamos a variável ‘$respostaJSON’ a qual usaremos para enviar a resposta no formato de JSON. Na linha 35 usamos o método json_encode() para retorna a resposta.
exclui_carrinho.php
<?php
include('conf.php');
$cod_produto = $_GET['cod_produto'];
$consulta_cod_compra = mysql_query("SELECT cod_compra FROM compras WHERE cod_cliente='".$_SESSION['cod_cliente']."' AND status='aberta'");
$row = mysql_fetch_array($consulta_cod_compra);
$cod_compra = $row['cod_compra'];
$deleta_registro = mysql_query("DELETE FROM carrinho WHERE cod_compra=".$cod_compra." AND cod_produto =".$cod_produto);
$resposta = '';
if($deleta_registro){
$resposta .= 'excluiu';
}
$respostaJSON = Array(
array(
"resposta"=>"".$resposta.""
));
echo json_encode($respostaJSON);
?>
Na linha 4 gravamos na variável ‘$cod_produto’ o valor recebido via GET. Na linha 5 efetuamos uma consulta para pegar o cod_compra. Gravamos o resultado na variável ‘$cod_compra’. Na linha 8 deletamos o registro da tabela carrinho que possuir o código da venda igual ao consultado e código do produto igual ao recebido via GET. Na linha 11 verificamos se deletou, se sim, atribuímos a variável $resposta o valor ‘excluiu’. Geramos a resposta no formato de JSON e retornamos a resposta através do método json_encode.
carrinho.php
<table>
<tr>
<td>Produto</td>
<td>Preço Un.</td>
<td>Quantidade</td>
<td>Preço Total</td>
<td>Excluir</td>
<td>Atualizar</td>
</tr>
<?php
$consulta_compra = mysql_query("SELECT cod_compra FROM compras WHERE cod_cliente='".$_SESSION['cod_cliente']."' AND status='aberta'");
$resulatdo_consulta_compra = mysql_num_rows($consulta_compra);
if($resulatdo_consulta_compra == 0){
echo "<tr><td colspan='4'>O carrinho encontra-se vazio! </td</tr>";
}else{
$row = mysql_fetch_array($consulta_compra);
$cod_compra = $row['cod_compra'];
$preenche_carrinho = mysql_query("SELECT carrinho.cod_produto, carrinho.unidades_vendidas, produtos.nome, produtos.preco FROM carrinho, produtos WHERE carrinho.cod_compra = ".$cod_compra." AND carrinho.cod_produto = produtos.id");
$resultado_consulta_carrinho = mysql_num_rows($preenche_carrinho);
if($resultado_consulta_carrinho == 0){
echo "<tr><td colspan='4'>O carrinho encontra-se vazio! </td</tr>";
}else{
$total = 0;
$i = 1;
while($dados = mysql_fetch_array($preenche_carrinho)){
$preco_total = $dados['preco']*$dados['unidades_vendidas'];
echo "<tr><span id='linha".$i."'><td>".$dados['nome']."</td><td>".$dados['preco']."</td><td><input type='number' id='quantidade' value='".$dados['unidades_vendidas']."'></td><td>".$preco_total."</td><td><input type='button' onclick='excluir(\"linha".$i."\")' value='Excluir'></td><td><input type='button' onclick='atualizar(\"linha".$i."\")' value='Atualizar'></td></span></tr>";
$total += $preco_total;
$i++;
}
echo "<tr><td colspan='4'>Total: ".$total." </td</tr>";
}
}
?>
</table>
Na nossa página de visualização do carrinho usaremos uma tabela , então criamos o seu cabeçalho em HTML. Na linha 11 efetuamos uma consulta para verificar se algum registro com o status ‘aberta’ para este cliente. Na linha 12 usamos o método mysql_num_rows() para contar o número de registros retornados. Verificamos se é igual a 0, se sim, exibimos ‘O seu carrinho encontra-se vazio’. Caso contrario na linha 16 usamos o método mysql_fetch_array() para pegar o resultado. Na linha 17 gravamos na variável ‘$cod_compra’ o valor retorno do campo cod_compra. Efetuamos uma consulta em duas tabelas na linha 18, onde selecionamos na tabela ‘carrinho’ o cod_produto e unidades_vendidas e na tabela ‘produtos’ o nome e o preço, quando o campo cod_compra for igual ao valor armazenado na variável ‘$cod_compra’ e quando o cod_produto da tabela carrinho for igual ao id da tabela produtos. Contamos os resultados desta consulta e verificamos se é igual a 0, caso seja, exibimos ‘O seu carrinho encontra-se vazio’.
Se não, criamos as variáveis ‘total’ que armazenará o valor total de todos os itens e a variável ‘i’ que contara as linhas para que depois possamos atualizar o carrinho. Na linha 25 criamos um while que executara enquanto tivermos dados vindos da nossa consulta ao carrinho. Na linha 18 calculamos o preço total de cada item, sendo o preço da unidades * quantidade comprada. Na linha 29 exibimos os resultados no formato de linha divido pelas colunas, tag span com o id=’linha”.$i.”‘ é importante, pois através dele que localizaremos o cod_produto para que possamos alterar a quantidade ou excluir o produto. Usamos o evento onclick=’atualizar(\”linha”.$i.”\”)’ ou onclick=’excluir(\”linha”.$i.”\”)’ para enviar a função javascript o id, que será o mesmo que o gerado no id do span. E usamos $dados['nome_do_campo'] para pegar os dados resultados na consulta SQL. Na linha 28 usamos 0 ‘+=’ para somar na variável ‘$total’ o preço total de um produto. Na linha 31 exibimos o valor total de todos os itens do carrinho.
Função Javascipt da página ‘carrinho.php’.
function atualizar(linha){
var codigo = document.getElementById(linha).cod_produto.value;
var quantidade = document.getElementById(linha).quantidade.value;
$.getJSON('atualizar_carrinho.php?cod_produto_quantidade='+cod_produto+'@'+quantidade,function(retorno){
if(retorno[0].resposta == 'atualizou'){
alert('Carrinho atualizado com sucesso!');
document.location.reload(true);
}else{
alert('Não foi possível atulizar o carrinho!');
}
});
}
function excluir(linha){
var codigo = document.getElementById(linha).cod_produto.value;
$.getJSON('exclui_carrinho.php?cod_produto='+cod_produto, function(retorno){
if(retorno[0].resposta == 'excluiu'){
alert('O produto foi excluido de seu carrinho.');
$("#quantidade").show('fast');
$("#adicionar").show('fast');
$("#excluir").hide('fast');
$("#visualizar").hide('fast');
}
};
}
Neste código temos as funções ‘excluir’ e ‘atualizar’ que serão acionadas pelo método onclick(). Na linha 2 e 3 gravamos respectivamente dentro das variáveis código e quantidade o valor que estiver dentro dos elementos com Id’s cod_produto e quantidade que por sua vez estiverem dentro do elemento com id recebido do método onclick. Usamos o mesmo procedimento das outras funções para enviar os dados. Na linha 7 usamos o método document.location.reload() para recarregar a página. A função excluir segue a mesma lógica da função atualizar.
atualizar_carrinho.php
<?php
include('conf.php');
$parametro_recebido = $_GET['cod_produto_quantidade'];
$parametro_dividido = explode('@', $parametro_recebido);
$cod_produto = $parametro_dividido[0];
$quantidade = $parametro_dividido[1];
$consulta_cod_compra = mysql_query("SELECT cod_compra FROM compras WHERE cod_cliente='".$_SESSION['cod_cliente']."' AND status='aberta'");
$row = mysql_fetch_array($consulta_cod_compra);
$cod_compra = $row['cod_compra'];
$atualiza_registro = mysql_query("UPDATE carrinho SET unidades_vendias=".$quantidade." WHERE cod_compra=".$cod_compra." AND cod_produto =".$cod_produto);
$resposta = '';
if($atualiza_registro){
$resposta .= 'atualizou';
}
$respostaJSON = Array(
array(
"resposta"=>"".$resposta.""
));
echo json_encode($respostaJSON);
?>
Esse código funciona como o de excluir itens, porém atualiza a quantidade de produtos através do comando UPDATE na linha 12, se atualizar, devolve a resposta atualizou.
Por hoje é isso pessoal. Até a segunda parte deste Artigo.
0sem comentários ainda