1

Bom dia pessoal. Tenho um carrinho onde gravo os items para fazer um orçamento. Até então consigo gravar no localStorage esse item do carrinho e persistir esses dados nesse mesmo item, podendo o usuário trocar de página, fechar o browser e etc..

Porém quando adiciono um segundo item ao carrinho não consigo manter cada seleção de cada item, somente do primeiro.

Imagem dos inputs inserir a descrição da imagem aqui

Código js:

var saveItemCart = function(){
var cart = {
      cores: document.getElementById("cor_add").value,
      qtd_gomos: document.getElementById("qtd_gomos").value,
      qtd_cores: document.getElementById("qtd_cores").value,
      quantidade: document.getElementById("quantidade").value,
      obs: document.getElementById("obs").value, 
    };  
    localStorage.setItem('cart', JSON.stringify(cart));  
}

  document.onchange = saveItemCart;

  if(document.getElementById('id{{$row->id}}')){
  if (localStorage.cart) {
  document.getElementById('cor_add').value = JSON.parse(localStorage.getItem('cart')).cores;
  }
  if (localStorage.cart) {
  document.getElementById('qtd_gomos').value = JSON.parse(localStorage.getItem('cart')).qtd_gomos;
}
  if (localStorage.cart) {
  document.getElementById('qtd_cores').value = JSON.parse(localStorage.getItem('cart')).qtd_cores;
}
  if (localStorage.cart) {
  document.getElementById('quantidade').value = JSON.parse(localStorage.getItem('cart')).quantidade;
}
  if (localStorage.cart) {
  document.getElementById('obs').value = JSON.parse(localStorage.getItem('cart')).obs;
}}else( localStorage.clear());

Imagem do LocalStorage inserir a descrição da imagem aqui

Como poderia definir pra cada item ter seus valores? Caso precisem de mais informações eu edito o post.

Obrigado.

3
  • Cada entrada no local storage deve ter um nome diferente, se você chamar todos de cart serão sobrescritos, modifique os nomes do valor do local storage e vá adicionando quantos objetos quiser ali.
    – Sabrina B.
    27/03/2019 às 13:02
  • Oi @SabrinaB. obrigado pela resposta. No geral o JS estaria certo? Entendi o que tu quis dizer, vou tentar colocar o ID que vem de cada produto.
    – adrib
    27/03/2019 às 13:06
  • Não encontrei problemas além da sobrescrita que mencionei.
    – Sabrina B.
    27/03/2019 às 17:25

5 Respostas 5

1

Não seria esse o caso de gravar um array ao invés de gravar um único objeto no localStorage?

var saveItemCart = function(){
  var cart = localStorage['cart'] ? JSON.parse(localStorage['cart']) : [];

  cart.push({
    cores: document.getElementById("cor_add").value,
    qtd_gomos: document.getElementById("qtd_gomos").value,
    qtd_cores: document.getElementById("qtd_cores").value,
    quantidade: document.getElementById("quantidade").value,
    obs: document.getElementById("obs").value, 
  });

  localStorage.setItem('cart', JSON.stringify(cart));  
}

Uma boa ideia seria gravar também um número identificador em cada item, dessa maneira fica fácil de retirar um item do carrinho quando precisar, ou mesmo incrementar a quantidade de um item que já existe.

6
  • Olá, e como eu setaria na variável dentro de cada item do carrinho? document.getElementById('cor_add').value = JSON.parse(localStorage.getItem('cores')[1]);
    – adrib
    27/03/2019 às 13:15
  • Você tem que fazer um for, mas mais importante, você precisa criar os elementos do DOM dinamicamente, porque ao meu ver no seu código só irá aparecer um item do carrinho, apesar do carrinho ter um número indefinido de itens.
    – Andre
    27/03/2019 às 13:21
  • Certo, quando diz criar dinamicamente os elementos do DOM vc quer dizer os id's que eu estou pegando? EX: cor_add_1 cor_add_2
    – adrib
    27/03/2019 às 13:37
  • Sim, isso é uma forma de fazer isso, mas o que eu quis dizer é que você precisa gerar esses elementos com JS.
    – Andre
    27/03/2019 às 13:40
  • Teria como me mostrar um exemplo?
    – adrib
    27/03/2019 às 13:49
1

Pegando conteúdo do LocalStorage e jogando num input:

let storageValue = JSON.parse(localStorage.getItem(myKey));
document.getElementById(myInput).value = storageValue;

Caso você tenha múltiplos valores somente pegue os resultados separadamente e siga esse exemplo

0

Olá. Você pode guardar os items em JSON como um array de JSONs. Para adicionar um novo item, você pode pegar todos os outros já adicionados e guardar num array, dar push do novo item no array e guardar no localStorage o array.

