カラーミーショップの一部テンプレートにはクイックカートイン機能が実装されていますが、非対応テンプレートでは使用することができません。
備忘録として、クイックカートを独自に実装する場合の手順を書いておきます。
クイックカートイン機能とは”
具体的には、「新しいショッピングカートでクイックカートインが利用可能になりました【新カゴプロジェクト通信 Vol.17】」に全て書いています。
要は、商品を追加してもカートページに遷移せずそのままショッピングを続けられるようになるので、複数商品を購入される機会の多いショップ様(に訪問されたお客様)に役立ちます。
クイックカートを利用していない場合、商品をカートにいれる」 -> カートページに移動 -> ショップに戻る を繰り返すことになります。
クイックカート実装に必要となるポイント
クイックカート導入に抑える必要があるのは以下の3ポイントです。
ちなみに全ての処理を自前で実装する場合は3ポイントで済みますが、カラーミーショップが発行しているクイックカート用scriptを利用する場合は5ポイント抑える必要があります。
この記事では自前実装するケースのみ解説していますのでご了承ください。
- 購入formのaction属性を変更(クイックカート用のURLに書き換える)
- カートに追加したこと or 失敗したことを通知するためのポップアップモーダルを追加
- 最終的にカートページに移動するためのコードを追加
順に解説していきます。
formのaction属性を変更
購入formの送信先を変更しなければ従来の動作になりますので、まずはaction属性を変更します。
具体的には、送信先URLの”add”の部分を”add_async”に書き変えます。
ポップアップを追加
ポップアップが無ければ、お客様は正常に処理が行われたのかどうか分かりません。ですので「商品がカートに追加されました」のようなメッセージを表示します。
ポップアップの内容は自由なので、販促バナーや関連商品を表示するなどの使い方もできます。
注意点として、すべてのお客様が複数商品を購入しようとしているわけではないことを覚えておきましょう。
つまり、ポップアップ内に購入手続きに進むためのリンクがあった方が好ましいです。
カートページに移動するためのコードを追加
クイックカート機能を利用する場合、最終的にカートページに移動するためのコードを別途用意しなければなりません。
通常カートの場合はカートページへのリンクですが、クイックカートではformのPOST送信で移動します。
多くの場合、共通ヘッダーにカートボタンを配置していると思いますので、このform処理だけは共通テンプレートに置く必要があります。
以上のポイントを抑えておけば、クイックカートイン非対応テンプレー具体的には、トであってもクイックカート機能を利用することが可能です。