Dynamic Ajax Shopping Cart

Submitted by rinvizle on Monday, September 12, 2016 - 08:26.
This Dynamic Ajax Shopping Cart is a simple project written in AJAX, jQuery and PHP. This project created to make the shopping cart dynamically without using of internet for the presentation how the shopping cart works. The system has a products that you want to add to the cart and automatically total the expenses that you bought and create a checkout just like from the online shops.

Sample Code

Index.php - This script is for the query of products from the page and sum it all.
  1. $(document).ready(function() {
  2.         var Arrays=new Array();
  3.         $('.add-to-cart-button').click(function(){
  4.                 var thisID        = $(this).parent().parent().attr('id').replace('detail-','');
  5.                 var itemname  = $(this).parent().find('.item_name').html();
  6.                 var itemprice = $(this).parent().find('.price').html();
  7.                
  8.                 if(include(Arrays,thisID))
  9.                 {
  10.                         var price        = $('#each-'+thisID).children(".shopp-price").find('em').html();
  11.                         var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
  12.                         quantity = parseInt(quantity)+parseInt(1);
  13.                         var total = parseInt(itemprice)*parseInt(quantity);
  14.                         $('#each-'+thisID).children(".shopp-price").find('em').html(total);
  15.                         $('#each-'+thisID).children(".shopp-quantity").html(quantity);
  16.                         var prev_charges = $('.cart-total span').html();
  17.                         prev_charges = parseInt(prev_charges)-parseInt(price);
  18.                         prev_charges = parseInt(prev_charges)+parseInt(total);
  19.                         $('.cart-total span').html(prev_charges);
  20.                         $('#total-hidden-charges').val(prev_charges);
  21.                 }
  22.                 else
  23.                 {
  24.                         Arrays.push(thisID);
  25.                         var prev_charges = $('.cart-total span').html();
  26.                         prev_charges = parseInt(prev_charges)+parseInt(itemprice);
  27.                         $('.cart-total span').html(prev_charges);
  28.                         $('#total-hidden-charges').val(prev_charges);
  29.                         var Height = $('#cart_wrapper').height();
  30.                         $('#cart_wrapper').css({height:Height+parseInt(45)});
  31.                         $('#cart_wrapper .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');
  32.                 }
  33.         });    
  34.         $('.remove').livequery('click', function() {
  35.                 var deduct = $(this).parent().children(".shopp-price").find('em').html();
  36.                 var prev_charges = $('.cart-total span').html();
  37.                 var thisID = $(this).parent().attr('id').replace('each-','');
  38.                 var pos = getpos(Arrays,thisID);
  39.                 Arrays.splice(pos,1,"0")
  40.                 prev_charges = parseInt(prev_charges)-parseInt(deduct);
  41.                 $('.cart-total span').html(prev_charges);
  42.                 $('#total-hidden-charges').val(prev_charges);
  43.                 $(this).parent().remove();
  44.         });    
  45.         $('#Submit').livequery('click', function() {
  46.                 var totalCharge = $('#total-hidden-charges').val();
  47.                 $('#cart_wrapper').html('Total Charges: $'+totalCharge);
  48.                 return false;
  49.         });    
  50.         var single_li_offset    = 200;
  51.         var current_opened_box  = -1;
  52.         $('#wrap li').click(function() {
  53.                 var thisID = $(this).attr('id');
  54.                 var $this  = $(this);
  55.                 var id = $('#wrap li').index($this);
  56.                 if(current_opened_box == id)
  57.                 {
  58.                         $('#wrap .detail-view').slideUp('slow');
  59.                         return false;
  60.                 }
  61.                 $('#cart_wrapper').slideUp('slow');
  62.                 $('#wrap .detail-view').slideUp('slow');
  63.                 current_opened_box = id;
  64.                 var targetOffset = 0;
  65.                 if(id<=3)
  66.                         targetOffset = 0;
  67.                 else if(id<=7)
  68.                         targetOffset = single_li_offset;
  69.                 else if(id<=11)
  70.                         targetOffset = single_li_offset*2;
  71.                 else if(id<=15)
  72.                         targetOffset = single_li_offset*3;
  73.                 $("html:not(:animated),body:not(:animated)").animate({scrollTop: targetOffset}, 800,function(){
  74.                 $('#wrap #detail-'+thisID).slideDown(500);
  75.                         return false;
  76.                 });
  77.         });
  78.         $('.close a').click(function() {
  79.                 $('#wrap .detail-view').slideUp('slow');
  80.         });
  81.         $('.closeCart').click(function() {
  82.                 $('#cart_wrapper').slideUp();
  83.                
  84.         });
  85.         $('#show_cart').click(function() {
  86.                 $('#cart_wrapper').slideToggle('slow');
  87.         });
  88. });
  89. function include(arr, obj) {
  90.   for(var i=0; i<arr.length; i++) {
  91.     if (arr[i] == obj) return true;
  92.   }
  93. }
  94. function getpos(arr, obj) {
  95.   for(var i=0; i<arr.length; i++) {
  96.     if (arr[i] == obj) return i;
  97.   }
  98. }
  99. </script>
