Skip to main content

Dynamic Ajax Shopping Cart


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...!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Submitted byweb 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

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.