3


Bom, estou desenvolvendo um sistema de pedidos online, inicialmente só para fins de aprendizado, só que me deparei com algo que não faço a mínima ideia de como fazer e apreciaria imensamente qualquer tipo de ajuda.
Na página produtos.php eu estabeleço duas conexões com o DB e busco os produtos presentes na tabela produtos por categoria e os acréscimos existentes na tabela acrescimos:

$sql = "SELECT p.id_produto, p.nome_produto, p.preco_produto, p.id_categoria, c.nome_categoria FROM produtos p, categorias c WHERE c.id_categoria = p.id_categoria ORDER BY p.id_categoria, p.nome_produto";
$stmt = $conexao->prepare($sql);
$stmt->execute();

$sql2 = "SELECT id_acrescimo, nome_acrescimo, preco_acrescimo FROM acrescimos ORDER BY nome_acrescimo";
$stmt2 = $conexao->prepare($sql2);
$stmt2->execute();

$num = $stmt->rowCount();
$categoria = null;

if($num>0)
{
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
    {
        extract($row);
        if($categoria != $id_categoria)
        {
            if(!is_null($categoria)) { echo "</table>"; }

        echo "<h1>{$nome_categoria}</h1>
        <table>
            <tr>
                <th>NOME</th>
                <th>PREÇO</th>
                <th>QUANTIDADE</th>";
                if($id_categoria == 1) echo" <th>ACRÉSCIMOS</th>";
            echo "</tr>";

            $categoria = $id_categoria;
        }
        $preco_produto_reajustado = number_format($preco_produto, 2, ",", ".");
        echo "
        <tr>
            <td>
                <div class='id-produto' style='display: none'>{$id_produto}</div>
                <div class='nome-produto'>{$nome_produto}</div></td>
                <td>R&#36;{$preco_produto_reajustado}
            </td>
            <td>
                <input type='number' name='quantidade' value='1' min='1' max='20'/>
            </td>";
            if($id_categoria == 1)
            {
                echo "<td>";
                while ($row = $stmt2->fetch(PDO::FETCH_ASSOC))
                {
                    extract($row);
                    $preco_acrescimo_reajustado = number_format($preco_acrescimo, 2, ",", ".");
                    echo "
                    <input type='checkbox' name='{$nome_acrescimo}' value='{$nome_acrescimo}'/>{$nome_acrescimo} - R&#36;{$preco_acrescimo_reajustado} <input type='number' name='quantidade_acr[]' value='1' min='1' max='5'/><br/>
                    ";
                }
                echo "</td>";
            }
            echo "<td>
                <form class='adicionar'>
                    <button type='submit'>Adicionar</button>
                </form>
            </td>
        </tr>";
    }
    echo "</table>";
}

Como puderam ver com este código, se o ID da categoria correspondente for igual a 1, outra coluna será criada na table. A coluna Acréscimos. E é aí que se encontra o meu maior problema. Se analisaram bem o código, puderam ver que meu output será algo como: Output Notaram as checkboxes presentes na coluna Acréscimos? Então, o que estou tentando fazer (sem sucesso) é, no ato do click no botão Adicionar, obter os valores das checkboxes selecionadas de acordo com seus nomes e preços existentes na tabela acrescimos. Mas como fazer isso?
Eu preciso obter esses valores e armazená-los em variáveis para posteriormente inseri-los dentro da SESSION e exibi-los junto com os outros no carrinho do usuário. No produtos.php eu tenho uma função de jQuery que armazena os dados da linha selecionada em variáveis para depois serem inseridos em suas determinadas variáveis na SESSION:

$(document).ready(function()
{
    $('.adicionar').on('submit', function()
    {
        var id_produto = $(this).closest('tr').find('.id-produto').text();
        var nome_produto = $(this).closest('tr').find('.nome-produto').text();
        var quantidade = $(this).closest('tr').find('input').val();
        window.location.href = "adicionar.php?id_produto=" + id_produto + "&nome_produto=" + nome_produto + "&quantidade=" + quantidade;
        return false;
    });
});

No arquivo adicionar.php eu busco no DB o ID e nome do produto selecionado para então obter o preço do mesmo. Se meu retorno for true, o script prossegue adicionando os dados na SESSION:

