Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida carrinho de compras. Produto no carrinho muda quando dou F5 na página

Estou fazendo um carrinho de compras para meu site de e-commerce fictício, porém estou com um problema. Quando adiciono um produto ao carrinho, e dou f5 na página, ele troca o produto em que eu cliquei pelo primeiro produto da lista.

Mesmo quando eu dou reload na página, o item que fica salvo no localStorage é o mesmo que eu cliquei, por isso achei estranho. Aqui está o código:

https://github.com/vkindrat/vkindrat.github.io/tree/master/site-loja http://vkindrat.github.io/site-loja/test.html

function adicionaAoCart(title,price){


    let linhaCart = document.createElement("div")
    let itensCart = document.getElementsByClassName("itens-cart")[0]
    linhaCart.classList.add("linha-cart")
    let itemNomeCart = itensCart.getElementsByClassName("cart-item-title")
    for(i = 0; i < itemNomeCart.length; i++){
        if(itemNomeCart[i].innerText == title){
            alert("Este item ja foi adicionado ao carrinho.")
            return

        }
    }

    let conteudoCart = `
                        <div class="cart-item cart-column">
                            <span class="cart-item-title">${title}</span>
                        </div>
                        <span class="cart-price cart-column">${price}</span>
                        <input class="cart-quantity-input" type="number" value="1">
                        <button class="btn btn-danger" type="button">X</button>
                    </div>
                    `
                    linhaCart.innerHTML = conteudoCart;
    itensCart.append(linhaCart)
    linhaCart.getElementsByClassName("btn-danger")[0].addEventListener("click", removeCartItem)
    linhaCart.getElementsByClassName("cart-quantity-input")[0].addEventListener("change", quantityChanged)

    var itensArray = []
    let itens = {title,price}

    itensArray.push(itens)

    localStorage.setItem("itens", JSON.stringify(itensArray))


}



function adicionaDaStorage(title, price){
    let linhaCart = document.createElement("div")
    let itensCart = document.getElementsByClassName("itens-cart")[0]
    linhaCart.classList.add("linha-cart")
    let itemNomeCart = itensCart.getElementsByClassName("cart-item-title")





    let conteudoCart = `
                        <div class="cart-item cart-column">
                            <span class="cart-item-title">${title}</span>
                        </div>
                        <span class="cart-price cart-column">${price}</span>
                        <input class="cart-quantity-input" type="number" value="1">
                        <button class="btn btn-danger" type="button">X</button>
                    </div>
                    `
                    linhaCart.innerHTML = conteudoCart;
    itensCart.append(linhaCart)
    linhaCart.getElementsByClassName("btn-danger")[0].addEventListener("click", removeCartItem)
    linhaCart.getElementsByClassName("cart-quantity-input")[0].addEventListener("change", quantityChanged)



}


window.onload = () => {

    var price = document.getElementsByClassName("price")[0].innerText
     var title = document.getElementsByClassName("nome-produto")[0].innerText
    if(localStorage.hasOwnProperty("itens")){

    var asd = JSON.parse(localStorage.getItem("itens"))
    adicionaDaStorage(title, price)


    }

    updateCartTotal()
}
3 respostas
solução!

Boa noite, Vitor! Como vai?

Veja o seguinte trecho da função adicionaAoCart():

var itensArray = []
let itens = {title,price}

itensArray.push(itens)

localStorage.setItem("itens", JSON.stringify(itensArray))

Veja que nele vc sempre cria um array vazio, adiciona o novo item e depois salva o array no localStorage. Portanto, o item salvo no localStorage sempre será o último selecionado!

Para resolver isso, vc pode criar um array de itens a partir do que já estiver salvo no localStorage ou, caso não tenha nada salvo ainda, criar um novo array vazio:

const itensJSON = localStorage.getItem('itens');
const itensArray = JSON.parse(itensJSON) || [];
const itens = {title,price};

itensArray.push(itens);

localStorage.setItem("itens", JSON.stringify(itensArray));

Por fim, algumas dicas! Codifique sempre utilizando palavras numa mesma língua! Não é boa prática misturar português com inglês. Dê preferência por utilizar const e let em vez de var. Por fim, sempre lembre da boa prática de colocar o ponto e vírgula ao final de cada linha de comando!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Olá Gabriel, tudo certo e por aí?

Testei sua solução mas o problema estava persistindo. O item salvo no localStorage era o mesmo em que eu clicava, mas acredito que ele salvava o errado pois eu declarei as variáveis title e price de forma errada, eu deveria ter declarado-as a partir do item salvo no localStorage, e eu estava pegando o title e price direto no document através da função onload. Consegui chegar a uma solução.

window.onload = () => {
    if(localStorage.hasOwnProperty("itens")){
    let itemStorage = JSON.parse(localStorage.getItem("itens"))
    console.log(itemStorage)



    for(i = 0; i<itemStorage.length; i++){
        let itemStorageTitle = itemStorage[i].title
        let itemStoragePrice = itemStorage[i].price
        adicionaDaStorage(itemStorageTitle, itemStoragePrice)
    }




    }

    updateCartTotal()
}

Porém, a sua solução deu certo depois que eu arrumei essa função onload. Eu precisei criar um array único para todos os itens que eu ia adicionando ao localStorage. No caso dessa linha aqui:

const itensArray = JSON.parse(itensJSON) || [];

Essa parte do || [] não ficou muito claro pra mim. Ele faz a mesma função de um if? Se não existe array no localStorage ele faz um novo?

Enfim, obrigado pela resposta e pelas dicas!

Opa, Vitor! Tudo ótimo por aqui!

Que bom que conseguiu resolver o seu problema!

Essa parte do || [] não ficou muito claro pra mim. Ele faz a mesma função de um if? Se não existe array no localStorage ele faz um novo?

Em relação a sua pergunta, é exatamente isso que vc pensou! Se existir algo no localStorage com a chave 'itens' então a variável itensArray receberá esse conteúdo. Caso contrário, receberá um novo array! Esse é um recurso bastante utilizado no mundo JS para evitar a escrita de um if! Então já guarde esse novo utensílio no cinto de utilidades, cangaceiro!

Grande abraço e bons estudos, meu aluno!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software