Adicionar item aos favoritos com session e jquery

[ment0r 1]

Boa tarde amigos do forúm Imasters. Antes de mais nada, um feliz 2015 pra todos!

 

Agora vamos os negócios... rsrs. É o seguinte: estou desenvolvendo um site para imóveis em minha cidade. Analisando outros sites do gênero, percebi que alguns contam com uma página "favoritos", onde o usuário vê todos os imóveis que escolheu como favorito. Diante disso, resolvi implementar essa funcionalidade em meu site.

 

No layout seria assim: o usuário clica no botão e escolhe aquele imóvel, clicando novamente, ele retira o imóvel dos favoritos. (o id do imóvel servirá como parâmetro, enquanto a isso, tranquilo)

 

 

Alguém pode me ajudar. Sei usar perfeitamente Sessões em PHP, mas sou muito fraco em Jquery e acredito que não haja outra maneira de fazer sem usar Jquery. Ah, pretendo mostrar os imóveis escolhidos numa outra página com o sugestivo nome de "favoritos.php".

 

Muito obrigado a todos desde já e um grande abraço.

[angelorubin 142]

A lógica seria assim, ao clicar no botão (remover/adicionar favoritos) você pega o id do favoritos junto com o id do cliente e envia uma requisição jQuery Ajax para uma pagina que você irá denominar a seu gosto (por exemplo: modifica_favoritos.xxx).

 

Nesta pagina modifica_favoritos.xxx com a linguagem server-side que escolher (php, asp, etc) e com o id enviado via ajax você altera no banco o status do favoritos, retorna a requisição ajax e modifica o botão (remover/colocar).

 

OBS: Imagino que você já possua uma tabela no banco para modificar o status do favoritos.

[ment0r 1]

Olá angelorubin. Obrigado pela resposta, mas não era isso que eu pretendia fazer. Não quero usar tabela no banco pra isso, gostaria de fazer somente por sessão. Assim que o usuário fechasse a página, zeraria a sessão e numa outra consulta ele teria que escolher de novo e não teria salvo o que ele já escolheu na vez anterior. Por isso não haveria a necessidade do envio do id do usuário, somente o id do imóvel.

 

Eu até tenho uma lógica pra fazer, o problema é que sou muito fraco em JQuery/Ajax, praticamente só sei interpretar códigos já feitos, mas fazer, ainda não consigo.

 

Agradeço sua atenção.

[Electronic 124]

Se vc chegou a abrir o site http://jquery.com/ viu que na capa tem um exemplo de como usar o AJAX

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
  }
});

zipcode: 97201 é um exemplo de parâmetro e valor, e com esse nome que vc vai pegar o valor no outro arquivo com method GET. vc põe o id do imovel

 

no outro arquivo vc recupera o id do imóvel e põe na sessão

 

dentro de success: é o que vc vai fazer quando tudo deu certo - esconder o botão

[angelorubin 142]

É que não estou entendendo o motivo de colocar numa sessão e não fazer nada com a informação?

[Electronic 124]

É que não estou entendendo o motivo de colocar numa sessão e não fazer nada com a informação?

 

pois é

se a pessoa fechar a seção perde tudo

no mínimo um cookie ou outra maneira de não acontecer isso

[ment0r 1]

Muito obrigado amigos pela ajuda.

Vou explicar o motivo de não guardar as informações. Bom, no site haverá três maneiras de visualizar os imóveis (não haverá venda e nem intermediação pelo site, apenas uma "vitrine"): primeira, na busca; segunda, na página inicial; terceira, na página de cada imobiliária. Pois bem, o usuário pode num momento de pesquisa selecionar alguns imóveis num desses três tipos de visualização e depois de selecionar X imóveis, poderá ver todos na página favoritos.php. Fechando a página ele perde tudo para que numa segunda visita possa escolher outros imóveis sem ter que ficar "excluindo" os anteriores. Acreditem, não foi mal pensado, eu realmente quero fazer assim.

 

Agora em relação ao trecho que o Electronic passou, como eu disse, sou bem fraco em JQuery (preciso urgentemente dedicar um tempo para aprender mais sobre) então não entendi como usar esse trecho no que quero.

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
  }
});

