【追記】2012年1月31日に公式に実装されました。以下は古い記事になります。
【マニュアル】「商品グループ機能 階層化」「最近チェックした商品リスト」
カラーミーショップには、「最近チェックした商品（または最近見た商品）」がありません。
アカウント情報のひとつとして、サーバー側で持たせることが一般的ですが、現状そのような機能は搭載されていません。
ということで、クライアント様からご依頼がありましたので作成してみました。
必要な機能がシンプルなため、わりとかんたんに作られています（サンプルとしては好都合）。
ではかんたんに仕様から。
・商品詳細ページ(URLが?pid=)の場合、Cookieに書き込み
・書き込みの内容は、商品名、商品ID、商品画像URL（すべて独自タグあり）
・Cookieの読み書きはjquery.cookie.js（プラグイン）を使用
今回の機能ですが、以前作成した「ほしい物リスト」と、おおまかにいうと同じ考え方です。
Cookieを使用して情報を読み書きし、表示させる。jQuery、JavaScriptの使い方も同じです。
もっとも異なる点はAjaxを使用しない点です。
そのおかげで、実にシンプルかつスマート。
それでは、今回のサンプルを。
0.jQueryと自作関数を読み込み
<script type="text/javascript" src="http://～/jquery.js"></script>
<script type="text/javascript" src="http://～/jquery.cookie.js"></script>
<script type="text/javascript" src="http://～/recent.js"></script>
1.商品詳細ページの任意の場所に設置
商品名には、先頭に画像タグがつく場合があるので、strip_tagsで除去。
商品名に含む「”」などはトラブルのもと。エスケープしておく。
<{assign var="proname" value=$product.name|strip_tags|escape}>
<script type="text/javascript">
<!--
set_recent_cookie("<{$product.id}>","<{$proname}>","<{$product.img_url}>",1);
// -->
</script>
2.表示したい任意の場所に設置
<div id="recent_item"></div>
<script type="text/javascript">
<!--
load_recentlist();
// -->
</script>
3.JavaScript-recent.js
//Cookieセット
function set_recent_cookie(pid,name,img_url,i) {
// 1書き込み 0消去
if(i==1) {
strCookie=$.cookie('recent');
if(strCookie==null) {
strCookie="";
}
else{
loop=strCookie.match(/`/g)
if(loop!=null && loop.length/4 >= 6){//6個保存
//古い方から消す
loc=strCookie.indexOf("`", strCookie.indexOf("`", strCookie.indexOf("`", strCookie.indexOf("`")+1)+1)+1);
strCookie=strCookie.slice(loc+1);
$.cookie('recent', strCookie ,{expires:365});
}
}
strURL="`"+pid+"`"+name+"`"+img_url+"`";
if(strCookie==null || strCookie=="") {
strCookie=strURL;
$.cookie('recent', strCookie,{expires:365});
}
else {
strCookie=strCookie+strURL;
$.cookie('recent', strCookie,{expires:365});
}
}
else {
$.cookie('recent','',{expires:-1});
document.getElementById("recent_item").style.display='none';
}
}
//最近チェックした商品リスト表示
function load_recentlist() {
loc = new Array();
//Cookie読み込み
strCookie=$.cookie('recent');
if(strCookie==null) {
strCookie="";
}
loop=strCookie.match(/`/g);
if(loop!=null){
if(loop.length/4>6){
n=6;
}else{
n=loop.length/4;
}
}
else {
n=0;
}
if(n !=0 ){
loc[0]=strCookie.indexOf("`");
loc[1]=strCookie.indexOf("`",loc[0]+1);
loc[2]=strCookie.indexOf("`",loc[1]+1);
loc[3]=strCookie.indexOf("`",loc[2]+1);
str1=strCookie.substring(loc[0]+1,loc[1]);//商品ID
str2=strCookie.substring(loc[1]+1,loc[2]);//商品名
str3=strCookie.substring(loc[2]+1,loc[3]);//商品画像URL
//この下の行は表示部分なので各自
strOut="<div style='height:43px;overflow:hidden;margin-bottom:8px;width:100%;'><div style='height:43px;width:47px;float:left;'><a href='./?pid="+str1+"'><img style='width:43px;' src='"+str3+"'></a></div><div style='height:43px;'><a href='./?pid="+str1+"'>"+str2+"</a></div></div><div style='clear:both;height:1px;'><img src='http://img.shop-pro.jp/tmpl_img/11/sp.gif'></div>";
}
for(i=1;i<n;i++){
loc[i*4]=strCookie.indexOf("`",loc[i*4-1]+1);
loc[i*4+1]=strCookie.indexOf("`",loc[i*4]+1);
loc[i*4+2]=strCookie.indexOf("`",loc[i*4+1]+1);
loc[i*4+3]=strCookie.indexOf("`",loc[i*4+2]+1);
str1=strCookie.substring(loc[i*4]+1,loc[i*4+1]);//商品ID
str2=strCookie.substring(loc[i*4+1]+1,loc[i*4+2]);//商品名
str3=strCookie.substring(loc[i*4+2]+1,loc[i*4+3]);//商品画像URL
//この下の行は表示部分なので各自
strOut="<div style='height:43px;overflow:hidden;margin-bottom:8px;width:100%;'><div style='height:43px;width:47px;float:left;'><a href='./?pid="+str1+"'><img style='width:43px;' src='"+str3+"'></a></div><div style='height:43px;'><a href='./?pid="+str1+"'>"+str2+"</a></div></div><div style='clear:both;height:1px;'><img src='http://img.shop-pro.jp/tmpl_img/11/sp.gif'></div>"+strOut;
}
if(n !=0 ){
document.getElementById("recent_item").innerHTML=strOut;
}
}
補足
・Cookieに書き込む情報は、`で囲む形式にしています。`は区切り文字として使用（ex. `商品ID`商品名`商品画像URL``商品ID２`商品名２`商品画像URL２`……）。使わない文字ならなんでもOKです。
・表示数（サンプルでは6）、表示用のHTMLタグは各自でいじってください。
・区切り方は（個人的には）もうすこし分かりやすく作れるなぁと思います。問題なく動きますので、細かいことは目をつぶることにします。
・このサンプルをすこしいじれば、かんたんな「ほしい物リスト」が作れます。
・販売済みや在庫0の場合、表示をどうするか。Cookieに追加しない、画像を販売済みに差し替えるなど。ショップごとに検討して、改良してください。
【関連記事】
・ほしい物リストを作る 1
