0

Confesso que estou há um tempo nesse pequeno desafio, estou desenvolvendo a parte de carrinho em meu ecommerce.

O objetivo é que exiba uma mensagem, ao usuário clicar em "Adicionar ao carrinho" de determinado produto.

O problema, é que só estou conseguindo pegar e exibir o valor do primeiro produto que é exibido em minha página (os demais produtos, não exibe mensagem).

Estou exibindo os produtos através de um foreach, e coloquei o ID deles dentro de um input.

Creio que o problema esteja na forma em que estou chamando a minha função.

O que eu poderia estar fazendo para solucionar esse meu problema?

PHP:

$connect = new PDO("mysql:host=localhost;dbname=ecommerce", "root", "");

$query = "SELECT * FROM produtos";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();

foreach($result as $cont){
?>

<h6><?=$cont['produto']?></h6>                                      // Nome dos produtos
<input type="hidden" id="id" value="<?=$cont['ID_detalhes']?>">     // Estou buscando esse value...
<a href="#" id="adicionar_carrinho">+ Adicionar ao carrinho</a>     // Botão que chama a função ajax
    
<?php } 

AJAX:

<script>
  $('#adicionar_carrinho').on('click', function(){
    $.ajax({
        url: 'verificar-carrinho.php',
        data: {ID_detalhes: $('#id').val()},
        method: 'POST',
        success:function(data){
              $('#msg_carrinho').html(data);  // Aqui é exibe a mensagem na tela
        }
    })  
});
</script>

verificar-carrinho.php:

if(isset($_POST['ID_detalhes'])){
        
echo "Produto (".$_POST['ID_detalhes'].") foi adicionado ao seu <b>carrinho</b>!";
}

Comecei a trabalhar com AJAX recentemente, agradeço a ajuda de todos!

2 Respostas 2

1

$(function(){
  $(".adicionar_carrinho").on('click', function(e){
    e.preventDefault();
    let i = $('.adicionar_carrinho').index(this);    
    alert($('.produto').eq(i).val())
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h6>PRODUTO 1</h6>
  <input type="hidden" class="produto" id="id1" value="Detalhe Produto 1">
  <a href="#" class="adicionar_carrinho">+ Adicionar ao carrinho</a>
</div>
<div>
  <h6>PRODUTO 2</h6>
  <input type="hidden" class="produto" id="id2" value="Detalhe Produto 2">
  <a href="#" class="adicionar_carrinho">+ Adicionar ao carrinho</a>
</div>
<div>
  <h6>PRODUTO 3</h6>
  <input type="hidden" class="produto" id="id3" value="Detalhe Produto 3">
  <a href="#" class="adicionar_carrinho">+ Adicionar ao carrinho</a>
</div>

2
  • O id deve ser único, então você pode colocar assim: <input type="hidden" id="id-<?=$cont['ID']?>" value="<?=$cont['ID_detalhes']?>">. Você quer que ao clicar no produto mostre o ID? 19/11/2020 às 17:51
  • Consegui o que queria amigão, obrigado 19/11/2020 às 17:58
1

Você está utilizando id só pode exigir um por página, eles devem ser únicos. Além disso, se existem vários #id e vários #adicionar_carrinho você deve ter algum sistema para identificar qual deles foi clicado (neste caso pegando o do parente ou o mais próximo).


Troque o id por class ou outro atributo qualquer.

let produtosAdd = window.document.querySelectorAll("produto [add]")
for (i = 0; i < produtosAdd.length; i++) {
  produtosAdd[i].addEventListener("click", function(e) {
    e.preventDefault();
   
    if ((id = e.target.previousElementSibling).hasAttribute("identifier")) {
      if (id instanceof HTMLInputElement) {
        alert("Adicionar o " + id.value + " no carrinho");
      }
    }
  })
}
<produto>
  <input type="hidden" identifier value="1">  
  <a href="#" add>+ Adicionar ao carrinho</a>
</produto>
<produto>
  <input type="hidden" identifier value="2"> 
  <a href="#" add>+ Adicionar ao carrinho</a>
</produto>

Nesse caso a única diferença é remoção do id (atributo) e utilizar a função para pegar o valor do parente.


PS: Não sei utilizar JQuery (e não há tags de JQuery, em seu pergunta), então usei JS puro.

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 .