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