2015年6月26日

カラーミーでウィッシュリストを作る - カラーミーショップAPI編

【仕事サイトにカラーミーショップAPI関連記事を書きました】
カラーミーショップAPIの使い方を丁寧に解説します

ウィッシュリスト(wishlist, wish list, ほしい物リスト etc.)。
呼び方はいろいろありますが、「購入したい商品につけるしおりのようなもの」。
カラーミーショップには昔からこのウィッシュリスト機能が付いていません。カラーミーショップ七不思議のひとつ。

2010年の記事「ほしい物リストを作る 1」で、基本設計を箇条書きしました。 
・「ほしい物リストに追加する」ボタンをクリックすると、Cookieに商品IDを書き込む
・ほしい物リスト一覧ページをフリーページで作成し、ページデザインをする
・商品ID以外にも表示に必要な情報を取得してくる
・「ほしい物リストから削除する」ボタンをつくる
これはカラーミーショップAPIがなかった頃なので、必要な情報を取得する部分にXMLHttpRequestを使いました。

今回は「カラーミーショップAPI」を使います。ずいぶんとシンプル&スマートに仕上がります。そのほかの多くの部分を2010年ver.から流用しています。
もうひとつ、以前に比べると、jQueryを使った箇所が増えました。
仕様がよくわからない、内容がよくわからない場合は復習をどうぞ。
ほしい物リストを作る 4 ・カラーミーAPI実践編2 ポイント表示

ということで、「カラーミーでウィッシュリストを作る - カラーミーショップAPI編」スタート。

1. コード

1.1 商品ページなどに設置

<script type="text/javascript" src="http://hogehoge.heteml.jp/jquery.cookie.js"></script>
<script type="text/javascript" src="http://hogehoge.heteml.jp/wishSet.js"></script>

<!--ウィッシュリンク-->
<a href="#" onClick="JavaScript:wishCookie(<{$product.id}>);return false">ウィッシュリストに追加</a>

 

1.2 JavaScript - wishSet.js

//文字コードEUCで
//ウィッシュリストのセット&全削除
function wishCookie(id) {
  if(id > 0) {
    strCookie=$.cookie('wish');
    if(strCookie == null) {
      strCookie = "";
    }
    else{
      loop = strCookie.match(/!/g);
      if(loop != null && loop.length/2 >= 50) {
        window.alert("これ以上追加することはできません(最大50点まで)");
        return;
      }
    }

    strURL = "!" + id + "!";
    re = new RegExp(strURL);
    if(strCookie == null || strCookie == "")  {
      strCookie = strURL;
      $.cookie('wish', strCookie,{expires:365});
      window.alert("ウィッシュリストに追加しました");
    }
    else if(strCookie.search(re) == -1)  {
      strCookie = strURL+strCookie;
      $.cookie('wish', strCookie,{expires:365});
      window.alert("ウィッシュリストに追加しました");
    }
    else {
      window.alert("この商品はすでに追加されています");
    }
  }
  else if (id ==  0) {//全削除
    $.cookie('wish','',{expires:-1});
    //strCookie=$.cookie('wish');
  }
}

//Cookie部分削除
function delWishCookie(strNum,n) {
  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});
    prid="#prw"+n;
    $(prid).html("再読込み時に削除されます");
  }
}

1.3 フリーページなどの表示場所に設置

<script type="text/javascript" src="http://hogehoge.heteml.jp/jquery.cookie.js"></script>
<script type="text/javascript" src="http://hogehoge.heteml.jp/wishSet.js"></script>

//ウィッシュリストの表示場所を準備
<script type="text/javascript">
//Cookie読み込み
  strPid = new Array();

  strCookie=$.cookie('wish');
  if(strCookie==null){
    strCookie="";
  }
  loop=strCookie.match(/!/g);

  if(loop!=null){
    if(loop.length/2>50){//50itemsまで
      N=50;
    }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));

    document.write('<div id="picw'+i+'"></div><div id="titw'+i+'"></div><div id="prw'+i+'"></div><div><a href="#" onClick="JavaScript:delWishCookie('+strPid[i]+','+i+');return false">ウィッシュリストから削除</a></div>');

    strCookie=strCookie.slice(strCookie.indexOf("!",
              strCookie.indexOf("!")+1)+1);
  }

  //表示失敗を回避するため、DOM読み込み後に実行する
  $(function(){
    for(i=1;i<=N;i++){
      wishwish(i,strPid[i]);
    }
  });

