2011年8月17日

カートJS機能について

【仕事サイトにカートJS関連記事を書きました】
 カラーミーショップのどこでもカラーミーについて実践的に学ぶ


 カラーミーショップで7月末にリリースされた新機能「カートJS機能」について。
ごく簡単に紹介すると、「カートに入れる」ボタンを好きなところに貼れるjavascriptソースを作成してくれる機能です。マニュアルはこちら
ブログに商品紹介とカートに入れるボタン貼ることを想定していると思われます。

写真1.カートJS機能の画面 
もっともシンプルな表示の場合
カートJS機能で作成したJSコードを貼り付けるだけ。
<script type='text/javascript' src='http://www.hogehoge.com/?mode=cartjs&pid=1234567&style=basic&name=n&img=n&expl=n&stock=n&price=n&inq=n'></script>
URLの中身を見ると下記のようになっています(注:オリジナルのソースには改行は入っていません)。JavaScriptでHTMLを書いているという仕組みです。
以前「カートに入れるボタンを商品詳細ページ以外に設置する」で紹介した方法(この記事の元ネタは「カラーミーショップ - 助け合い掲示板」) とやっていることは変わりませんが、在庫なしの場合は表示しない分だけ、今回のカートJS機能の方が高級です(その他、売り切れ時の商品表示や掲載設定の条件などで表示・非表示の作り込みはされている)。
document.write("<!--cartjs basic-->
<div style=\"width:94%;margin:0 auto;padding:0;\">
<div class=\"cartjs_box\" style=\"margin:0;padding:0;\">
<form name=\"product_form\" method=\"post\" action=\"http://secure.shop-pro.jp/?mode=cart_inn\" class=\"cartjs_product_form\" style=\"width:100%;margin:0px;padding:0;\">
<div class=\"cartjs_product_table\">
<table style=\"border-top:1px solid #ccc;border-right:1px solid #ccc;border-collapse: collapse;width:50%;margin:0 auto 15px;\">
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<tr>
<th style=\"border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">購入数</th>
<td style=\"padding: 0px 5px 0 10px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">
<input type=\"text\" name=\"product_num\" value=\"1\" class=\"cartjs_product_input_txt\" style=\"width: 50px;\" />
</td>
</tr>
<!--オプション情報-->
</table>
</div>
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<div class=\"cartjs_cart_in\" style=\"margin-bottom:10px;text-align:center;\">
<input type=\"submit\" value=\"カートに入れる\" />
</div>
<!-- 特定商取引法リンク -->
<div class=\"cartjs_sk_link_other\"><a href=\"http://www.hogehoge.com/?mode=sk\">&raquo;& nbsp;特定商取引法に基づく表記 (返品など)</a></div>
<!--// 特定商取引法リンク -->
<div class=\"cartjs_product_info\">
<input type=\"hidden\" name=\"user_hash\" value=\"11223344e1f22abc1122334455de1a22\">
<input type=\"hidden\" name=\"members_hash\" value=\"11223344e1f22abc1122334455de1a22\">
<input type=\"hidden\" name=\"shop_id\" value=\"PA01234567\">
<input type=\"hidden\" name=\"product_id\" value=\"1234567\">
<input type=\"hidden\" name=\"members_id\" value=\"\">
<input type=\"hidden\" name=\"back_url\" value=\"http://www.hogehoge.com/?pid=1234567\">
</div>
</form>
<div style=\"display:block;text-align:right;font-size:10px;margin-top:10px;\">
<a href=\"http://shop-pro.jp/\" target=\"_blank\">powered by カラーミーショップ</a>
</div>
</div>
</div>
<!--//cartjs-->");
ブログに貼る分には「特定商取引法に基づく表記」と「powered by カラーミーショップ」の表記が必要かもしれませんが、ショップページに貼る場合には、サイトデザインの点で邪魔に思います。
 Ajaxで「<script type='text/javascript' src="~」のURLを読み込んで、文字列操作して消すことも可能でしょうが、手間のわりにやっていることが地味で現実的ではないように思います。

【追記】
8/31の公式記事によると、評判の良くなかった上述の表示は選択制にしたとのこと。
「お願い!カラーミー」にて受け付けたご要望を元に、カートJS機能を利用した際に表示されていた「powered by カラーミーショップ」の削除および「特定商取引法に基づく表記」のリンクを選択可能にしました。