2015年6月26日

カラーミーでウィッシュリストを作る - カラーミーショップ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のほうがよいかも。

8 コメント:

caffe latte さんのコメント...



Notice: Undefined index: id in /home/sites/heteml/users/a/l/f/hogege/web/php/getWishlist.php54 on line 10



Warning: file_get_contents(https://api.shop-pro.jp/v1/products/.json): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found
in /home/sites/heteml/users/a/l/f/hogege/web/php/getWishlist.php54 on line 11



Notice: Undefined index: num in /home/sites/heteml/users/a/l/f/hogege/web/php/getWishlist.php54 on line 16



Notice: Undefined index: id in /home/sites/heteml/users/a/l/f/hogege/web/php/getWishlist.php54 on line 17



Notice: Undefined index: callback in /home/sites/heteml/users/a/l/f/hogege/web/php/getWishlist.php54 on line 25

({"numw":null,"idw":null,"name":"","sales_price":"0","img_u":null,"stock_managed":null,"stocks":null})

こちらをさん参考にして作成しているんですが最後の最後で上記エラーでます。
原因などご教示いただきませんか?

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

Warning: file_get_contents(https://api.shop-pro.jp/v1/products/.json): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found
in /home/sites/heteml/users/a/l/f/hogege/web/php/getWishlist.php54 on line 11


パラメータ(商品IDやら)が渡せていないようにみえます。
Javascriptや、関数を呼ぶコード周辺に誤りがあるのではないでしょうか。

匿名 さんのコメント...

本当になんどもすみません。。。。
管理人様のコードをそのまま張ればできると思っておりました。
自力で解読しているんですが中々できずまだ奮闘中です。


表示したいのは下記商品一覧の下記HTMLです。
こちらはどのような関数に変換すればよろしいのでしょうか・・・・
お忙しいところ恐縮ですがご教示お願いします。

商品IMG
商品ID
商品名
販売価格
コメント

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

動作が正常か順番に確かめていくと良いと思います。
1.ボタンを押すと、cookieに追加されるか。その独自タグは正しいか。
2.ウィッシュリストの表示ページでエラーは出てないか。エラーの理由はなにか。

最近のブラウザにはデベロッパー・ツール(呼び名いろいろ)が付いているので、cookieの中身やPHPに渡すパラメータなどを見ることができます。
エラーのヒントも教えてくれます。

匿名 さんのコメント...

お世話になります。
後一歩のところなんです・・・・

1.ボタンを押すと、cookieに追加されるか。その独自タグは正しいか。
↑クリアしております。

2.ウィッシュリストの表示ページでエラーは出てないか。エラーの理由はなにか。
↑ここでどつぼにはまってます。

表示はウイッシュリストに商品を追加したのちにリストページを覗くと

ウィッシュリストから削除
ウィッシュリストから削除
ウィッシュリストから削除
ウィッシュリストから削除

の文字だけが羅列して並ぶのです。

こちらに正常に

商品IMG
商品ID
商品名
販売価格
コメント

などを出したいのです・・・・
大変恐縮ですが再度ヒントをお願いいたします。

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

Warning: file_get_contents(https://api.shop-pro.jp/v1/products/.json): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found

先日も書きましたが、PHPのエラーを見ると商品IDが渡せていないように見えます。
私なら、商品IDを上から順に確認していくことから始めます。ここまでは正常、ここからおかしいという箇所を絞り込みます。最終的には、エラーの原因もそこにあるということになります。

cookieの中身を見て正常であると確認できているのでしたら、その次、この記事の1.3、1.4の順に適切な位置にコード(例えばwindows.alertやdocument.writeなどのjavascriptの関数など)を挿入して商品IDを表示させて、思ったとおりの結果が返ってくるか確認します。
例えば1.3でしたら
strPid[i]=strCookie.substring(strCookie.indexOf("!")+1,
strCookie.indexOf("!",strCookie.indexOf("!")+1));
の下で表示させるようにします。この時点でおかしいのでしたら、そこから上に原因があると考えて理由を推測します。

以上に問題なければ、PHPにパラメータを渡す部分(または受け取る側のPHP)がおかしいことになります。ブラウザのツールでやりとりを確認することができます(私はFirebugを使っています)。

匿名 さんのコメント...

まだ解決できず困っております。
bulldoglove_0925@hotmail.co.jp
にメールいただけませんか?

具体的にサイトURLをお送りさせていただきます。
解決できれば気持ち程度ですが謝礼いたしますのでよろしくお願いします。

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

どのくらいご理解されているかわからないので、作業時間が見積もれません。
仕事のことを考えずに休みたいので、ごめんなさい。

コメントを投稿