</script>

1.4 JavaScript - wishwish()

<script type="text/javascript">
function wishwish(num,id){
$.getJSONP = function(url,callback,param) {
        return $.ajax({
            url:    url,
            dataType:"jsonp",
            success:callback
        });
}
$.getJSONP("http://hogehoge.heteml.jp/getWishlist.php54?id=" + id + "&num=" + num, onDataHandler)
function onDataHandler(response) {
    nw   = response.numw;
    picid = "#picw" + nw;
    titid = "#titw" + nw;
    prid = "#prw" + nw;
    name=response.name;
    idw=response.idw;

    $(picid).html('<a href="http://www.hogehoge.com/?pid='+idw+'"><img src="'+response.img_u+'" /></a>');
    $(titid).html('<a href="http://www.hogehoge.com/?pid='+idw+'">'+nw+'\. '+name+'</a>');

    if(response.stock_managed==1 && response.stocks==0){  
      $(prid).html('<b>SOLD OUT</b>');
      delWishCookie(idw);
    }
    else {
      $(prid).html(response.sales_price+'円(税込)');
    }
}
}
</script>

 

1.5 getWishlist.php54

<?php
$request_options = array(
    'http' => array(
        'method'  => 'GET',
        'header'  => "Authorization: Bearer XXXXXXXXXXXXXXXXXX\r\n"
    )
);
$context = stream_context_create($request_options);

$url = 'https://api.shop-pro.jp/v1/products/' . $_GET['id'] . '.json';
$response_body = file_get_contents($url, false, $context);
$response_json = json_decode($response_body, true);

//出力用配列にセット
$output = array(
    'numw' => $_GET['num'],
    'idw' => $_GET['id'],
    'name' => htmlspecialchars($response_json['product']['name'], ENT_QUOTES, 'UTF-8'),
    'sales_price' => number_format($response_json['product']['sales_price']),
    'img_u' => $response_json['product']['image_url'],
    'stock_managed' => $response_json['product']['stock_managed'],
    'stocks' => $response_json['product']['stocks']
);
header( 'Content-Type: text/javascript; charset=utf-8' );
echo $_GET['callback'] . '(' . json_encode($output). ')';

2. 簡単な説明


1.1 「ウィッシュリストに追加」を押すと、wishCookie関数を呼ぶ。
1.2 商品IDがCookieに追加される。Cookieの読み書き削除にはjquery.cookie.jsを使う。
1.3 ウィッシュリストの表示場所を作る。終了後にwishwish関数を呼ぶ。
1.4 PHPに商品IDを渡して結果を受け取る。そして結果を表示する。
1.5 カラーミーショップAPIとの処理部分。商品IDから必要情報を取ってきて結果を渡す。

3. おわりに


今回の「カラーミーでウィッシュリストを作る - カラーミーショップAPI編」はいかがだったでしょうか。
ほしい物リストを作る 4」「カラーミーAPI実践編2 ポイント表示」を混ぜると、今回の
が出来上がります。


説明が省略されている箇所は、上述のページ周辺にヒントが載ってるはず。
URL、トークン、商品IDは各自のを。CSS、ボタンなど、綺麗にデザインして。
商品IDを持っているので、どこでもカラーミーで「カートに入れる」ボタンも付けられる。
実際に使っているコードから機能を一部省略しただけなので動くと思いますが、動かなかったら直して!
センスのない関数名や冗長なコードについては、(私が)恥ずかしいので突っ込まない。

【追記】元々の仕様が古いので、Cookieにセットする文字列がスマートじゃありませんが、配列に入れてシリアライズしてセットするような風にすると、今風なのだろうと思います。



毎回画像が少ないので、今回は話にまったく関係の画像を付けてみました(先週の夜出てた)。


【追記】POSTのほうがよいかも。