カートJS機能を実践的にいじる

公式のお知らせにありましたが、「カラーミーショップ、新サポートコミュニティはじめました。」とのこと。これまで重宝していた助け合い掲示板の役割も、新サイトに移行するようです（カラーミースタッフが回答することもあるようです）。

さて今回は、カートJS機能を使って、よくありそうなパターンをサンプルとして作ってみました。
使い道や使い方をご存じない方はこちらから。カラーミーショップ-カートJS機能とは？

いろんなところに「カートに入れる」ボタンがつけられるよ、って機能ですが、実際には、ブログよりも、商品一覧ページやトップページに設置したい、ついでにボタンのデザインも変更したいなぁ、と思うことが多いんじゃないでしょうか。

今回のサンプルでは、デザインをシンプルに画像だけして、購入数も表示しません。
カートJS機能で作成したコードをちょいちょいといじって、ショップページの<{section}>ループ内に設置。


HTML（ショップページのどこか）+JavaScript

<{section name=num loop=$recommend}>

    <script type='text/javascript' src='http://hogehoge.shop-pro.jp?mode=cartjs&pid=<{$recommend[num].id}>&style=basic&name=n&img=n&expl=n&stock=n&price=n&inq=n&sk=n' charset='euc-jp'></script>

<{/section}>

上例の場合はおすすめ商品のID。<{$seller[num].id}>、<{$productlist[num].id}>でももちろんOK。
ページによって使える独自タグが異なるので、注意が必要です（ここ重要）。

CSS

.cartjs_cart_in {
    margin-bottom: 0px!important;
}
.cartjs_product_table {
    display: none;
}

