Developing An "Add To Favourites" Button In PHP

Question

I'm creating a small website using PHP which is generally a site for showcasing the products of a certain shop. The site has the functions where a user can create his/her account, log in and then he/she should be able to favor add any product they like to their own wish list. Then the favored products should be displayed when they view their wish list (that can be managed).

I'm looking for a way where if a user click on the favourite button on a product, then the product should be favored without the page getting reloaded. I know we should use AJAX but how?

The websites I've given below have that feature I'm trying to explain (but they require to sign up though).

example one

example two

Note: Sorry if this is a very dumb question, I'm just a beginner :)

Answer 1

Write a simple script in php to add the item to the favorites, while doing that make the assumption that the item id will be passed with the $_REQUEST. This should be a short script that only adds the item to the favoritese and return a success or error, typically in json. Json can be encoded in php using json_encode() and can be decoded in js using JSON.parse().

This tidbit helped when I first started with Ajax. Ajax is just using js or jQuery from within the browser to open php pages without the actual webpage loading. This is super helpful because you can communicate data to and from the server without reloading the webpage.

Answer 2

Ajax in easy steps: 0. Add ajax code You can use mini ajax from Google:

Javascript:

function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);
if(v!=null)n.push(v)}return n};
ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e)
{try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e)
{return new XMLHttpRequest()}}};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};
var nv=function(e){if(e.name)return encodeURIComponent(e.name)
+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f)};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};

1. Create page element which uses ajax to replace own content Use mini ajax in HTML to replace content of ProdFav element with content generated by ajax.php (described below): <div id="ProdFav"> <a href="#fav" onclick="ajax.update(urlROOT + 'ajax.php?action=ProdFavs&prod_id=' + prod_id + '&state=on', 'ProdFav'); return false;"><span class="dis">Make favorite</span></a> </div>

2. Create php to serve new content ajax.php uses action and prod_id parameters to create new content for ProdFav html element:

PHP:

echo '
<a href="#fav"
  onclick="ajax.update(urlROOT + \'ajax.php?action=ProdFavs&prod_id=\' + '
   .intval($_GET['prod_id'])
   .' + \'&state=off\', \'ProdFav\'); return false;">
       <span class="dis">Remove favorite</span>
</a>';