if (isset($_GET['id_produto']) && $_GET['id_produto'] != "")
{
    if(isset($_SESSION['carrinho']))
    {
        $contar = count($_SESSION['carrinho']);
        $id_produto_sessao = $contar++;
    }
    else
    {
        $id_produto_sessao = 0;
    }
    $id_produto = isset($_GET['id_produto']) ? $_GET['id_produto'] : "";
    $nome_produto = isset($_GET['nome_produto']) ? $_GET['nome_produto'] : "";
    $quantidade = isset($_GET['quantidade']) ? $_GET['quantidade'] : "";

    $sql = "SELECT * FROM produtos WHERE id_produto LIKE '{$id_produto}' AND nome_produto LIKE '{$nome_produto}' LIMIT 1";
    $stmt = $conexao->prepare($sql);
    $stmt->execute();

    $num = $stmt->rowCount();

    if($num == 1)
    {
        if($quantidade <= 0 || $quantidade > 20)
        {
            header('Location: produtos.php?acao=quantidadeinvalida&nome_produto=' . $nome_produto);
        }
        else if(!isset($_SESSION['carrinho']))
        {
            $_SESSION['carrinho'] = array();
        }
        if(isset($_SESSION['carrinho']))
        {
            while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
            {
                extract($row);
                $colunas = array
                (
                    'id_produto_sessao' => $id_produto_sessao,
                    'id_produto' => $id_produto,
                    'nome_produto' => $nome_produto,
                    'preco_produto' => $preco_produto,
                    'quantidade' => $quantidade
                );
            }
            $_SESSION['carrinho'][$id_produto_sessao] = $colunas;
            header('Location: produtos.php?acao=adicionado&nome_produto=' . $nome_produto);
        }
    }   
    else
    {
        redirecionar_para("produtos.php");
    }
}

Notem que a quantidade informada é obtida com o jQuery e passada para a SESSION. Creio que terei que fazer algo parecido para obter os dados referentes às checkboxes selecionadas, mas não faço ideia de como fazer isso. Iria colocar também o código que consta no arquivo carrinho.php e que tem como finalidade exibir os dados presentes na SESSION carrinho, mas isso vai deixar a pergunta extensa demais. Acho que primeiro devo conseguir armazenar os dados dessas checkboxes. A tarefa de exibi-los depois não deve ser tão difícil. Mas voltando ao problema em pauta, como obter os valores de cada uma das checkboxes selecionadas anteriormente e também inseri-los nessa SESSION? Como implementar isso no meu sistema?

2
  • Você quer algo assim? jsfiddle.net/724xyyq4 (Claro, não está exatamente como você precisa... mas a ideia de pegar os checkbox é a mesma... só editar para a sua necessidade) 10/04/2015 às 11:39
  • @RafaelWithoeft Obrigado pelo comentário! Sim, é mais ou menos isso. Mas eu preciso especificar os preços de cada um dos acréscimos e multiplicá-los pela quantidade informada. No carrinho depois pode constar algo como "Produto: Pizza, Acréscimos: 2xQueijo, 1xAlho, total: R$(valor da soma dos preços dos acréscimos multiplicados pela quantidade de cada um)"
    – M. Victor
    10/04/2015 às 11:46

2 Respostas 2

1

Você pode fazer o seguinte, no seu formulário, coloque o atributo data-(o parâmetro que quer capturar):

<input type='checkbox' name='acr[0]' data-id="1" data-valor="2.00" value='Queijo'/>Queijo - R&#36;2,00 <input type='number' name='quantidade_acr[0]' value='1' step="1" min='1' max='5'/><br/>
                <input type='checkbox' data-id="2" data-valor="0.50" name='acr[1]' value='Alho'/>Alho - R&#36;0,50 <input type='number' name='quantidade_acr[1]' value='1' step="1" min='1' max='5'/><br/>
                <input type='checkbox' data-id="3" data-valor="0.50" name='acr[2]' value='Oregano'/>Orégano - R&#36;0,50 <input type='number' name='quantidade_acr[2]' value='1'step="1" min='1' max='5'/><br/>

<button id="salvar">Salva</button>

Depois crie o método em jquery para salvar os dados:

$(document).ready(function(){
    $('#salvar').on('click', function() {
        var list = [];
         $('[name*="acr"]:checked').each(function(key) {

             var qtde = $('[name*="quantidade_acr['+key+']"]').val();
             var produto = $(this).val();
             var id = $(this).data('id');
             var valor = $(this).data('valor');
             var total = qtde * valor;
            list[key] = {
                          produto: produto,
                          quantidade: qtde,
                          id: id,
                          valor: valor,
                          total_valor: total
                         };

           });
          /* aqui eu dei uma saída em HTML
             do JSON apenas para exibir, o
             ideal é que você envie esse
             array para o seu método post. */
           alert(JSON.stringify(list));

    });
});

Aqui está o exemplo: https://jsfiddle.net/ivanferrer/kumyaj8g/

Aqui um exemplo mais complexo: http://jsfiddle.net/ivanferrer/nq9Lts0f/1/

1

Se mudares o HTML um pouco facilitas as coisas. Muda:

