Yume

いつリリースされた機能なのか覚えていませんが、この機能は「この商品を購入した人はこんな…」的機能ですよね？

カラーミーショップ 組合せ購入パターン

不満点

• 1商品につき3商品しか設定できない
• 一括作成してもイマイチピンと来ない
• ピンと来ないので手動設定?→やってられない

ということで、以前の記事で書こうと思っていたJSONPについて書こうと思います。

こうなればいい自分仕様

「この商品を購入した人はこんな…」ええいっ！！以下リコメンド機能とします。
このリコメンド機能を自前で作ります。
仕様は以下に

• 表示されている商品と同じカテゴリのものが表示されればいい。
• 表示数は好きにできればいい。
• ランダムに表示されるといい。

という風に上の様な勝手な仕様で作成します。
以前はこれをSmartyでやっておりました。ですがテンプレートエラー乱発でやむなく。。。
詳細は以前の記事に書いています。

必要なもの

• 作成したJSONPファイルを置けるサーバ
• csvファイルをJSONPファイルにできるもの（一応用意してます）

手順

1. 商品CSVをダウンロード
2. 商品CSVを整形する。（しなくてもいいけどしないとファイル重い）
3. 商品CSVをJSONPに変換
4. JSONPをサーバにアップロード
5. カラーミーショップの詳細テンプレートにJavaScriptを設置してJSONPを読み込む

以上です。

以下に詳細を書いていきます。

商品CSVをダウンロード 〜 商品CSVを整形する。

ダウンロードしたproduct.csvのカラムを

商品ID,カテゴリー（大）,商品名,商品画像URL,在庫数,掲載設定

だけを残して、他は削除してください。

次に上のヘッダー部を

商品ID,カテゴリー（大）,商品名,商品画像URL,在庫数,掲載設定
から
itemId,cat,itemName,photo,stock,displayflg

とします。今の段階でCSVファイルは以下のようになっているはずです。
（カテゴリ名、商品名は変えています。）

商品CSVをJSONPに変換

変換には僕はSublimeTextのDataConverterを使っていますが、ここでは下のテキストエリアにエクセルをすべてコピーして貼り付けてください。

右クリックコピーでコピーしたデータを左のテキストボックスに貼り付けると右のテキストエリアに結果がでます。

文字コードEUC-JPで保存すること！

吐き出されたデータをお気に入りのテキストエディターに貼り付けて、必ず文字コードEUC-JPで保存してください。

JSONPをサーバにアップロード

アップロードしてください。

カラーミーショップの詳細テンプレートにJavaScriptを設置してJSONPを読み込む

以下のスクリプトをカラーミーの商品詳細テンプレートに書き込みます。
スクリプト下部の<div id="json"></div>に内容が入ってきます。
このタグの場所はどこでも大丈夫です。

<script>
$(function(){
    $.ajax({
        url : "先ほど作成したJSONPファイルへのURLに変えてください",
        dataType : "json",
        success: function(data) {
            // 表示する商品数
            var itemnums = 6;

            var insertObj = $("#json");

            Array.prototype.shuffle = function(){
                var i = this.length;
                while(i){
                    var j = Math.floor(Math.random() * i);
                    var t = this[--i];
                    this[i] = this[j];
                    this[j] = t;
                }
                return this;
            };

            data.shuffle();

            var dataNum = data.length;

            var cat = '<{$bid_name}>';
            var j = 0;
            jQuery.each(data, function(i, val) {
                if(j === itemnums){
                    return true;
                }
                if(data[i].cat === cat && data[i].display == '掲載する' && data[i].stock > 0){
                    var photo = data[i].photo.replace('.jpg', '_th.jpg');
                    var html  = '<div class="box">';
                    html      += '<a href="' + '自分のショップサイトのURL/?pid=' + data[i].itemId + '"><img src="' + data[i].photo + '" height="64"></a>';
                    html      += '<p><a href="' + '自分のショップサイトのURL/?pid=' +  data[i].itemId + '">' + data[i].itemName + '</a></p>';
                    html      += '</div>';
                    insertObj.append(html);
                    j++;
                }
            });
        },
        error: function(data) {
            insertObj.append( '<font color="red">読み込みNG</font>' );
        }
    });
});
</script>
<div id="json"></div>

これでカテゴリ一致した商品がランダムで6商品表示されるスクリプトになります。
吐き出されるタグは<div class="box">商品情報</div>になります。
思い思いにCSSをどうぞ。

かなり駆け足だったので、説明がかなり雑だ。。。