Style.css - This file is for the dynamic design of the page and help for the nice output of process.
  1. html, body{
  2.         margin:0;
  3.         padding:0;
  4.         border:0;
  5.         outline:0;
  6. }
  7. h1{
  8.         text-shadow:1px 1px 3px;
  9. }
  10. ul {
  11.     list-style-type: none;
  12.     margin: 0;
  13.     padding: 0;
  14.     overflow: hidden;
  15. }
  16.  
  17. .header ul{
  18.         background:#000;
  19. }
  20.  
  21. li {
  22.     float: left;
  23. }
  24.  
  25. li a {
  26.     display: block;
  27.     color: white;
  28.     text-align: center;
  29.     padding: 14px 16px;
  30.     text-decoration: none;
  31. }
  32.  
  33. li a:hover {
  34.     background-color: #95e0eb;
  35. }
  36. #wrap{ width:100%; min-height:900px; top:0px; position:relative; bottom:0px; }
  37. #wrap ul{ margin:0px; padding:0px; width: 700px;text-align:center;  }
  38. #wrap .detail-view {
  39.     border: 1px solid #E2E2E2;
  40.     border-top: 1px solid #E2E2E2;
  41.     left: 0;
  42.         height:380px;
  43.     overflow: hidden;
  44.         clear:both;
  45.         display:none;
  46.         margin-left:13px;
  47.         margin-bottom:15px;
  48.     width: 96%;
  49. }
  50. #wrap .detail-view .close{ text-align:right; width:98%; margin:5px; }
  51. #wrap .close a{ padding:6px; height:10px; width:20px; color:#525049; }
  52. #wrap .detail-view .detail_images{ float:left}
  53. #wrap .detail-view .detail_info{
  54.         float:right;
  55.         font-family: "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
  56.         color:#525049;
  57.         margin-right:20px;
  58.         margin-top:30px;
  59.         text-align:justify;
  60.         width:250px;
  61.         font-size:12px;
  62. }
  63. #wrap .detail-view .detail_info label{ font-size:12px;text-transform:uppercase; letter-spacing:1px; line-height:60px;}
  64. #wrap .detail-view .detail_info p{ height:110px;}
  65. a#show_cart{
  66.     background: none repeat scroll 0 0 #95e0eb;
  67.     border: 1px solid #118da9;
  68.         margin-left: 800px;
  69.         margin-top: 4px;
  70.     cursor: pointer;
  71.         border-radius: 3px;
  72.     display: inline-block;
  73.     font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
  74.     letter-spacing: 2px;
  75.     color:#525049;
  76.         padding:8px;
  77.         text-decoration:none;
  78.     text-transform: uppercase;
  79. }
  80. .add-to-cart-button{
  81.     background: none repeat scroll 0 0 #95e0eb;
  82.     border: 1px solid #E8E7DC;
  83.     cursor: pointer;
  84.     display: inline-block;
  85.     font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
  86.     letter-spacing: 2px;
  87.     padding-top: 10px;color:#525049;
  88.         margin-top:15px;
  89.     text-transform: uppercase;
  90. }
  91. .add-to-cart-button:hover {
  92.     background: none repeat scroll 0 0 #41cc65;
  93. }
  94. .shopp{background: none repeat scroll 0 0 #F8F8F3;}
  95. #wrap ul li{
  96.         list-style-type:none;
  97.         height:146px;
  98.         width:160px;
  99.         margin-left:10px;
  100.         margin-bottom:15px;
  101.         float:left;
  102.         padding:15px 0px 0px 0px;
  103.         font-family:"LubalGraphBdBTBold",Tahoma;
  104.         font-size:2em;
  105.         border:solid #fff 1px;
  106.         overflow:hidden;
  107. }
  108. .footer{ height:25px; background:#E2E2E2}
  109. #wrap ul li:hover{ border:solid #f3f4ee 1px; }
  110. #wrap ul li div{
  111.         height:31px;
  112.         text-align:center;
  113.         width:160px;
  114.         margin-top:10px;
  115.         position:relative;
  116.         bottom:0px;
  117.         padding-top:6px;
  118.         padding-bottom:4px;
  119.         background:#f3f4ee ;
  120.         font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
  121.         opacity:0.8;
  122.         color: #525049 ;
  123.         text-shadow: 0px 1px 0px #555;
  124. }
  125. img#cart{bottom:0px;position:fixed; margin-left:30px;}
  126. #wrap ul li { cursor:pointer;}
  127. #cart_wrapper {
  128.         border:solid #E8E7DC 1px;
  129.         min-height:120px;
  130.         width:100%;
  131.         padding-top:15px;
  132.         display:none;
  133.     background:#E2E2E2;
  134.         font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
  135.         position:relative
  136. }
  137. #Submit {
  138.         height: 40px;
  139.     float: left;
  140.     width: 100px;
  141.         background: #95e0eb;
  142. }
  143. #Submit:hover{
  144.         background: #41cc65;
  145. }
  146. .closeCart{ cursor:pointer;}
  147. button {
  148.         background: none repeat scroll 0 0 #FFFFFF;
  149.     border: 1px solid #E8E7DC;
  150.         width:140px;
  151.     cursor: pointer;
  152.     display: inline-block;
  153.     font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
  154.     letter-spacing: 2px;
  155.     padding-top: 12px;color:#525049;
  156.         margin-top:1px;
  157.         border:solid #ccc 1px; padding:8px;
  158.         -webkit-border-radius: 8px;
  159.         -moz-border-radius: 8px;
  160.         margin-left:20px;
  161.     text-transform: uppercase;
  162. }
  163. button:hover {
  164.     background: none repeat scroll 0 0 #F8F8F3;
  165. }
  166. .cart-total{background: none repeat scroll 0 0 #F8F8F3;}
  167. .shopp,.cart-total{
  168.         border:solid #E8E7DC 1px; padding:8px;
  169.         -webkit-border-radius: 8px;
  170.         -moz-border-radius: 8px; font-size:12px;
  171.         background:url(remove.png) center right no-repeat 5px;
  172.         border-radius: 8px;
  173.         font-family:"LubalGraphBdBTBold",Tahoma;
  174.         margin-top:3px;
  175.         width:320px;
  176.         float:left;
  177. }
  178. #cart_form{ width:570px; padding-left:15px;}
  179. div.shopp span{ float:left;}   
  180. div.shopp div.label{ width:130px; float:left; }        
  181. div.shopp div.shopp-price{ width:70px; float:left;}
  182. .quantity{ float:left; margin-top:-3px; width:20px;}
  183. img.remove{float:right;cursor:pointer;}
  184. .cart-total b{width:130px;}
result Hope that you learn from this tutorial and don't forget to Like & Share this project and the website. Enjoy Coding...!
Tags
#PHP
AJAX
#JavaScript #Web #Jquery
Shopping cart

Comments

Submitted by web onre (not verified) on Mon, 01/14/2019 - 00:01

Beautiful code. Will this code work with a template html5/css cart? I have a nicely formatted shopping cart on a bootstrap 3.5 template and aam looking for code to power it.

Add new comment

About text formats