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?
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
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?
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.