<td>
    <input type='checkbox' name='acr[0]' value='Queijo'/>Queijo - R&#36;2,00 <input type='number' name='quantidade_acr[0]' value='1' min='1' max='5'/><br/>
    <input type='checkbox' name='acr[1]' value='Alho'/>Alho - R&#36;0,50 <input type='number' name='quantidade_acr[1]' value='1' min='1' max='5'/><br/>
    <input type='checkbox' name='acr[2]' value='Oregano'/>Orégano - R&#36;0,50 <input type='number' name='quantidade_acr[2]' value='1' min='1' max='5'/><br/>
</td>

para:

<td classe="acr">
   <input type='checkbox' name='acr[]' value='{"tipo": "Queijo", "preco": 2.0}'/>Queijo - R&#36;2,00 <input type='number' name='quantidade_acr[0]' value='1' min='1' max='5'/><br/>
   etc...

Assim no valor dessas checkboxes já tens o preço e tens uma classe com essa td.

Depois podes fazer assim para passar isso para um JavaScript:

var dados = $('.acr input[type=checkbox]:checked').map(function (i) {
    var data = JSON.parse(this.value);
    var qtd = this.checked ? parseInt($(this).next('input').val(), 10) : 0;
    var preco = data.preco;
    var toString = {
        tipo: data.tipo,
        preco: data.preco,
        qdt: qtd,
        total: qtd * data.preco
    };
    var obj = {};
    obj['acr_' + i] = encodeURIComponent(JSON.stringify(toString));
    return obj;
});

var queryString = dados.map(function () {
    return $.param(this, true)
}).get().join('&');

Isso vai criar uma array dados com objetos com tipo, preco, qtd e total. Depois converte essa informação toda numa _query string_, que vejo que usas no teu código. Assim podes juntar o que está nessa variável queryString ao GET que fazes quando tens window.location.href = ... lembra-te de juntar & entre cada parte desse url.

Se fizeres com AJAX podes fazer assim, dentro da função que inicia o envio para o servidor:

var obj = {};
var dados = $('.acr input[type=checkbox]:checked').each(function (i) {
    var data = JSON.parse(this.value);
    var qtd = this.checked ? parseInt($(this).next('input').val(), 10) : 0;
    var preco = data.preco;
    var dados = {
        tipo: data.tipo,
        preco: data.preco,
        qdt: qtd,
        total: qtd * data.preco
    };
    obj['acr_' + i] = dados;
});
$.post(url, obj, function (res) {
    console.log(res);
});

Se tiveres problemas a recuperar isso no PHP coloca outra pergunta que podemos ajudar mais.

jsFiddle: https://jsfiddle.net/Lubvpnz5/

6
  • Muito obrigado pela resposta, Sergio! Estou estudando seu código, mas antes poderia me esclarecer uma dúvida? Como JS é client-side o usuário pode ser capaz de editar o preço do acréscimo? Por exemplo, <input type='checkbox' name='acr[]' value='{"tipo": "Queijo", "preco": 2.0}'/>Queijo - R&#36;2,00 <input type='number' name='quantidade_acr[0]' value='1' min='1' max='5'/><br/> Obter o preço a partir do JS é seguro?
    – M. Victor
    10/04/2015 às 12:04
  • @M.Victor isso é um risco sim. Mas vejo que no teu código estás a usar query string, devias usar POST. Usando POST era o melhor, e podes usar o HTML que sugeri em cima, e fazes o processamento no PHP.
    – Sergio
    10/04/2015 às 12:12
  • O problema em usar POST é que, como você pôde ver, existem vários formulários com a classe adicionar. Uso jQuery para obter os valores mais próximos de cada formulário com essa classe e passá-los para a Query String. Não sei como fazer isso com POST, visto que há várias classes com o mesmo nome. Até facilitaria se eu fizesse tudo a partir da página dos produtos ao invés de passar para o arquivo adicionar.php. Você tem alguma ideia de como fazer isso? Pode editar sua resposta com um exemplo de POST que funcione para mim, por gentileza?
    – M. Victor
    10/04/2015 às 12:30
  • @M.Victor porque nõ fazes isso com AJAX? assim podes enviar via POST. Juntei código para enviares via AJAX.
    – Sergio
    10/04/2015 às 12:39
  • Não entendi como implementar isso com os demais dados que obtenho (id do produto, nome, preço, etc). Não há problema para mim usando Query String porque verifico se o ID e o nome do produto existem no DB lá no adicionar.php. Os dados só são inseridos na SESSION se eles existirem. Por isso lá na pergunta eu disse "Devo ter uma tabela no DB correspondente aos Acréscimos com seus devidos nomes e preços?" Porque fazendo por server-side o usuário não tem como alterar dados importantes como por exemplo, o preço. Não teria como fazer algo assim? Guardar os nomes e preços dos acréscimos no DB?
    – M. Victor
    10/04/2015 às 12:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .