mauricio baroni
-
Posts
1 -
Cadastrado em
-
Última visita
-
Boa noite, sou novo no fórum e estou com algumas duvidas. Estou realizando um trabalho na faculdade no qual devo montar uma loja virtual. Os produtos já estão em um servidor fornecido pelo professor. A primeira parte do trabalho está feita, que era pegar os produtos do servidor e colocá-los no site, montando o layout. O problema está na segunda parte, onde preciso adicionar os produtos no carrinho, não sei como fazer isso . Deve ser feito com o AJAX. Espero que me ajudem, obrigado. (html em anexo). código: <DOCTYPE! html> <html> <head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <style type="text/css"> body{ background-color: #2F4F4F; } #cabecalho{ background-color: #8B4C39; top:0; position: fixed; width: 100%; left: 0px; font-size: 20px; color: #FFFFE0; font-family: ; display: inline; display: fixed; z-index: 2; } #links{ list-style: none; text-align: center; padding-right: 120px; } .link{ display: inline; padding: 10px; background-color: #E9BE01; color: black; border:none; text-align: center; font-family: arial; } #produto,#inicio{ padding-top: 60px; color: white; width: 100%; float: left; text-align: center; } </style> </head> <body> <div id= "cabecalho" > <ul id="links"> <input class="link" id="home" type= "button" value="TODOS OS PRODUTOS"> <input class="link" id="cozinha" type= "button" value="COZINHA"> <input class="link" id="quarto" type= "button" value="QUARTO"> <input class="link" id="sala" type= "button" value="SALA"> <input class="link" id="carrinho" type= "button" value="CARRINHO"> </ul> </div> <div id="produto"> </div> <div id="inicio"> <h1>bem vindo ao site, clique nos botões acima para ser redirecionado a categoria desejada</h1> </div> <script type="text/javascript"> $(".link").click(function () { var data; var id = $(this).attr('id'); //pega a id do botao if(id == "cozinha" ) { $("#produto").empty(); data =1; ajax(); }else if (id=="quarto" ){ $("#produto").empty(); data=2; ajax(); }else if (id =="sala" ) { $("#produto").empty(); data=3; ajax(); }else if (id =="home" ){ $("#produto").empty(); for(var i=1;i<=3;i++){ data= i; ajax(); } } function ajax() { $("#inicio").css("display","none"); $.ajax({ url: "http://********.com.br/loja/lojaVirtual.php", method: "GET", dataType:"jsonp", data:{categoria: data}, success: function(resposta){ for(var i=0; i<=resposta.length;i++ ) { $("#foto").css("margin-left", "50px"); $(".prod").css("border", "2px solid black"); $(".prod").css("width", "30%"); $(".prod").css("text-align", "center"); $(".prod").css("float", "left"); $(".prod").css("height", "60%"); $(".prod").css("margin-top", "10px"); $(".prod").css("overflow", "auto"); $(".prod").css("margin-left", "10px"); $(".prod").css("display","absolute"); //botao comprar $(".comprar").css("padding", "5px"); $(".comprar").css("border", "none"); $(".comprar").css("background-color", "#077A24"); $(".comprar").css("color", "white"); var prodDaVez = "<div id= 'produto" +resposta.idProduto +" '>"; prodDaVez+= "<div class= 'prod'>"; prodDaVez +="<p >nome: " + resposta.nome + "</p>"; prodDaVez +="<img id='foto' width = '100' src='" + resposta.urlFoto + "'>"; prodDaVez +="<p > descricao: " + resposta.descricao + "</p>"; prodDaVez+= "<input class='comprar'' type= 'button' value='comprar'>" prodDaVez+="</div>"; prodDaVez+="</div>"; $("#produto").append(prodDaVez); } }, error: function(erro) { console.log(erro); } }); } }) </script> </body> </html> wwww.zip wwww.zip
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais