-2

Estou tentando formas de fazer um carrinho de compras funcional

Meu carrinho de compras fica alocado no localStorage. O botão adicionar produtos funciona perfeitamente. Porém, gostaria de fazer um push condicional, caso já exista o mesmo produto dentro do array de objetos, ele incremente +1 quantidade e NÃO criar um novo objeto, evitado gerar um objeto repetido, para que assim eu possa renderizar a página com os produtos selecionados x quantidade de cada.

Por exemplo:

Produto Quantidade
iPad 1
TV 1
Celular 2
  • O que preciso fazer?
  • Tentei usando filter, find, includes. Mas não consigo aplicar no minhas ideias no código.
<!-- a função é um onclick de um produto(objeto). -->
<button onclick="addCarrinhos('<%= produtos.nome %>', document.getElementById('qtd').value, '<%= produtos.valor %>','<%= produtos.id %>')">Adicionar ao Carrinho</button>
function addCarrinhos(produto, qtd, valor, id) {

//neste bloco, eu capturo os valores do meu objeto
    const produtos = {
        nomeProduto: produto,
        quantidade: qtd,
        valorProduto: valor,
        id: id
    }

//aqui verifico se está em branco, mas irei retirar depois, por que é inutil no meu codigo
    if (produtos === '') {
        alert('é necessário informar')

//neste bloco ele adiciona o produto caso o valor de localStorage seja nulo convertendo para string
    } else {
        if (localStorage.getItem('produtos') === null) {
            let listaProdutos = [produtos]
            localStorage.setItem('produtos', JSON.stringify(listaProdutos));

//neste bloco eu transformo  em objeto a string alocada no localStorage com o parse
        } else {
        let listaProdutos = JSON.parse(localStorage.getItem('produtos'));
//aqui faço push do novo produto pra dentro de listaProdutos            
            listaProdutos.push(produtos);
//neste bloco faço um map, para retornar um novo array convertendo algumas strings para inteiros
            let novoObjeto = Object.assign(listaProdutos.map(e => {
                e.nomeProduto = e.nomeProduto
                e.quantidade = parseInt(e.quantidade)
                e.valorProduto = parseInt(e.valorProduto)
                e.id = parseInt(e.id)

                return e
            }))
//aqui eu crei um novo array, que vai conter o retorno do novoObjeto
            let novos = []
            novos.push(novoObjeto)
        }
//neste bloco adiciono no localStorage, o novo array
        localStorage.setItem('produtos', JSON.stringify(novos[0]))
        console.log('push funcionou')
    }
}
5
  • Já rodou no console do seu navegador? apresentou algum erro? coloquei sua função para rodar no meu e apresentou alguns erros, para que possamos lhe ajudar, nos dê mais detalhes (veja como criar um Exemplo Mínimo, Completo e Verificável)
    – gleidson
    Commented 24/06/2022 às 4:30
  • Olá amigo, sim eu rodo a função tranquilamente. Vou comentar o que cada bloco faz no comentario acima. Commented 24/06/2022 às 5:25
  • Creio que o erro era a falta do "produtos" em: let listaProdutos = JSON.parse(localStorage.getItem('produtos')); Commented 24/06/2022 às 5:52
  • 2
    Não use o localStorage, mantenha o carrinho de compras no servidor. O trivial hoje é utilizar múltiplos dispositivos por exemplo eu uso o desktop ou notebook para escolher os itens e finalizo compra com o celular. Se carrinho de compras ficar no localStorage é publico a quem entrar na página a partir do dispositivo esteja logado ou não, será compartilhado entre todos os diferentes login feitos no site a partir do dispositivo, não poderá ser utilizado em outros dispositivos e está sujeito aos limites, restrições de memória e politicas impostas pelo o OS ao localStorage. Commented 24/06/2022 às 11:48
  • Olá augusto boa taarde, tudo bem? Poderia me dar um exemplo de usar servidor? Originalmente eu tinha intençao de usar o carrinho no banco de dados, mas ainda não aprendi a criar um usuaario temorario. Poderia me encaminhar por favor? Ou algum lugar aqui dentro do stack, e afins? Commented 24/06/2022 às 20:50

1 Resposta 1

-3

Você está esquecendo de VALIDAR antes de inserir!

É de extrema importância a validação dos campos, variáveis, etc antes de inseri-los no banco de dados, ou como no seu caso, no localStorage.