O que é /api/getWeather e weather-temp? weather-temp seria a página onde trato os imóveis selecionado por id? Esse trecho vai em todas as páginas que podem selecionar itens?

 

Como podem ver, são muitas as dúvidas rsrs. Você(s) por gentileza poderiam ser mais específicos em relação ao uso?

 

Muuuito obrigado desde já e fico no aguardo de mais ajuda.

[Electronic 124]

O que é /api/getWeather e weather-temp? weather-temp seria a página onde trato os imóveis selecionado por id? Esse trecho vai em todas as páginas que podem selecionar itens?

 

Como podem ver, são muitas as dúvidas rsrs. Você(s) por gentileza poderiam ser mais específicos em relação ao uso?

 

Muuuito obrigado desde já e fico no aguardo de mais ajuda.

 

O trecho é um exemplo da sintaxe e tem dados de exemplo você põe os seus

url: você põe o nome do arquivo que vai receber o id e salvar na seção

 

essa linha é tambem só um exemplo que vc apaga

$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );

e é dentro de success: function( data ) { } que você poe algo a ser executado quando o ajax acontece com sucesso.

[ment0r 1]

Amigos, primeiramente desculpa pela demora, voltei a trabalhar e agora tenho que dividir meu tempo entre o emprego e esse projeto, mas enfim, vamos ao que interessa.

 

A página que conterá os imóveis que poderão ser 'favoritados' é a página busca.php e a página em que serão exibidos os imóveis escolhidos é favoritos.php

    $.ajax({
    url: "favoritos.php",
    data: {
    zipcode: $id_imovel
    },
    success: function( data ) {
    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
    }
    });

Na página busca.php, como eu sei que foi clicado na imagem addFav.png (eh ela que terá o $id_imóvel), tem algo como onClick?

Quando o usuário clica num imóvel e o coloca como favorito, eu não gostaria que já fosse para página favoritos.php, o usuário só visita o favoritos.php quando ele quiser.

Outra pergunta, esse trecho ajax acima, deve ser colocado na página busca.php não é?

Embora você já tenha dito que o 'sucess:' eh pra ser executado quando o ajax acontece com sucesso. Não entendi como utilizá-lo, uma vez que não quero ir direto para favoritos.php

success: function( data ) {
    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
    }

[angelorubin 142]

A pergunta é : Como você irá exibir as opções escolhidas pelo usuário posteriormente sem armazenar em algum lugar?

[ment0r 1]

Ai entra minha idéia inicial dita na primeira postagem: uso de SESSÕES.

[Electronic 124]

Na página busca.php, como eu sei que foi clicado na imagem addFav.png (eh ela que terá o $id_imóvel), tem algo como onClick?

 

sim, vc tem que pegar o evento do clique.

 

 

Quando o usuário clica num imóvel e o coloca como favorito, eu não gostaria que já fosse para página favoritos.php, o usuário só visita o favoritos.php quando ele quiser.

 

 

O usuário não vai a lugar nenhum, o envio e recebimento acontece por traz sem ele perceber, por isso o AJAX é legal

 

Outra pergunta, esse trecho ajax acima, deve ser colocado na página busca.php não é?

 

 

Na página que tiver o botão/link

 

 

Embora você já tenha dito que o 'sucess:' eh pra ser executado quando o ajax acontece com sucesso. Não entendi como utilizá-lo, uma vez que não quero ir direto para favoritos.php

 

 

quando a pessoa clicar no botão pra favoritar, o que acontece com o botão? vai aparecer alguma coisa na tela?

alguma coisa tem que mudar pro usuário saber que o que ele mandou fazer aconteceu, senão ele vai ficar clicando várias vezes achando que nada aconteceu.

 

apaga isso, é só um exemplo

$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );

[angelorubin 142]

Fiz um exemplo bem básico aqui com web storage, veja se é isso que precisa - https://imasters-angelorubin-1.c9.io/js/web-storage

 

