先日行われたカラーミーショップ大賞の優秀ショップの中に、商品一覧に「カートにいれる」ボタンを実装しているショップ様がありました。
型番商品をメインで扱っており ”商品詳細を見るまでもない” 場合や、チケット販売のように ”お客様は少しでも早く決済にすすみたいと考えている”場合には良いんじゃないかと思います。
この実装にはいくつか方法が考えられますので、簡単なものをご紹介します。
どこでもカラーミーを利用する
カラーミーには「どこでもカラーミー」という外部サイトにカートボタンを作る機能があります。
この どこでもカラーミーを利用した実装が一番多いんじゃないかと思います。
どこでもカラーミーで発行される貼り付けコードは同じデザインなら商品ID部分以外は共通なので、商品一覧のループの中でIDを変数で呼び出すことで、カートボタンを生成させます。
実装例
商品編集画面で「 「どこでもカラーミー（カートJS）」用タグを発行」を押すと、任意の設定で貼り付けタグが発行されます。
試しに全オプションを表示させて、ボタン色をノーマルグレーで作ってみると以下のようなコードが発行されます。
<script type='text/javascript' src='[ショップドメイン]?mode=cartjs&pid=[商品ID]&style=normal_gray&name=y&img=y&expl=y&stock=y&price=y&optview=y&inq=y&sk=y' charset='euc-jp'></script>このコードで、[商品ID] の部分を変更すればいいわけなので、たとえばおすすめ商品のループで作ってみると以下のようになります。
<{ section name=num loop=$recommend }>
（省略:商品情報を表示させる部分）
<script type='text/javascript' src='[ショップドメイン]?mode=cartjs&pid=<{$recommend[num].id}>&style=normal_gray&name=y&img=y&expl=y&stock=y&price=y&optview=y&inq=y&sk=y' charset='euc-jp'></script>
<{/section}>簡単ですね。
どこでもカラーミー実装の弱点
簡単ではありますが、この実装方法にはデメリットも存在します。
ページのレンダリングに時間がかかる
弱点その１は、商品の数だけscriptタグが発行されるのでレンダリングに時間がかかり、ページ表示に影響を及ぼす懸念があること。
実際、この方法を採用しているショップ様のページは、体感でも表示が遅れることがあります。
Webページの表示に時間がかかるほど離脱率が高くなるのは有名な話です。よほど商品数が少ない場合を除いてはあまりおすすめしません。
document.writeを使用している
個人的にはこっちの方が重大ですが、どこでもカラーミーのソースを見てみるとdocument.writeを使ってボタンを生成しています。
html5になったときからdocument.writeは非推奨ですし、使うべきではないと考えます。
どこでもカラーミーを使わない場合の見本
詳しくは書きませんが、どこでもカラーミーを使わずに作った場合のサンプルが以下の動画です。
cssを調整していないので少しボタンがはみ出したりしていますが、最初のレンダリング時には一切カートボタンを読み込まさせず、カートボタンをクリックしたときに個別に読み込むように設定しています。
＊ 一度呼び出されたカートボタンはcssで表示/非表示を切り替えています。
ですのでページの表示速度に影響もありません。
クイックカート機能を併用しているので、商品一覧からまとめてカートインできるようにしています。
クイックカートについては「クイックカートを実装する」で少し紹介しています。
