超シンプルなショッピングカートを作る

ショッピングカートのオープンソースとしてはEC-CUBEが有名ですが、一般の方がセットアップするには多少難しいと思います。

また、そこまで高機能なものを求めていないケースも割と多いです。

有償・無償のサービスも有りますので、それを使うって手も有りますが、そもそも月に数度程度しか注文の無いケースや、常時販売していないキャンペーン物といった場合は余計なコストを掛けるのもどうかと思われます。

なんてケースがどのくらいあるのか判りませんが、jQueryで見栄えの割と良い簡単なショッピングカートのアイデアを１点ご紹介します。

https://studio-key.com/Sample2/simple_cart/

在庫管理等は一切無く、データベースはもちろん使いません。

キモは以下のHTMLソースです。

  <select class="items" id="goods1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  <button type="button" class="add_goods" title="カートに追加"
          data-name   ="りんご"
          data-kakaku ="1000"
          data-number ="item001"
          data-id     ="#goods1">
  </button>

idの部分は当然ですがユニークにし、品名や価格はボタンに対してdataで指定しています。

後はまぁjQueryに渡して処理するだけですね。

$(function() {
  var goods = new Object();
  
    /*
     * ボタンクリックで処理を開始
     */
       $(document).on('click',".add_goods",function(){
         var data      = $(this).data();          //ボタンに定義されているデータ
         var quantity  = $(data.id).val();        //選択した数量
         var sub_total = data.kakaku * quantity;  //単価 * 数量
         
       //オブジェクトを定義
         goods[data.number] = new Object();  //同じ商品を初期化
         goods[data.number] = {
            'name':data.name
           ,'kakaku':data.kakaku
           ,'quantity':quantity
           ,'sub_total':sub_total
         };
         
         cart_open();
       });
       
    /*
     * カートの中身のHTMLを作る
     */
      var cart_open = function(){
        $("#goods_list").html('');
        
        var html = '<ul>';
        var key;
        var total = 0;
        for (key in goods){
          html  += '<li>'+goods[key].name+' 個数:'+goods[key].quantity+' &nbsp;&nbsp;'+comma( goods[key].sub_total )+'円</li>';
          total += goods[key].sub_total;
        }
        html += '</ul>';
        html += '<div id="total">合計:'+comma( total )+'円</div>';
        
        //オブジェクトなのでそのままではPOSTの出来ないためJSON形式にする
        var data = JSON.stringify(goods);
        
        $("#goods_list").html(html); //上部カートにHTMLを挿入
        $("#cart_detail").show();    //カートを開く
        $("#data").val(data);        //POST[data]にカートの中身をセット
        
      }
      
    /*
     * フォームをPOSTする
     */
      $(document).on('click',"#go_cart a",function(){
        document.form.submit();
      });
      
    /*
     * カートを閉じる
     */
      $(document).on('click',"#close_cart span",function(){
        $("#cart_detail").hide();
      });
  
});

/*
 * 3桁ごとにカンマ
 */
  function comma(num) {
      return num.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' );
  }

カートの中身は下段に固定していますが、サイドバーにしたり上部にしたり、これはスタイルシートの範疇でどうにでもなると思います。

ボタンをクリックすると、その情報をオブジェクトにして格納し、POSTするだけという簡単なもの。

まぁ何かのネタになれば、という感じで。