商品一覧にカートボタンを付ける

おすすめ商品、ランキング、お気に入りなどトップページに表示できる商品リストや、商品一覧ページに表示される商品リストに、どこでもカラーミーを使ってカートボタンを設置する方法です。

商品詳細ページに移動することなく、このページでカートに入れられます。クイックカートイン(下記事を参照)と相性がよいと思います。

参考)新しいショッピングカートでクイックカートインが利用可能になりました【新カゴプロジェクト通信 Vol.17】

どこでもカラーミー設置例

 

実装
以前書いたブログ記事を参考にどうぞ。

カラーミーショップのどこでもカラーミーについて実践的に学ぶ

注意点
「カートに入れる」ボタンはinputタグで書いてありますので、:beforeは効きません。
文字列の前方に input:before でカートアイコン画像を付けることはできません。

カートボタンのデザインを調整するには、!importantを付けてスタイルを効かせます。

購入数1でカートに入ります。

オプションなし・購入数1の商品に使うと周囲がゴチャっとしなくてよいかなと思います。

商品説明を読むことなくカートに入れられてしまうので、商品についてしっかり伝えたいことがある場合は向きません。

売切れ時はボタンは非表示になる仕様ですが、条件によっては SOLD OUT 表示させることも可能です。

制作物用のお問い合わせボタン

えいじ@naeco.jp この記事を書いた人

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

ご相談・お問い合わせはこちら

関連記事