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()
}