ショッピングカート機能

簡易料金計算機能とは異なり、メールフォームプロを完全なショッピングカートとして利用するための機能です。

メールフォームプロCGIダウンロードページへ

ショッピングカート機能はアドオンcart/cart.jsとモジュールcartの両方を有効にする必要があります。

ショッピングカートのデモはデモページをご参照ください。

カートの中身を表示したい場所に以下のオブジェクトを配置してください。

＜div id="mfp_shopping_cart"＞＜/div＞

上記のタグが追加されていない場合、cart.jsは自動的にオブジェクトを＜form＞タグの直前に挿入します。
見た目の編集は/add-ons/cart/cart.jsと/css/cart.cssで行います。

商品をカートに入れる

＜form action="フォームHTMLのパス"＞
＜input type="hidden" name="item" value="商品ID" /＞
＜input type="hidden" name="name" value="商品名" /＞
＜input type="hidden" name="price" value="商品単価" /＞
＜input type="hidden" name="qty" value="数量" /＞
＜input type="submit" value="カートに入れる" /＞
＜/form＞

上記のようなタグで、商品をカートに入れることができます。後述のセキュリティ設定を有効にしている場合は、商品IDと数量のみを送信してください。

jsonでカートの中身を参照・編集

ショッピングカート機能では他のページからカートの中身をjsonで取得することができます。取得する際のURIは以下のようになります。

/mailformpro.cgi?addon=cart/cart.js&callback=コールバック関数

上記の引数に item=商品ID、qty=数量 を付け加えた場合は、カートへの商品追加を、update=商品ID、qty=数量 を付け加えた場合はカート内の数量変更・削除を行い、カートの中身を返します。

jsonにより返される値は以下の通りです。


  'id': '商品ID',
  'qty': '数量',
  'price': '商品単価',
  'name': '商品名'

セキュリティ設定

フォームからの送信時に価格情報などが不正に変更された場合に、それを検知し防ぐ機能がItem Secure Matchです。商品IDと価格情報を記載したTSV形式(タブ区切りテキスト)のファイルと照合することで、価格が不正に変更された場合に、その商品情報を無効にします。
詳細は以下のファイルをご参照ください。
/configs/cartcgi/configs/Items.tsv

応用編

例えばApp Storeのようにカートに商品を入れる際に画面遷移したくない場合などはjsonを利用して画面遷移せずに商品をカートに入れる事も可能です。具体的な例としては、以下のようなコードを用いて商品をカートに入れる事ができます。

＜input type="button" value="カートに入れる" onclick="addcart(this,'Nexus7_32GB','カートに入れました')" /＞
＜script type="text/javascript"＞
　function addcart(obj,itemId,msg){
　　obj.value = msg;
　　obj.disabled = true;
　　var script = document.createElement('script');
　　script.type = 'text/javascript';
　　script.src = 'mailformpro.cgi?addon=cart/cart.js&qty=1&callback=addcartCallback&item='+itemId;
　　script.charset = 'UTF-8';
　　document.body.appendChild(script);
　};
　function addcartCallback(json){};
＜/script＞

コメント欄