input[type=submit] {
    background-image: url(http://hogehoge.heteml.jp/img/cart.png);
    width: 30px;
    height: 30px;
    border-style: none;
    cursor: pointer;
    /* Hide text on input */
    text-indent: -999em; /* Hide the text, works in most modern browsers */
    /* --- Needed for IE --- */
    font-size: 0px; /* works well in IE7. still a black line (basically the text) in IE6. */
    display: block; /* Negative text-indent works in IE(6? worked fine in 7) only if this is added. */
    line-height: 0px; /* Another fix for IE6. */
}

上の2つで、都合の悪いマージンを0にして、購入数テーブルの表示を消しています。

input[type=submit]は属性セレクタと呼び、submitボタンにスタイルを適用できます（IE7以上とのこと）。
標準のボタンから、用意した画像(30×30px)に変更。
cursor: pointer;で、画像上に乗ったらマウスカーソルを変えるようにしています。
購入数テーブルの表示を消していますので、購入数1（＝デフォルト）でカートに入ります。

「カートに入れる」という文字を消すのがなかなか面倒でした。
ネットで調べていると、そのものずばりの内容があったので、CSSに追加。
【参考】 SNIPPLER-Hide text on input[type=submit]

おわりに
カートJS機能で作った「カートに入れる」ボタンも、CSSでそこそこいじれるよ、という感じです。
「カートJS機能について」で書きましたが、カートJS機能は、やっていることはわりとシンプルです。
もし、CSSでスタイル調整ができない場合があっても、カートJS機能から受け取ったコードをいじって、実現することができるかもしれません。

カート設置に関しては、当サイトでも過去に取り扱いがあります。いろいろいじりたくなった方は、ご一読を。
「カートJS機能について」「カートに入れるボタンを商品詳細ページ以外に設置する」

【追記】
商品詳細ページに置くと、新規のセッションの場合において、カートＪＳ機能がうまく動作しないことがある（他ページではそんなことはないが、商品詳細ページでは、すでにあるカートの、user_hash、members_hashと不一致が生じる関係で不具合が出るようだ）。
商品詳細ページに設置したい場合は、「カートに入れるボタンを商品詳細ページ以外に設置する」を使うとよい。
product_formがダブると数量がマズイので、名前を変えておく。
ということで、商品詳細ページに「カートに入れる」ボタンを設置するには、色々やる必要あり。

カラーミーAPI実践編2 ポイント表示

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



前回からの引き続き。さて、カラーミーショップの最近のトピックは、カラーミーAPI。

先月から続きましたカラーミーAPI関連の記事も、今回で最後となります。

前回は、データを取ってくる処理部分をメインにしましたが、今回はデータの受け渡しについてです。
カラーミーAPIを実際使うに当たっては、データの受け渡しが必要になる場合の方が多いのではないでしょうか。

ざっくりと説明すると、こんな感じです（わからない用語については、検索して調べてくださいね）。
クエリストリングスを使って、$_GET（スーパーグローバル変数）として、PHPアプリケーションに必要な情報を渡します。
Ajaxを利用し、結果をショップページに動的に挿入します。Ajaxは、jQueryを使うと、ブラウザ間の差異も気にせずに、簡単にやりとり可能。

とはいえ、ひとつ問題があります。
Ajaxは、同一ドメイン間のやりとりは問題ありませんが、ドメインが異なる場合は、セキュリティの問題で上手くやりとりができません（サンプルの場合でいうと、カラーミーのショップページとPHPアプリケーションのあるレンタルサーバのドメインが違うということ）。
そこで、JSONPという、クロスドメインなデータを取得する仕組みを使います。

サンプルは、「顧客IDを渡して、所持ポイントを取ってくる」というものです。

メニューから、「ショップ作成」-「会員機能設定」-「使用設定」で、「使用する」になっていて、ログインしている場合は、 独自タグ<{$members_id}>（ログイン中の顧客ID）が使えます（変更してもすぐ反映するわけではないようで、時間が少し必要でした）。

HTML+JavaScript部分

<div id="pointDisp"></div>
<script type="text/javascript">
$.getJSONP = function(url,callback,param) {
        return $.ajax({
            url:    url,
            dataType:"jsonp",
            success:callback
        });
}
$.getJSONP("http://hogehoge.heteml.jp/php/getPoint.php54?id="+<{$members_id}>, onDataHandler)
function onDataHandler(response) {
    $("#pointDisp").html("保有ポイント：" + response.point);
}
</script>

jQueryを使用しているので、jquery.jsを先に読み込んでおくこと
実際に使う場合には、未ログイン時の処理を追加する必要があります
?id=～部分がクエリストリングス。セキュリティの話も一読を「IPA - クエリストリングから情報が漏れる」
responseに結果が返ってきます
結果を受け取ったら、一行目の<div id="pointDisp"></div>内に表示
【参照】JSONPのやりとりについては、下記リンクの内容を使わせていただきました
「Brandons Experimental Archive - jQuery JSONPでPHPでやりとりする方法」

getPoint.php54

<?php
$request_options = array(
    'http' => array(
        'method'  => 'GET',
        'header'  => "Authorization: Bearer XXXXXXXXXXXXXXXXXXX\r\n"
    )
);
$context = stream_context_create($request_options);
$url = 'https://api.shop-pro.jp/v1/customers/' . $_GET['id'] . '.json';
$response_body = file_get_contents($url, false, $context);
$response_json = json_decode($response_body, true);
//print_r($response_json);

//配列にセット
$output = array(
    'point' => $response_json['customer']['points']
);
header( 'Content-Type: text/javascript; charset=utf-8' );
echo $_GET['callback'] . '(' . json_encode($output). ')';

必要な項目は配列としてセットして、JSON形式に変換して、返します
青で渡して、赤で返して、緑で表示、という流れ
例によって、私はヘテムルを使っていますので、拡張子はphp54となっています

おわりに
ということで、いかがだったでしょうか。
やっかいなクロスドメインでのデータのやりとり部分も、Brandons Experimental Archive様のサンプルを利用するとわりと簡単に設置できます。
Ajaxも、jQueryでらくちん。 昔の記事でちまちまやってたコーディングが、すっきりしましたね。

セキュリティの話は、注意すべきポイントではないでしょうか。
重要な情報をやり取りする場合は、セッションやSSLなんかも勉強しなきゃダメだよ、ってことですよね。

今回のサンプル「ポイント表示」ですが、カラーミーの会員機能はあまり充実していないので、わざわざログインするひとがいるのか、という疑問もあります。
以前「カラーミーショップ - 助け合い掲示板」で話題としてあがっていたので、ためしに作ってみました。

カラーミーAPI実践編1 データ抽出

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

ご依頼があってあれこれ作っていると、こまごましたネタが貯まってきました。
それとは別に、需要の多い（よく検索される）、Smarty、jQuery、カテゴリーの話も、新記事として更新できればなぁと。

さて、カラーミーショップの最近のトピックは、カラーミーAPI。
カラーミーAPIとPHPを使った、よくある一連の流れを模式的に書くとこんな風。

「データ（カラーミー）」→「処理（PHP）」→「結果表示（カラーミー）」

はじめて触れる方には、知っておくべきことが山のようにあります。
・どうやってデータを生成するのか（HTMLの入力フォーム）
・どうやって処理するのか（カラーミーAPIとのやりとり、データ処理・整型）
・どうやってデータの受け渡しをするのか（クエリストリングス、Ajax、JSONPなど）
・どうやって結果表示するのか（JavaScript）

特に結果表示の方法については、用途によっていくつかの方法のなかから選択することになり、PHP初学者には？？とになります（PHPという言語の特徴でもあります）。
「カラーミーいじりたおし」的には、実際に一番使いそうな結果表示方法にしぼって、解説することにしています（これは次回、実践編2で）。

今回は、最初としてとっかかりやすい「処理の部分」に焦点を当てて、ワンポイントを。
サンプルは、カラーミーAPIで商品データを検索し、PHPで処理し、メルマガ用のリンクを作るアプリケーションです。

1.メールマガジン用のデータ抽出アプリケーション

<?php
    header("Content-Type:text/html; charset=UTF-8");// 文字化け対策
    $request_options = array(
        'http' => array(
            'method'  => 'GET',
            'header'=> "Authorization: Bearer ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ\r\n"
        )
    );
    $context = stream_context_create($request_options);
    $url = 'https://api.shop-pro.jp/v1/products.json?category_id_big=0123456&limit=50&fields=name,sales_price,id,simple_expl,update_date&update_date_min=' . date('Y-m-d');
    $response_body = file_get_contents($url, false, $context);
    $response_json = json_decode($response_body, true);// 連想配列に
    //print_r($response_json);// 配列の構造と中身が見られます

    //商品名（昇順）& 価格（降順）
    foreach ($response_json['products'] as $key => $row) {
        $name[$key]  = $row['name'];
        $sales_price[$key] = $row['sales_price'];
    }
    array_multisort($name, SORT_ASC, $sales_price, SORT_NUMERIC, SORT_DESC, $response_json['products']);
    /*
    //更新日時順（降順）
    foreach ($response_json['products'] as $key => $row) {
        $update_date[$key]  = $row['update_date'];
    }
    array_multisort($update_date, SORT_NUMERIC, SORT_DESC, $response_json['products']);
    */
   
    for($i=0; $i<count($response_json['products']); $i++) {
        echo $response_json['products'][$i]['name'];//商品名
        echo "　";
        echo number_format($response_json['products'][$i]['sales_price']);// カンマ
        echo "円";
        echo "<br />";
        echo "http://www.hogehoge.com/?pid=";// 商品URL
        echo $response_json['products'][$i]['id'];
        echo "<br />";
        echo $response_json['products'][$i]['simple_expl'];// 商品の簡易説明
        echo "<br />";
        echo "<br />";
    }

2.簡単な説明

header("Content-Type:text/html; charset=UTF-8");

私の使用しているヘテムル PHP5.4という環境では、明示しなくても、UTF-8になっているようです（なので、なくても問題ありませんでした）。XAMPPはデフォルト EUC-JPだそうです。
作成したphpファイルも、もちろんUTF-8で保存します。
カラーミーAPIが返す日本語（2バイト文字）も、UTF-8です。
文字コードをEUC-JPにする場合は、↑この点、注意が必要です。
サンプルで文字コードをミスっていると、商品の簡易説明と、echoの”全角スペース”や”円”が文字化けします。

'header'=> "Authorization: Bearer ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ\r\n"

青色箇所はアクセストークンを埋め込むところ。前回の「カラーミーAPIを試してみた 2」を参照。
ちなみに、Authorization以下の文字列をダブルクォーテションで括っていますが、シングルクォーテーションにすると動きません。
PHPにおいて、シングルクォーテーションとの違いはご存知でしょうか？

カラーミーAPIでショップ・データを参照する一連のコード（サンプルの前半部分）は、前回とほとんど変わりませんが、今回は「リクエストパラメータ」がすこし凝っています。

$url = 'https://api.shop-pro.jp/v1/products.json?category_id_big=0123456&limit=50&fields=name,sales_price,id,simple_expl,update_date&update_date_min=' . date('Y-m-d');

公式ページにある、カラーミーAPIインターフェイス v1の「GET /v1/products.json」を読むと、参照できる商品データについて記載されています。
その下に「リクエストパラメータ」の記述があり、カラーミーAPIに渡すパラメータの説明があります。

今回は、検索キーに大カテゴリーと更新日付。
「limit=50」として、カラーミーAPIに対して、（一度に）最大50件まで返すように求めています。指定しない場合は、デフォルト=10件ですので、この点は注意。
「offset=50」とすると、51件目からとってきます。ということで、複数回リクエストすれば、50件超えたデータも、問題なく受け取れるということです。
「fields=～」は、必要な項目を絞ります。設定しない場合は、参照できる商品データの全項目を受け取ることになります。
「.」は、PHPにおける文字列連結演算子です。

サンプルの後半部分が、PHPによる処理にあたります。
JSON形式で受け取り、デコードし、連想配列に入れて、ソートして、出力しています。
PHPの文法については大したことをしてませんので、ネットのリファレンスや入門書などに丸投げさせていただきます。へぼいコーディングの質問とツッコミは、ご容赦いただければと存じます。
忙しくなければ、、、書籍を一冊くらい読んだほうが良いな、と思います。

3.おわりに
メルマガ用データ抽出というサンプルを作りました。条件を変えれば、色々データ抽出できますよね。例外処理（件数0の場合など）をすこし加えるべきでしょうが、こんなところでご勘弁を。

次回は「カラーミーAPI 実践編2」。
どうやってデータの受け渡しをするのか（＋表示を少し）、というお話。
サンプル見れば使えちゃうけど、細かいところまで気にするとややこしいです。