O hábito do mal uso das propriedades e funções do JavaScript é que faz você pecar na hora de aplicar seu código! Vai por mim, experiência própria! sair usando as funções e propriedades sem ao menos saber COMO ELAS FUNCIONAVAM!!

Por isso, sugiro que veja exemplos do uso do map e Object.assign. Os aproveite bastante, veja seus parâmetros, USE E ABUSE da documentação da MDN isso lhe trará uma visão massa! Pois assim você saberá como e quando utiliza-las. (também sugiro que NÃO deixe de ver Como criar um Exemplo Mínimo, Completo e Verificável além de evitar fechamentos e negações, faz com que possamos lhe ajudar com sua dúvida mais rápido!)


Seguindo conforme sua pergunta...

Criei uma variável responsável por verificar se já existe ou não um produto dentro do array de produtos. Fiz o uso do filter retornando um valor booleano.

let checarSeExiste = listaProdutos.filter(item => 
                (item.produto === produto)).length > 0; // retorna true ou false

Portanto, realizei alguns ajustes no seu código...

Para rodar no console do meu navegador, o mesmo ficou assim:

// alterei o nome da função para entrar no contexto de adição de produtos!
function addProduto(produto, quantidade, valor) { // alterei a nomenclatura dos parâmetros para facilitar a leitura do código..
    const produtos = {
        produto:produto,
        quantidade:quantidade,
        valor:valor
    };
    // aqui o método vai retornar somente as chaves (ou melhor os produtos) falso caso não exista!
    if (!Object.keys(produtos).length) {
        alert("é necessário informar!");
    } else {
        // verifica se existe o item no localStorage
        if (localStorage.getItem("produtos") === null) {
            // cria um item com o objeto indexado (passa a ser uma chave filho)
            localStorage.setItem("produtos", JSON.stringify([produtos])); 
        } else {
            // obtêm o conteúdo do item produtos do localStorage
            let listaProdutos = JSON.parse(localStorage.getItem("produtos"));
            // percorre todo o array e verifica se existe um produto semelhante ao que foi passado no parâmetro da função.
            let checarSeExiste = listaProdutos.filter(item => 
                (item.produto === produto)).length > 0; // retorna true ou false

            // valida se o retorno booleano é true (caso sim, dar continuidade)
            if (checarSeExiste) {
                // percorre todo o array porém, condiciona a um possível produto existente, se sim, ele vai retornar
                // um novo array com o novos valores, isto é, a quantidade (observação: serve para qualquer propriedade)
                listaProdutos.map(items => {
                    if (items.produto === produto)
                        items.quantidade += Number(quantidade); // soma o valor existente mais a quantidade repassada na função
                    return items;
                });
            } else {
                // não existindo ele adiciona!
                listaProdutos.push(produtos);
            }

            // e por fim, não incrementa, mas sobrescreve todo o conteúdo presente no item produtos do localStorage
            localStorage.setItem("produtos", JSON.stringify(listaProdutos));
        }
    }
}

Veja o resultado: teste o código

7
  • Olá meu amigo, tudo beleza? Muito obrigado pela dica vou rodar o codigo daqui a pouco pq hoje o dia foi punk pra mim, e não consegui entrar no pc ainda. Commented 24/06/2022 às 20:52
  • Tudo bem, qualquer dúvida estou a disposição, se a solução serviu para vc, considere votar +1 na resposta!
    – gleidson
    Commented 25/06/2022 às 0:24
  • Opa amigo, teste o codigo, e alterei apenas nesse trecho: listaProdutos.map(items => { if (items.produto === produto) items.nomeProduto = items.nomeProduto items.quantidade = parseInt(items.quantidade) items.valor = parseInt(items.valor) items.id = parseInt(items.id) items.quantidade += Number(quantidade); // soma o valor existente mais a quantidade repassada na função return items; }); Commented 25/06/2022 às 3:47
  • No codigo que voce me passou, ele estava passando como string o valor. Então coloquei, o parseint. Mas é isso mesmo que eu queria, o amigo de cima me disse que existe outro meio melhor para salvar essa informação, voce sabe qual seria? Falta apenas arrumar o carrinho e comunicar com o banco de dados quando o usuario fechar o pedido. Commented 25/06/2022 às 3:50
  • 1
    Fiz isso agora, sou novo no forum. Muito obrigado de verdade abriu um leque gigante pra mim essa validação com filter, ficou excelente!! Commented 25/06/2022 às 17:32

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 .