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

Dúvida JSON, localStorage

Estou fazendo um site ficticio e-commerce, fiz o sistema de carrinho, porém agora não sei como eu adiciono ao localStorage cada item do carrinho, pra ficar salvo quando eu dou refresh ou fecho a página.

Ta bem confuso isso pra mim, todo lugar que eu vou aprender sobre JSON e localStorage, eu não consigo traduzir os exemplos para o meu projeto. Aqui está o código.

let cartArray = [];

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 já 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)

                cartArray.push(itensCart)

                localStorage.setItem('itens', JSON.stringify(cartArray))
                const data = JSON.parse(localStorage.getItem('itens'))
                console.log(cartArray)
        }
2 respostas
solução!

Vitor, boa tarde!

No curso de Javascript 3 temos uma aula que vai lhe ajudar

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-3/task/20270

Veja esse e os dois videos depois e você terá uma boa base pra continuar seu projeto!

Espero ter ajudado e bons estudos!

valeu!