1
resposta

[Sugestão] Projeto Carrinho de Compras

Olá! Segue minha solução.

Incluí nomes, quantidades e valores dos produtos em um array fora da função e adicionei uma condicional para não incluir novas linhas caso o produto já esteja no carrinho.

Também incluí uma mensagem de confirmação na função limpar() e um alerta de "quantidade zero" para não "incluir" itens zerados.

//Quantidades e valores iniciais
let bdProdutos = [["Fone de Ouvido - R$ 100","Fone de Ouvido",0,100,0],["Celular - R$ 1400","Celular",0,1400,0],["Oculus VR - R$ 5000","Oculus VR",0,5000,0],["Microfone ATR - R$ 1800","Microfone ATR",0,1800,0]];

let totalCarrinho = 0;

function adicionar() {
    let carrinhoAtual = document.getElementById('lista-produtos').innerHTML;
    let totalAtual = document.getElementsByClassName('carrinho__total').item(0).innerHTML;
    let produto = document.querySelector('#produto').value;
    let quant = parseInt(document.querySelector('#quantidade').value);

    let pos = bdProdutos.map(function(p){return p[0];}).indexOf(produto);
    
    let nomeProduto = bdProdutos[pos][1];
    let precoUnitario = bdProdutos[pos][3];
    let quantAnt = bdProdutos[pos][2];
    let valorAnt = bdProdutos[pos][4];

    let quantNova = quantAnt + quant;
    let valorNovo = valorAnt + quant * precoUnitario;
    let totalNovo = totalCarrinho + quant * precoUnitario;

    if(quant > 0) {

        if(carrinhoAtual.indexOf('vazio') != -1){
            carrinhoAtual = "";
        }
    
        if (carrinhoAtual.indexOf(nomeProduto) != -1) {

            let textoAntigo = `<span class="texto-azul">${quantAnt}x</span> ${nomeProduto} <span class="texto-azul">R$ ${valorAnt}</span>`;
            let textoNovo = `<span class="texto-azul">${quantNova}x</span> ${nomeProduto} <span class="texto-azul">R$ ${valorNovo}</span>`;
            carrinhoAtual = carrinhoAtual.replace(textoAntigo, textoNovo);

        }else{

            let textoNovo = `<section class="carrinho__produtos__produto"><span class="texto-azul">${quantNova}x</span> ${nomeProduto} <span class="texto-azul">R$ ${valorNovo}</span></section>`;
            carrinhoAtual = carrinhoAtual.concat(textoNovo);          
        }
        
        document.getElementById('lista-produtos').innerHTML = carrinhoAtual;
        let textoTotalNovo = `Total: <span class="texto-azul" id="valor-total">R$ ${totalNovo}</span>`;
        document.getElementsByClassName('carrinho__total').item(0).innerHTML = textoTotalNovo;
        
        bdProdutos[pos][2] = quantNova;
        bdProdutos[pos][4] = valorNovo;
        totalCarrinho = totalNovo;
        document.getElementById('quantidade').value = "1";
    
    }else{alert("Quantidade ZERO!!!")}
}

function limpar () {

    if(confirm('Tem certeza que quer esvaziar o carrinho?\n\nEsta operação não pode ser desfeita!')){

        document.getElementById('lista-produtos').innerHTML = '<section class="carrinho__produtos__produto"><span class="texto-azul"></span> Carrinho vazio! <span class="texto-azul"></span></section>';
        
        document.getElementById('produto').value = "Fone de Ouvido - R$ 100";
        document.getElementById('quantidade').value = "1";

        document.querySelector('#valor-total').innerHTML = "R$ 0";

        bdProdutos = [["Fone de Ouvido - R$ 100","Fone de Ouvido",0,100,0],["Celular - R$ 1400","Celular",0,1400,0],["Oculus VR - R$ 5000","Oculus VR",0,5000,0],["Microfone ATR - R$ 1800","Microfone ATR",0,1800,0]];

        totalCarrinho = 0;
    }
}

Abraços!

1 resposta

Oi, Gabriel! Tudo bem?

Excelente código, parabéns pelo projeto! Espero que esteja gostando do curso! Colocar em execução as atividades propostas pelo professor em aula é uma prática muito importante para internalizarmos o conteúdo. Caso tenha ficado alguma dúvida em relação ao curso ou atividade, sinta-se à vontade em comunicar, estou à disposição e ficarei super feliz em poder ajudar!

Um forte abraço e bons estudos!