カラーミーショップAPIの使い方を丁寧に解説します
ウィッシュリスト（wishlist, wish list, ほしい物リスト etc.）。
呼び方はいろいろありますが、「購入したい商品につけるしおりのようなもの」。
カラーミーショップには昔からこのウィッシュリスト機能が付いていません。カラーミーショップ七不思議のひとつ。
2010年の記事「ほしい物リストを作る 1」で、基本設計を箇条書きしました。
・「ほしい物リストに追加する」ボタンをクリックすると、Cookieに商品IDを書き込むこれはカラーミーショップAPIがなかった頃なので、必要な情報を取得する部分にXMLHttpRequestを使いました。
・ほしい物リスト一覧ページをフリーページで作成し、ページデザインをする
・商品ID以外にも表示に必要な情報を取得してくる
・「ほしい物リストから削除する」ボタンをつくる
今回は「カラーミーショップ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を持っているので、どこでもカラーミーで「カートに入れる」ボタンも付けられる。
実際に使っているコードから機能を一部省略しただけなので動くと思いますが、動かなかったら直して！
センスのない関数名や冗長なコードについては、（私が）恥ずかしいので突っ込まない。
【追記】元々の仕様が古いので、Ｃookieにセットする文字列がスマートじゃありませんが、配列に入れてシリアライズしてセットするような風にすると、今風なのだろうと思います。
毎回画像が少ないので、今回は話にまったく関係の画像を付けてみました（先週の夜出てた）。
【追記】POSTのほうがよいかも。