var saveItemCart = function(){
    var item = {
         cores: document.getElementById("cor_add").value,
         qtd_gomos: document.getElementById("qtd_gomos").value,
         qtd_cores: document.getElementById("qtd_cores").value,
         quantidade: document.getElementById("quantidade").value,
         obs: document.getElementById("obs").value, 
    };
    cart = localStorage.getItem('cart');
    cart = JSON.parse(cart);
    cart.push(item);
    cart = JSON.stringify(cart);
    localStorage.setItem('cart', JSON.stringify(cart));

}

1
  • Olá Lucas, isso serve para mais de um item também? Por exemplo eu adiciono dentro dos items um ID. Como poderia chamar um pra cada?
    – adrib
    27/03/2019 às 16:41
0

Você pode criar uma chave diferente para cada item e armazena-lo separadamente, ou pode guardar um JSON do carrinho dentro do localStorage e recupera-lo posteriormente.

Segue o exemplo do JSON:

var carrinho = [
{item1},
{item2},
...
];

localStorage.setItem("carrinho_key", JSON.stringify(carrinho));
3
  • Olá @vinicius, essa chave eu poderia criar com um for()?
    – adrib
    27/03/2019 às 13:38
  • Não precisa, quando você pegar o item da chave já vai vir todo o json na string, ai você pode partir ele usando um for e distribuir para os seus campos desejados. o código JSON.stringify(carrinho) transforma o seu vetor em string para que ele possa ser armazenado, vai ficar algo do tipo: '[{item1...}, {item2...}]', ai você pode transforma-lo em uma variável novamente ao recupera-lo do localStorage e converte-lo: obj = JSON.parse(texto local storage);
    – vinicius
    27/03/2019 às 13:47
  • você poderia dar uma exemplo com o meu código?
    – adrib
    27/03/2019 às 17:09
0

Acontece que tens um pequeno problema no código, deverias guardar a lista de itens do carrinho(em forma de array) e actualizar o item quando necessário e actualizar a lista, e sugiro que os itens tenham id ou sku para poder separar os itens

  1. Modifique para que o objecto do item tenha id, cor, qtd_gomos, qtd_cores, quantidade, obs

  2. Crie uma lista que serve para actualizar(adicionar, actualizar, remover itens) o cart que seja gravado no localStorage

3.Crie uma funcao pra gravar e buscar cart e tambem uma funcao para actualizar o(s) item(ns) dentro da lista e colocar no localstorage

// funcao para buscar itens no localStorage
var getCart = function() {
  return localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : [];
}

//funcao para gravar itens no localStorage
var setCart = function(cartItems){
  localStorage.setItem('cart', JSON.stringify(cartItems)); 
}

//funcao para verificar se o item ja existe no cart 
var hasItem = function(item) {
  var cart = getCart();
  if(!item.id)
    return false
  return cart.some(cartItem => item.id == cartItem.id )
}

//funcao para gravar item
var saveItemCart = function(){
  item = {
      id: document.getElementById("sku").value,//ou pode ser gerado na hora usando size
      cores: document.getElementById("cor_add").value,
      qtd_gomos: document.getElementById("qtd_gomos").value,
      qtd_cores: document.getElementById("qtd_cores").value,
      quantidade: document.getElementById("quantidade").value,
      obs: document.getElementById("obs").value, 
    }  
    var cart = getCart()
    if(hasItem(item)) {
    //condicao para actualizar item caso ja tenha sido gravado
      cart.forEach(cartItem => {
        if(cartItem.id == item.id){
          cartItem.cores = item.cores
          cartItem.qtd_gomos = item.qtd_gomos
          cartItem.qtd_cores = item.qtd_cores
          cartItem.quantidade = item.quantidade
          cartItem.obs = item.obs
        }
      })
    }else{
    //condicao param criar id caso nao exista nenhum no sistema
    if(!item.id)
      item.id = cart.length + 1
    
     //condicao para adicionar item caso nao tenha no cart  
      cart.push(item)
    }
    
    //instrucao para actualizar o cart no localStorage
    setCart(cart)
}

com isso ja é possível ter a lista de item e se necessário actualizar ou ate mesmo adicionar itens a lista

4
  • Olá Adelino, eu vou testar, logo mais eu respondo se deu certo.
    – adrib
    27/03/2019 às 14:24
  • Adelino, como faço para jogar nos inputs o que está no LocalStorage? Pode me explicar!
    – adrib
    27/03/2019 às 15:47
  • Desculpa nao entendi ao certo o que queres dizer com jogar? Queres alterar os dados é isso? @adrib 28/03/2019 às 5:24
  • Só tens que levar os dados do getCart() e fazer um for nos inputs, se quiseres ter uma resposta mais detalhada de como fazer isso, faça outra questão e coloque o teu HTML para podermos te ajudar 28/03/2019 às 5:33

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 .