Boteco Digital

Sistema de Vendas Online – Parte 1

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 compras 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 AUTO_INCREMENT 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_bruto` varchar(10) NOT NULL,
  `taxas` varchar(10) NOT NULL,
  `status` varchar(10) NOT NULL,
  `org_cancelamento` varchar(20) NOT NULL
);

Adição de itens no carrinho:

Para adicionarmos no carrinho um item 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='adicionar' value='Adicionar ao Carrinho'>
<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{
                if(retorno[0].resposta == 'jainserido'){
                    alert('Produto já inserido no carrinho!');
                    $("#quantidade").hide('fast');
                    $("#adicionar").hide('fast');
                    $("#excluir").show('fast');
                    $("#visualizar").show('fast');
                }else{
                    alert('O produto não foi inserido!');
                }
            }
        });
    });
    $("#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, verificamos se a reposta não foi ‘jainserido’, se for exibimos a mensagem dizendo que o produto já está inserido, escondemos os elementos com ids ‘quantidade’ e ‘adicionar’ e exibe os elementos com ids ‘excluir’ e ‘visualizar’. Caso o retorno seja diferente de ‘inseriu’ ou ‘jainserido’ exibimos a mensagem avisando que não foi possível inserir o produto.

Na linha 27 criamos uma função que será acionada quando clicarmos no elemento com id ‘excluir’. Na linha 28 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 30 verificamos se o retorno foi ‘excluiu’, se sim, mostramos os elementos com ids ‘adicionar’ e ‘quantidade’, escondemos os elementos com ids ‘excluir’ e ‘visualizar’ e exibimos a mensagem de sucesso. Na linha 39 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');
    session_start();

    $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')");
        $consulta_cod_compra = mysql_query("select cod_compra from compras where status='aberta' and cod_cliente = ".$_SESSION['cod_cliente']);
        $row = mysql_fetch_array($consulta_cod_compra);
        $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_compra && $insere_produto){
             $resposta .= "inseriu";
        }
    }else{
        $row = mysql_fetch_array($consulta_compra_aberta);
        $cod_compra  = $row['cod_compra'];
        $consulta_produto_inserido = mysql_query("select cod_produto from carrinho where cod_compra = ".$cod_compra." and cod_produto = ".$cod_produto);
        $produto_inserido = mysql_num_rows($consulta_produto_inserido);
        if($produto_inserido == 0){
            $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";
            }
        }else{
            $resposta .= "jainserido";
        }
    }

    $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 5 atribuímos a variável ‘$parâmetro_recebido’ o valor recebido via GET. Depois na linha 6 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 9 e 10 usamos o método date() para pegar a data e a hora. Na linha 12 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 19 atribuímos a variável ‘$cod_compra’ o valor consultado na linha 17, 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 21 verificamos se as inserções ocorram com sucesso, se sim, atribuímos a variável resposta o valor ‘inseriu’.

Na linha 24 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 26 gravamos na variável ‘$cod_compra’ o valor retornado para o campo ‘cod_compra’. Na linha 27 fizemos uma consulta para verificar se este produto já foi inserido nesta compra, se não, 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’. Se sim gravamos na variável ‘resposta’ o valor ‘jainseriu’. Na linha 39 criamos a variável ‘$respostaJSON’ a qual usaremos para enviar a resposta no formato de JSON. Na linha 44 usamos o método json_encode() para retorna a resposta.

exclui_carrinho.php

<?php
    include('conf.php');
    session_start();

    $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 5 gravamos na variável ‘$cod_produto’ o valor recebido via GET. Na linha 6 efetuamos uma consulta para pegar o cod_compra. Gravamos o resultado na variável ‘$cod_compra’. Na linha 9 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 12 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
         session_start();
         $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><td>".$dados['nome']."</td><td>".$dados['preco']."</td><td><input type='hidden' id='linha".$i."' name='linha".$i."' value='".$dados['cod_produto']."'><input type='number' id='quantidade".$i."' name='quantidade".$i."' 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."\", \"quantidade".$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 12 efetuamos uma consulta para verificar se algum registro com o status ‘aberta’ para este cliente. Na linha 13 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 17 usamos o método mysql_fetch_array() para pegar o resultado. Na linha 18 gravamos na variável ‘$cod_compra’ o valor retorno do campo cod_compra. Efetuamos uma consulta em duas tabelas na linha 19, 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 26 criamos um while que executara enquanto tivermos dados vindos da nossa consulta ao carrinho. Na linha 27 calculamos o preço total de cada item, sendo o preço da unidades * quantidade comprada. Na linha 28 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 32 exibimos o valor total de todos os itens do carrinho.

Função Javascipt da página ‘carrinho.php’.

    function atualizar(linha, quantidade){
        var codigo = document.getElementById(linha).value;
        var quantidade = document.getElementById(linha).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'){
                 document.location.reload(true);
            }
        });
    }

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');
    session_start();

    $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 13, se atualizar, devolve a resposta atualizou.

Por hoje é isso pessoal. Até a segunda parte deste Artigo.

Categorias API de Pagamentos Javascript PHP

Graduando em Engenharia de Computação pela UFPel, entusiasta de Software Livre, voluntário na Comunidade Mozilla Brasil e coordenador do FLISoL Pelotas, atua como desenvolvedor Full Stack. Atualmente engajado para a abertura do Firefox Student Ambassadors Club UFPel.

Outros posts do autor
comments powered by Disqus