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

9 コメント:

takahiro さんのコメント...

貴重な投稿をありがとうございます!
当方Wordpressを利用しており、「最近見た記事」の実装をする為に早速試したのですが、「Uncaught ReferenceError: set_recent_cookie is not defined」と怒られてしまいます。
jQuery、自作関数ともに参照はできてるようなのですが、このエラーが出てきてしまい、処理が進みません・・
何か気をつけるポイント等はありますでしょうか?

管理人 さんのコメント...

大層なことはしていないので、エラーがどの時点で出ているのか、すこしずつコードを付け加えるなどして原因究明してみてください。
検索したらこんなのがでていましたがどうでしょう。
http://teclog.hattara.info/?p=221

takahiro さんのコメント...

早速のお返事ありがとうございます。
あれから色々と調べた所、WPのプラグインにて実装する事ができました。
こちらです → http://wordpress.org/extend/plugins/last-viewed-posts/
教えて頂いたリンクの方法も一度試してみます。
ありがとうございました!

anzen56 さんのコメント...

こんにちは
参考に実装を試みますがどうもうまくいきません。。
(スタイルが崩れたりブラウザ自体の挙動がおかしくなります。。)
よろしければ実装されている店舗のご紹介を頂くことはできませんでしょうか?参考にさせていただきたいです。

管理人 さんのコメント...

>anzen56 さん
ブラウザの挙動がおかしいということについては想像がつきませんが、表示が上手くいっていない場合は、
・Cookieに意図する通り書き込めているのか
・文字列(load_recentlist関数内のstr1~str3)が取り出せているか
を確認して、原因の切り分けをしてみてください。

実装しているお店を紹介する権限が私にはないのです(私がオーナーではないので)。

管理人 さんのコメント...

jquery.cookie.js(プラグイン)を使用するにはjquery.js(本体)が必要です。

anzen56 さんのコメント...

いろいろありがとうございました。

スクリプト読み込みの際にcharsetを入れてやれば何とかうまくいったようです。

重複のもの追加の場合クッキーから古いものを削除し新しいものを追加。。
もしくは古いものをそのまま残し新しく追加しない。。という形に出来ればなぁと考えています。
アドバイスいただけると幸いです。

管理人 さんのコメント...

過去記事 http://shop-pro.blogspot.com/2010/08/4.html
set_wish_cookie()が参考になると思います。

anzen56 さんのコメント...

こんにちは
なにかとお世話になりました。ありがとうございます。

なんとか考えていた動作をする形で実装できました。

コメントを投稿