Caso queira baixar os arquivos - https://mega.co.nz/#!dhMQEQCa!l7i-EOIfmctk3Zr-kxHGi5WdYta5yJ0VxusvCuyvChs

[ment0r 1]

Primeiramente desculpem a demora pra responder, voltei a trabalhar e essa primeira semana foi corrida demais. Enfim... Muito obrigado Electronic e angelorubin pela ajuda!

 

O exemplo básico que o angelorubin mandou descreve muito bem o que eu quero. Meu grande problema é meu conhecimento "interpretativo" de Ajax/Jquery, portanto pra fazer as mudanças que eu quero estou tendo grandes dificuldades.

 

Vou tentar explicar:

 

Tenho duas imagens que serão clicadas para adiconar ou remover um imóvel dos favoritos.

Essas duas têm o efeito de quando clicado em "Adicionar aos favoritos" e muda para "Remover dos favoritos". Óbvio.

 

Usei o esse código para fazê-lo:

function addRemFav(obj){
    if(document.getElementById(obj).alt == "addfav.png")
	{
		document.getElementById(obj).src = "../imagens/remfav.png";
		document.getElementById(obj).alt = "remfav.png";
    }else
	{
		document.getElementById(obj).src = "../imagens/addfav.png";
		document.getElementById(obj).alt = "addfav.png";
	}
}

E essa tag chama a função:

<img src="../imagens/addfav.png" alt="addfav.png" id="'.trim($ImovelArray['id']).'" onClick="addRemFav(id)" />

O id da tag <img> recebe o id do imóvel que consta no banco. Minha dúvida é: qual alteração eu devo fazer no código passado pelo angelorubin para encaminhar para página favoritos.php o id do imóvel?

 

Muitíssimo obrigado desde já e saibam que estou lendo bastante a respeito, mas como sabem não se aprende isso do dia pra noite kkkkk

[Electronic 124]

Vc ta confundindo

foi citado duas soluções diferente, do electronic e angelorubin

 

se vai fazer com webstorage entao nao vai precisar da página favoritos.php

leia o link que ele passou, onde tem exemplos.

[ment0r 1]

Não estou confundido não caro Eletronic. Baixei o exemplo que o amigo angelorubin disponibilizou e lá há sim um favoritos.php. Como vc pode ver no print abaixo.

 

Como ele passou um exemplo já funcionando, achei melhor usá-lo. Como já disse algumas vezes, sou muito fraco em ajax/jquery e digamos, não tenho tempo de aprender a linguagem pra utilizar nisso que eu quero. Preciso terminar esse projeto o quanto antes e depois sim, focar em aprender de fato essa "tecnologia".

 

Agradeço sua atenção Eletronic.

[Electronic 124]

um dos links que ele passou foi esse web storage, nunca usei, e pelo que é mostrado, não precisa de nenhum arquivo php é tudo por JavaScript

[angelorubin 142]

@eletronic na verdade eu utilizei este favoritos.php para poder exibir os favoritos que foram armazenados pelo user no locaStorage, se ele quiser pode ser exibido até na mesma página.

 

@mentor eu arrumei o exemplo com a sua imagem, veja - https://imasters-angelorubin-1.c9.io/js/web-storage

[ment0r 1]

@angelorubin primeiramente muito obrigado pela ajuda amigo e desculpe pelo tempo sem responder. Estou trabalhando demais da conta e esse meu projeto só faço no tempo livre. Pra ajudar, bati o carro, tive que comprar peças pra um cliente, ou seja, o pouco tempo livre que tenho, acabei gastando, mas enfim...

 

O exemplo que você postou acima era exatamente o que eu queria. Matou o assunto. Mas por uma falha gigantesca da minha parte, não salvei seu exemplo e agora ele já não está mais disponível.

 

Peço desculpas, mas vc não poderia colocar denovo o link para eu dar sequência no meu projeto? E desde já, meu MUITO obrigado.

[angelorubin 142]

Olá,

Como é um host free eles desativam de tempo em tempo, mas eu reativei para você poder pegar o exemplo.

https://imasters-angelorubin-1.c9.io/js/web-storage

 

Até.