Adicionar conteudo em lista de carrinho de compras com Javascript, Html e Css

Front-end
, , ,
#1

Ola, estou construindo um carrinho de compras com html, css e javascript. Estou usando o local storage para armazenar os objetos do meus produtos, quando adiciono um produto ao carrinho coloquei uma funcao para mostrar em outra pagina os meus produtos + a quantidade.

function mostrarCarrinho() {
var vetorCarrinho = listarItems();
var output = ""; //string para mostrar os items
for (var i in vetorCarrinho) {
    output += "<li>"+vetorCarrinho[i].nome+" "+vetorCarrinho[i].quantidade+"</li>";
}
$("#items-carrinho").html(output);//sobrescre tudo que tem nessa id

}

em seguida coloquei jquery para mostrar em outra pagina

//mostrar-itens

$(function(){
var output = $(this);
$(“mostrar-carrinho”).html(output);
mostrarCarrinho();
})

a pergunta entao seria, consigo adicionar meus produtos em outra pagina mostrando uma li com o meu array de produtos e suas respectivas quantidades, mas como eu faria para pegar a imagem dos seguintes produtos e ser adicionada na outra pagina junto com o nome e quantidade?

#2

já falou tudo kkk, POO, só precisa de um atributo para salvar url da imagem.

exemplo:

object.nome = carro;
object.urlFoto = //link da imagem

Assim bastaria apenas armazenar a imagem em algum servidor como o da amazon ou da google.

1 curtida
#3

Mas para cada item eu terei que armazenar cada imagem do produto? como coloco para mostrar a imagem daquele produto especifico? terei que carregar uma tag img com um novo atributo do meu objeto produtos quando adicionar ao carrinho?

#4

Seguindo o que foi mandando, eu pessoalmente faria desta forma:

<table>
     <tr>
         <th>CODIGO</th>
         <th>NOME</th>
         <th>QUANTIDADE</th>
         <th>FOTO</th>
      </tr>
   <tr>
    for (var i in vetorCarrinho) {
        output += "<td>vetorCarrinho[i].codigo<strong>" + vetorCarrinho[i].nome + "</strong> + "  " +   vetorCarrinho[i].quantidade + "  " + "
<figure>
      <img src" =  + vetorCarrinho[i].urlFoto + " alt = power/>"
     "<figcaption>" + vetorCarrinho[i].descricao + " ,  " + vetorCarrinho[i].preço + "</figcaption>"
</figure> + "</td>";
    }
   </tr>
</table>
    $("#items-carrinho").html(output);

como o objeto já foi armazenado, se tornara fácil recuperar, caso ele tenha algum valor único como Código ou ID usando local storage, eu ficava me perguntando a onde usaria isso quando li --", agora faz todo sentido.

JS
localStorage.setItem("id", Object);
document.getElementById("carrinho").innerHTML = localStorage.getItem("id");

Nota: No css ajuste os parâmetros visuais restantes, e isso é minha concepção, acredito que seja o caminho certo com a camada de conhecimento que tenho agora.