Utilizei uma abordagem um pouco diferente utilizando o conceito de objeto para criar o meu carrinho. Aceito sugestões de melhoria.
Fiz o meu com a utilzação de funções de criação de elemento e adicionar classes para listar em tela os meus produtos.
let produtoSelect = document.getElementById("produto");
let quantidadeProdutoSelect = document.getElementById("quantidade");
let carrinho = document.getElementById("lista-produtos");
let valorTotal = document.getElementById("valor-total");
let listaValorTotal = [];
quantidadeProdutoSelect.value = "1";
function adicionar() {
let produtosString = produtoSelect.value;
let qtdProduto = quantidadeProdutoSelect.value
? quantidadeProdutoSelect.value
: 1;
let arrayDeStringDividida = produtosString.split("- R$");
mostrarProdutosNaTela(criaProduto(arrayDeStringDividida, qtdProduto));
alterarValorTotal(listaValorTotal);
}
function mostrarProdutosNaTela(dadosDoProduto) {
let section = document.createElement("section");
section.classList.add("carrinho__produtos__produto");
let spanQuantidadeProduto = document.createElement("span");
spanQuantidadeProduto.innerText = `${dadosDoProduto[0].quantidade}x `;
spanQuantidadeProduto.classList.add("texto-azul");
let spanProduto = document.createElement("span");
spanProduto.innerText = dadosDoProduto[0].produto;
let spanPrecoProduto = document.createElement("span");
spanPrecoProduto.innerText = `R$${dadosDoProduto[0].preco}`;
spanPrecoProduto.classList.add("texto-azul");
section.appendChild(spanQuantidadeProduto);
section.appendChild(spanProduto);
section.appendChild(spanPrecoProduto);
carrinho.appendChild(section);
quantidadeProdutoSelect.value = "1";
}
function criaProduto(arrayDeStringDividida, qtdProduto) {
let preco = parseInt(arrayDeStringDividida[1]);
let dadosDoProduto = [
{
produto: arrayDeStringDividida[0],
preco: preco,
quantidade: parseInt(qtdProduto),
total: qtdProduto * preco,
},
];
listaValorTotal.push(dadosDoProduto[0].total);
console.log(listaValorTotal);
return dadosDoProduto;
}
function alterarValorTotal(arrayValores) {
let valorTotalDosProdutos = 0.0;
arrayValores.forEach((valor) => {
valorTotalDosProdutos += valor;
});
valorTotal.innerText = `${parseFloat(valorTotalDosProdutos).toLocaleString(
"pt-bt",
{ style: "currency", currency: "BRL" }
)}`;
}
function limpar() {
carrinho.querySelectorAll(".carrinho__produtos__produto");
carrinho.querySelectorAll(".carrinho__produtos__produto").forEach((item) => {
item.remove();
});
valorTotal.innerText = "R$0,00";
quantidadeProdutoSelect.value = "1";
}