You have seen and like the previous shopping cart tutorials and here is part 2 for that one. I was wondering over internet and I checked a cart which I liked very much and I thought to create a cart with some animation like that. So I created this one.Ajax and JQuery shopping carts are my favorite way to implement a cart in to website. I hope you will love it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
$(document).ready(function() { var Arrays=new Array(); $('.add-to-cart-button').click(function(){ var thisID = $(this).parent().parent().attr('id').replace('detail-',''); var itemname = $(this).parent().find('.item_name').html(); var itemprice = $(this).parent().find('.price').html(); if(include(Arrays,thisID)) { var price = $('#each-'+thisID).children(".shopp-price").find('em').html(); var quantity = $('#each-'+thisID).children(".shopp-quantity").html(); quantity = parseInt(quantity)+parseInt(1); var total = parseInt(itemprice)*parseInt(quantity); $('#each-'+thisID).children(".shopp-price").find('em').html(total); $('#each-'+thisID).children(".shopp-quantity").html(quantity); var prev_charges = $('.cart-total span').html(); prev_charges = parseInt(prev_charges)-parseInt(price); prev_charges = parseInt(prev_charges)+parseInt(total); $('.cart-total span').html(prev_charges); $('#total-hidden-charges').val(prev_charges); } else { Arrays.push(thisID); var prev_charges = $('.cart-total span').html(); prev_charges = parseInt(prev_charges)+parseInt(itemprice); $('.cart-total span').html(prev_charges); $('#total-hidden-charges').val(prev_charges); var Height = $('#cart_wrapper').height(); $('#cart_wrapper').css({height:Height+parseInt(45)}); $('#cart_wrapper .cart-info').append(' <div id="each-'+thisID+'" class="shopp"> <div class="label">'+itemname+'</div> <div class="shopp-price">$<em>'+itemprice+'</em></div> <span class="shopp-quantity">1</span><img class="remove" src="remove.png" alt=""></div> '); } }); $('.remove').livequery('click', function() { var deduct = $(this).parent().children(".shopp-price").find('em').html(); var prev_charges = $('.cart-total span').html(); var thisID = $(this).parent().attr('id').replace('each-',''); var pos = getpos(Arrays,thisID); Arrays.splice(pos,1,"0") prev_charges = parseInt(prev_charges)-parseInt(deduct); $('.cart-total span').html(prev_charges); $('#total-hidden-charges').val(prev_charges); $(this).parent().remove(); }); $('#Submit').livequery('click', function() { var totalCharge = $('#total-hidden-charges').val(); $('#cart_wrapper').html('Total Charges: <div style="min-height: 800px;"> <div id="cart_wrapper"><form id="cart_form" action="#"> <div class="cart-total"><strong>Total Charges:</strong> $0 <input id="total-hidden-charges" name="total-hidden-charges" type="hidden" value="0"></div> <button id="Submit">CheckOut</button></form></div> <div id="wrap"><a id="show_cart"></a>View Cart <ul> <li style="list-style-type: none;"> <ul> <li id="1"><img class="items" src="product_img/1.jpg" alt="" height="100"> <div>Red Grocery Bag</div> </li> <li id="2"><img class="items" src="product_img/2.jpg" alt="" height="100"> <div>Reusable Grocery Bag</div> </li> <li id="3"><img class="items" src="product_img/3.jpg" alt="" height="100"> <div>White Grocery Bag</div> </li> <li id="4"><img class="items" src="product_img/4.jpg" alt="" height="100"> <div>Yellow Grocery Bag</div> </li> <!-- Detail Boxes for above four li --></ul> </li> </ul> <div id="detail-1" class="detail-view"> <div class="close"><a>x</a></div> <img class="detail_images" src="product_img/1.jpg" alt="" width="340" height="310"> <div class="detail_info"><label class="item_name">Red Grocery Bag</label> shopping bag, shopping, bag, merchandise, consumerism, gift: $<span class="price">80.00</span> <button class="add-to-cart-button">Add to Cart</button></div> </div> <div id="detail-2" class="detail-view"> <div class="close"><a>x</a></div> <img class="detail_images" src="product_img/2.jpg" alt="" width="340" height="310"> <div class="detail_info"><label class="item_name">Reusable Grocery Bag</label> shopping bag, shopping, bag, merchandise, consumerism, gift: $<span class="price">70.00</span> <button class="add-to-cart-button">Add to Cart</button></div> </div> <div id="detail-3" class="detail-view"> <div class="close"><a>x</a></div> <img class="detail_images" src="product_img/3.jpg" alt="" width="340" height="310"> <div class="detail_info"><label class="item_name">White Grocery Bag</label> shopping bag, shopping, bag, merchandise, consumerism, gift: $<span class="price">50.00</span> <button class="add-to-cart-button">Add to Cart</button></div> </div> <div id="detail-4" class="detail-view"> <div class="close"><a>x</a></div> <img class="detail_images" src="product_img/4.jpg" alt="" width="340" height="310"> <div class="detail_info"><label class="item_name">Yellow Grocery Bag</label> shopping bag, shopping, bag, merchandise, consumerism, gift: $<span class="price">90.00</span> <button class="add-to-cart-button">Add to Cart</button></div> </div> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
html, body{ margin:0; padding:0; border:0; outline:0; } #wrap{ width:100%; min-height:900px; top:0px; position:relative; bottom:0px; } #wrap ul{ margin:0px; padding:0px; width: 700px;text-align:center; } #wrap .detail-view { border: 1px solid #E2E2E2; border-top: 1px solid #E2E2E2; left: 0; height:380px; overflow: hidden; clear:both; display:none; margin-left:13px; margin-bottom:15px; width: 96%; } #wrap .detail-view .close{ text-align:right; width:98%; margin:5px; } #wrap .close a{ padding:6px; height:10px; width:20px; color:#525049; } #wrap .detail-view .detail_images{ float:left} #wrap .detail-view .detail_info{ float:right; font-family: "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; color:#525049; margin-right:20px; margin-top:30px; text-align:justify; width:250px; font-size:12px; } #wrap .detail-view .detail_info label{ font-size:12px;text-transform:uppercase; letter-spacing:1px; line-height:60px;} #wrap .detail-view .detail_info p{ height:110px;} a#show_cart{ background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #E8E7DC; cursor: pointer; display:block; display: inline-block; font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; letter-spacing: 2px; color:#525049; padding:8px; text-decoration:none; text-transform: uppercase; } .add-to-cart-button{ background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #E8E7DC; cursor: pointer; display: inline-block; font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; letter-spacing: 2px; padding-top: 10px;color:#525049; margin-top:15px; text-transform: uppercase; } .add-to-cart-button:hover { background: none repeat scroll 0 0 #F8F8F3; } .shopp{background: none repeat scroll 0 0 #F8F8F3;} #wrap ul li{ list-style-type:none; height:146px; width:160px; margin-left:10px; margin-bottom:15px; float:left; padding:15px 0px 0px 0px; font-family:"LubalGraphBdBTBold",Tahoma; font-size:2em; border:solid #fff 1px; overflow:hidden; } .footer{ height:400px; background:#E2E2E2} #wrap ul li:hover{ border:solid #f3f4ee 1px; } #wrap ul li div{ height:31px; text-align:center; width:160px; margin-top:10px; position:relative; bottom:0px; padding-top:6px; padding-bottom:4px; background:#f3f4ee ; font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; opacity:0.8; color: #525049 ; text-shadow: 0px 2px 3px #555; } img#cart{bottom:0px;position:fixed; margin-left:30px; /* keep the bar on top */} #wrap ul li { cursor:pointer;} #cart_wrapper { border:solid #E8E7DC 1px; min-height:120px; width:100%; padding-top:15px; display:none; background:#E2E2E2; font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; position:relative } #Submit { height: 78px; float:left; } .closeCart{ cursor:pointer;} button { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #E8E7DC; width:140px; cursor: pointer; display: inline-block; font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; letter-spacing: 2px; padding-top: 12px;color:#525049; margin-top:1px; border:solid #ccc 1px; padding:8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; margin-left:20px; text-transform: uppercase; } button:hover { background: none repeat scroll 0 0 #F8F8F3; } .cart-total{background: none repeat scroll 0 0 #F8F8F3;} .shopp,.cart-total{ border:solid #E8E7DC 1px; padding:8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; font-size:12px; background:url(remove.png) center right no-repeat 5px; border-radius: 8px; font-family:"LubalGraphBdBTBold",Tahoma; margin-top:3px; width:320px; float:left; } #cart_form{ width:570px; padding-left:15px;} div.shopp span{ float:left;} div.shopp div.label{ width:130px; float:left; } div.shopp div.shopp-price{ width:70px; float:left;} .quantity{ float:left; margin-top:-3px; width:20px;} img.remove{float:right;cursor:pointer;} .cart-total b{width:130px;} |
how make cart in jqury mobile give me a code full code
in my email bhupinder.netinnovatus@gmail.com