Realizei algumas alterações como:
// Não tem como adicionar produto sem colocar uma quantidade
// Não tem como adicionar produto com a quantidade = 0 ou negativo
// Limite de 6 produtos para evitar bug visual no CSS de lista infinita
// Foram adicionados outros produtos
// Limpar zera o numero e quantidade também
Mas teve duas que eu tentei e não consegui, queria que aparecesse uma mensagem de "seu carrinho está vazio" enquanto nada fosse adicionado e ao adicionar um produto ela sumisse.
Outra coisa que eu tentei mas não tive sucesso foi fazer com que se eu adicionasse 2 vezes o mesmo item ele fizesse uma soma ao inves de adicionar por exemplo:
(1x Iphone
1x Iphone)
queria que quando fosse adicionado um mesmo item ele ficasse como
(2x Iphone)
Teria como fazer isso?
//Tudo que ficar fora da função está "salvo" na memória do site, se não é apagado sempre que a função resetar
let totalGeral;
limpar()
function adicionar() {
//Variaveis principais
let nomeProduto = document.getElementById('produto').value;
let produto = nomeProduto.split('-')[0]
let valorProduto = parseInt(nomeProduto.split('R$')[1])
let quantidade = parseInt(document.getElementById('quantidade').value);
let contagem = document.querySelectorAll(".carrinho__produtos__produto").length;
//Verificação para saber se a quantidade é permitida
let quantidadeCampo = document.getElementById('quantidade').value;
if (quantidadeCampo === "") {
alert("Por favor, digite uma quantidade.");
return;
}
let quantia = parseInt(quantidadeCampo);
if (quantia <= 0) {
alert("A quantidade deve ser maior que zero.");
return;
}
//Calculo da multiplicação do valor
function subtotal(valorProduto,quantidade){
return valorProduto * quantidade;
}
let soma = subtotal(valorProduto,quantidade);
// Adicionando o produto ao carrinho
if(contagem > 5){
alert('Você atingiu o limite de itens no carrinho!')
return;
}
let listaDeCompras = document.getElementById('lista-produtos');
listaDeCompras.innerHTML = listaDeCompras.innerHTML + `<section class="carrinho__produtos" id="lista-produtos">
<section class="carrinho__produtos__produto">
<span class="texto-azul">${quantidade}x</span> ${produto} <span class="texto-azul">R$${valorProduto}</span>
</section>`;
totalGeral = totalGeral + soma
let valorTotal = document.getElementById('valor-total');
valorTotal.textContent = `R$ ${totalGeral}`;
document.getElementById('quantidade').value = 0;
}
function limpar(){
document.getElementById('lista-produtos').textContent = '';
document.getElementById('valor-total').textContent = 'R$ 0';
totalGeral = 0;
document.getElementById('quantidade').value = 0;
}
// Não tem como adicionar produto sem colocar uma quantidade
// Não tem como adicionar produto com a quantidade = 0 ou negativo
// Limite de 6 produtos para evitar bug visual no CSS de lista infinita
// Foram adicionados outros produtos
// Limpar zera o numero e quantidade também
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!