2011年4月4日

最近チェックした商品リストを作る

【追記】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``商品ID2`商品名2`商品画像URL2`……)。使わない文字ならなんでもOKです。
・表示数(サンプルでは6)、表示用のHTMLタグは各自でいじってください。
・区切り方は(個人的には)もうすこし分かりやすく作れるなぁと思います。問題なく動きますので、細かいことは目をつぶることにします。
・このサンプルをすこしいじれば、かんたんな「ほしい物リスト」が作れます。
・販売済みや在庫0の場合、表示をどうするか。Cookieに追加しない、画像を販売済みに差し替えるなど。ショップごとに検討して、改良してください。


【関連記事】
ほしい物リストを作る 1