XMLHttpRequestで送受信する部分は、いろいろなページで解説がされています。中身は、それらとほとんど変わりません。ただ、配列を使うバージョンはなかったように思いますので、その分だけ若干複雑になっています。
1.商品詳細ページの任意の場所に設置
<a href="#" onClick="JavaScript:set_wish_cookie(1);return false">ほしい物リストに追加する</a>
2.JavaScript-wish.js
//XMLHttpRequestオブジェクト生成
function createHttpRequest(num) {
if(window.XMLHttpRequest) {
//IE7 IE8 Firefox Opera Safari
httpObj[num] = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
try {
//MSXML2以降所
httpObj[num] = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//旧MSXML
httpObj[num] = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
httpObj[num] = null;
}
}
}
else {
httpObj[num] = null;
}
}
//タイムアウト処理
function timeout(n) {
httpObj[n].abort();
document.getElementById("wish"+n).innerHTML = strPid[n] + " （Timeout）";
}
//ファイルにアクセスし受信内容を確認
function wish_requestFile(num,method,async,pid) {
createHttpRequest(num);
if(httpObj[num]) {
timerID[num] = setTimeout('timeout("' + num + '")',30000);//タイムアウト30秒
fileName[num] = "http://www.hogehoge.com/?pid="+pid;
httpObj[num].open(method,fileName[num],async);
httpObj[num].onreadystatechange = function() {
if(httpObj[num].readyState==4) {//受信完了後の処理
clearTimeout(timerID[num]);//タイムアウト解除
if(httpObj[num].status == 200) {//正常
strRes[num] = httpObj[num].responseText;
//ほしい物リスト表示
if(strRes[num].match(/現在、この商品は扱っておりません。/igm) == null) {
//在庫ありの場合の処理
document.getElementById("wish"+num).innerHTML ='～' + '<a href="#" onClick="JavaScript:del_wish_cookie(' + pid + ');location.reload();return false">リストから削除</a>';
}
else {
//在庫なしの場合の処理
document.getElementById("wish"+num).innerHTML ="現在、商品ID "+ pid +" は扱っておりません。次回表示時にリストから自動的に削除されます。";
del_wish_cookie(pid);
}
}
else if(httpObj[num].status == 404) {//404エラー処理
document.getElementById("wish"+num).style.display = "none";
}
else {//それ以外
document.getElementById("wish"+num).innerHTML = "server status " + httpObj[num].status;
}
}
}
httpObj[num].send(null);
}
}
//Cookie部分削除
function del_wish_cookie(strNum) {
strCookie=$.cookie('wish');
strNum="!"+strNum+"!";
re = new RegExp(strNum);
if(strCookie.search(re)!=-1) {
if(strCookie.indexOf(strNum)==0) {
strCookie=strCookie.slice(strNum.length);
}
else {
strCookie=strCookie.slice(0,strCookie.indexOf(strNum)) + strCookie.slice(strCookie.indexOf(strNum)+strNum.length);
}
$.cookie('wish', strCookie ,{expires:365});
}
}
//Cookieセット
function set_wish_cookie(i) {
if(i==1) {//追加
strURL=location.href;
strCookie=$.cookie('wish');
if(strCookie==null) {
strCookie="";
}
else {
loop=strCookie.match(/!/g)
if(loop!=null && loop.length/2 >= 20) {
window.alert("これ以上追加することはできません（最大20点まで）");
return;
}
}
if(strURL.indexOf("?pid=")!=-1) {
strURL=strURL.slice(strURL.indexOf("?pid=")+5);
strURL="!"+strURL+"!";
re = new RegExp(strURL);
if(strCookie==null || strCookie=="") {
strCookie=strURL;
$.cookie('wish', strCookie,{expires:365});
window.alert("ほしい物リストに追加しました");
}
else if(strCookie.search(re)==-1) {
strCookie=strCookie+strURL;
$.cookie('wish', strCookie,{expires:365});
window.alert("ほしい物リストに追加しました");
}
else {
window.alert("この商品はすでに追加されています");
}
}
}
else {//削除
$.cookie('wish','',{expires:-1});
}
}
//ほしい物リスト表示
function load_wishlist() {
//Cookie読み込み
httpObj = new Array();
strRes = new Array();
timerID = new Array();
fileName = new Array();
strPid = new Array();
strCookie=$.cookie('wish');
if(strCookie==null) {
strCookie="";
}
loop=strCookie.match(/!/g);
if(loop!=null) {
if(loop.length/2>20) {//最大20点まで
N=20;
}
else {
N=loop.length/2;
}
}
else {
N=0;
}
for(i=1;i<=N;i++) { strPid[i]=strCookie.substring(strCookie.indexOf("!")+1,strCookie.indexOf("!",strCookie.indexOf("!")+1));
wish_requestFile(N+1-i,'GET',true,strPid[i]);
strCookie=strCookie.slice(strCookie.indexOf("!",strCookie.indexOf("!")+1)+1);
}
}
3.フリーページ
<div id="wish1"></div>補足
<div id="wish2"></div>
<div id="wish3"></div>
<div id="wish4"></div>
<div id="wish5"></div>
<div id="wish6"></div>
<div id="wish7"></div>
<div id="wish8"></div>
<div id="wish9"></div>
<div id="wish10"></div>
<div id="wish11"></div>
<div id="wish12"></div>
<div id="wish13"></div>
<div id="wish14"></div>
<div id="wish15"></div>
<div id="wish16"></div>
<div id="wish17"></div>
<div id="wish18"></div>
<div id="wish19"></div>
<div id="wish20"></div>
<script type="text/javascript">
<!--
load_wishlist();
//-->
</script>
・strRes[]に商品詳細ページまるまる格納されています。
・切り出す部分と表示は各自で作成してください（根気のいる作業です）。
・「現在、この商品は扱っておりません。」はテンプレートによっては異なるかもしれません。在庫の有無によって、処理･表示を分岐させます。在庫表示管理の設定や商材の種類によって、内容を見直す必要があります。
・～部分に表示させる情報を。その上の行に、切り出す処理を追加してください。
・最大登録数を20点にしています。サーバーへの負荷がかかりますので、無茶しない数で。
・Cookieに書き込む商品IDは、!で囲む形式にしています。!は区切り文字として使用。ex. !12345678!
XMLHttpRequestを使用せずに、もっと楽にシンプルに作れるとよいのですが。
使用時はサーバーに過度の負担をかけない程度に。
これに追加して、「カートに入れるボタンを商品詳細ページ以外に設置する」 を使えば、ほしい物リストページにカートに入れるボタンを設置することも可能（多分）。試したあとで、ご紹介したいと思います。
【関連記事】
・カラーミーにできること、できないこと
