先日行われたカラーミーショップ大賞の優秀ショップの中に、商品一覧に「カートにいれる」ボタンを実装しているショップ様がありました。
型番商品をメインで扱っており ”商品詳細を見るまでもない” 場合や、チケット販売のように ”お客様は少しでも早く決済にすすみたいと考えている”場合には良いんじゃないかと思います。
この実装にはいくつか方法が考えられますので、簡単なものをご紹介します。
どこでもカラーミーを利用する
カラーミーには「どこでもカラーミー」という外部サイトにカートボタンを作る機能があります。
この どこでもカラーミーを利用した実装が一番簡単ですので取り入れられているショップ様も多いだろうと思っています。
どこでもカラーミーで発行される貼り付けコードは同じデザインなら商品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を使用している
どこでもカラーミーが実行しているJSソースを見てみるとdocument.writeを使ってボタンを生成しています。
html5になったときからdocument.writeは非推奨です。できるだけ使うべきではないと考えます。
どこでもカラーミーを使わない場合の見本
ご依頼いただいてお作りしている内容ですので詳しくは書けませんが、どこでもカラーミーを使わずに作った場合のサンプルが以下の動画です。
かんたんに説明すると、最初のページ表示時点では購入するための情報を読み込まず、ただのボタンを表示しているだけですので、表示速度に影響はありません。
カート+ ボタンをクリックしたときのみ必要な情報を取得し購入ボタンを作成するように設定しています。（一度作成したボタンはcssで表示/非表示を切り替えているだけなので、動作も軽いです）
そこまで大がかりなプログラムではないのでご依頼いただけましたら、１～数日で完了します（商品オプションの有無や表示方法などで作業日数・費用が変わってきます）。
詳しくは、「カラーミーショップに関するお問合せ」よりお尋ねください。
* デモ画面では、スタイルを何も調整していないのでボタンがはみ出したりしています。本番ではきちんと整えています。
クイックカート機能を併用すれば、まとめ買いにも対応できる
デモ画面ではクイックカート機能を併用しているので、商品の一覧からまとめてカートインできるようにしています。
クイックカートについては「クイックカートを実装する」で少し紹介しています。
