先日行われたカラーミーショップ大賞の優秀ショップの中に、商品一覧に「カートにいれる」ボタンを実装しているショップ様がありました。
型番商品をメインで扱っており ”商品詳細を見るまでもない” 場合や、チケット販売のように ”お客様は少しでも早く決済にすすみたいと考えている”場合には良いんじゃないかと思います。
この実装にはいくつか方法が考えられますので、簡単なものをご紹介します。
どこでもカラーミーを利用する（おすすめしません）
カラーミーには「どこでもカラーミー」という外部サイトにカートボタンを作る機能があります。
この どこでもカラーミーを利用した実装が一番簡単ですので取り入れられているショップ様も多いだろうと思っています。
どこでもカラーミーで発行される貼り付けコードは同じデザインなら商品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] の部分を変更すればいいわけなので、たとえばおすすめ商品のループで作ってみると以下のようになります。
<{foreach from=$recommend item=item}>
（ 省略：画像とか商品名とか価格とか）
<script type='text/javascript' src='[ショップドメイン]?mode=cartjs&pid=<{$item.id}>&style=normal_gray&name=y&img=y&expl=y&stock=y&price=y&optview=y&inq=y&sk=y' charset='euc-jp'></script>
<{/foreach}>簡単ですね。
どこでもカラーミー実装をおすすめしない理由
簡単に実装できますが、この方法には問題点も存在します。
ページ表示に時間がかかる
問題点その１は、商品リストで使用すると、商品の数だけどこでもカラーミー用のscriptタグが発行されることになるので、ページが表示されるまでに時間がかかってしまう、レイアウトずれを起こすなど、Core WebVitalsにマイナス影響を及ぼす懸念があること（SEOで不利になる）。
実際、この方法を採用しているショップ様のページは、体感でも表示が遅いと感じることがよくあります。
Webページの表示に時間がかかるほど離脱率が高くなるのは有名な話です。よほど商品数が少ない場合を除いてはあまりおすすめしません。
document.writeを使用している
どこでもカラーミーが実行しているJSソースを読んでみるとdocument.writeを使ってボタンを生成しています。
html5になったときからdocument.writeは非推奨です。できるだけ使うべきではないと考えます。
どこでもカラーミーを使わない場合の見本
以下の動画は、どこでもカラーミーを使わずに作った簡単なサンプルです。
カート追加アイコンをクリックすると、数量入力フォームとカート追加ボタンが出てきて、リストから直接カートに追加できます。
かんたんに説明すると、最初にページ表示する時点では購入するための情報を読み込まず、ただのボタンを表示しているだけです。表示速度への影響はゼロです。
[カート+] ボタンをクリックしたときに始めて注文に必要な情報を取得し購入ボタンを作成しています。（一度作成したボタンはcssで表示/非表示を切り替えているだけなので、動作も軽いです）
これは適当に作ったサンプルですのでボタンが2回出てくる二度手間スタイル & CSSを調整しておらずボタンがはみ出したりしていますが、実際はご要望に応じて作り込みます。
クイックカートイン機能を併用すれば、まとめ買いにも対応できる
デモ画面ではクイックカート機能を併用しているので、商品の一覧からまとめてカートインできるようにしています。
クイックカートについては「クイックカートを実装する」で少し紹介しています。
具体的な作業内容と費用について
サービス紹介ページに記載しておりますので、「商品リストから直接カートに追加するカスタマイズ」よりご確認ください。
