View

<html>
<head>
    <title>Codeigniter Shopping Cart with Ajax JQuery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
 <br /><br />

 <div class="col-lg-6 col-md-6">
  <div class="table-responsive">
   <h3 align="center">Coba Masuk lah</h3><br />
   <?php
   foreach($data_barang as $row)
   {
    echo '
    <div class="col-md-4" style="padding:10px; background-color:#f1f1f1; border:1px solid #ccc; margin-bottom:16px; height:200px" align="center">
   <br />
     <h4>'.$row->nama_barang.'</h4>
     <input type="text" name="quantity" class="form-control quantity" id="'.$row->id_barang.'" /><br />
     <button type="button" name="add_cart" class="btn btn-success add_cart" data-productname="'.$row->nama_barang.'" data-price="'.$row->jenis_barang.'" data-productid="'.$row->id_barang.'" />Tambahkan</button>
    </div>
    ';
   }
   ?>

  </div>
 </div>
 <div class="col-lg-6 col-md-6">
  <div id="cart_details">
   <h3 align="center">Cart is Empty</h3>
  </div>
 </div>

</div>
</body>
</html>
<script>
$(document).ready(function(){

 $('.add_cart').click(function(){
  var id_barang = $(this).data("productid");
  var nama_barang = $(this).data("productname");
  var jenis_barang = $(this).data("price");
  var quantity = $('#' + id_barang).val();
  if(quantity != '' && quantity > 0)
  {
   $.ajax({
    url:"<?php echo base_url(); ?>shopping_cart/add",
    method:"POST",
    data:{id_barang:id_barang, nama_barang:nama_barang, jenis_barang:jenis_barang, quantity:quantity},
    success:function(data)
    {
     alert("Product Added into Cart");
     $('#cart_details').html(data);
     $('#' + id_barang).val('');
    }
   });
  }
  else
  {
   alert("Please Enter quantity");
  }
 });


 $('#cart_details').load("<?php echo base_url(); ?>shopping_cart/load");

 $(document).on('click', '.remove_inventory', function(){
  var row_id = $(this).attr("id");
  if(confirm("Are you sure you want to remove this?"))
  {
   $.ajax({
    url:"<?php echo base_url(); ?>shopping_cart/remove",
    method:"POST",
    data:{row_id:row_id},
    success:function(data)
    {
     alert("Product removed from Cart");
     $('#cart_details').html(data);
    }
   });
  }
  else
  {
   return false;
  }
 });

 $(document).on('click', '#clear_cart', function(){
  if(confirm("Are you sure you want to clear cart?"))
  {
   $.ajax({
    url:"<?php echo base_url(); ?>shopping_cart/clear",
    success:function(data)
    {
     alert("Your cart has been clear...");
     $('#cart_details').html(data);
    }
   });
  }
  else
  {
   return false;
  }
 });

$('#save').on('click''.save_inventory', function(){
  var row_id= $(this).attr("id");
  if(confirm("Are you sure you want to save this?"))
  {
   $.ajax({
    url:"<?php echo base_url(); ?>shopping_cart/save",
    method:"POST",
    data:{"string":row_id},
    success:function(data)
    {
     alert("Data has been saved");
     $('#save').html(data);
    }
   });
  }
  else
  {
   return false;
  }
 });

swal({
        title : "Save Data to Database";
        text : '';
        type : '';
        showLoaderOnConfirm : true,
        showCancelButton : true,
        confirmButtonText : "Yes",
        closedOnConfirm : false},

        function(){

              var data = {'data_table' : table_data};
          $.ajax({
              data : 'data',
              type : 'POST',
              url : '<?php echo base_url('shopping_cart/save')?>',
              crossOrigin : false,
              dataType : 'json',
              success : function(result){
                console.log(result.check)
              }
          });

        });


});
</script>