使用 JQuery 计算购物车

Question

I am creating shopping cart with HTML/CSS and JQuery and stuck with two things:

When I am updating qunatity then SubTotal, Tax and Total value is not being updated and secondly on Buy now button, I have to post the data to json.

Here is my code in JSfiddle

 var taxRate = 0.2; //var shippingRate = 15.00; var fadeTime = 300; /* Assign actions */ $('.shoppingBasket-items__qty input').change( function() { updateQuantity(this); recalculateCart(); }); $('.remove-item').click( function() { removeItem(this); }); /* Recalculate cart */ function recalculateCart() { var subtotal = 0; /* Sum up row totals */ $('.shoppingBasket-items').each(function () { subtotal += parseFloat($(this).children('.shoppingBasket-items__price').text()); }); /* Calculate Sub-totals */ var tax = subtotal * taxRate; var total = subtotal + tax; /* Calculate totals */ var tax = subtotal * taxRate; var total = subtotal + tax; /* Update totals display */ $('.shoppingBasket-total__cost').fadeIn(fadeTime, function() { $('#cart-subtotal').html(subtotal.toFixed(2)); $('#cart-tax').html(tax.toFixed(2)); //$('#cart-shipping').html(shipping.toFixed(2)); $('#cart-total').html(total.toFixed(2)); if(total == 0){ $('.checkout').fadeOut(fadeTime); }else{ $('.checkout').fadeIn(fadeTime); } $('.totals-value').fadeIn(fadeTime); }); } recalculateCart(); /* Update quantity */ function updateQuantity(quantityInput) { /* Calculate line price */ var productRow = $(quantityInput).parent().parent(); var price = parseFloat(productRow.children('.shoppingBasket-items__cost').text()); var quantity = $(quantityInput).val(); var linePrice = price * quantity; /* Update line price display and recalc cart totals */ productRow.children('.shoppingBasket-items__cost').each(function () { $(this).fadeOut(fadeTime, function() { $(this).text(linePrice.toFixed(2)); recalculateCart(); $(this).fadeIn(fadeTime); }); }); recalculateCart(); } /* Remove item from cart */ function removeItem(removeButton) { /* Remove row from DOM and recalc cart total */ var productRow = $(removeButton).parent().parent(); productRow.slideUp(fadeTime, function() { productRow.remove(); recalculateCart(); }); }

 /* ---Shopping header--- */ .shoppingBasket { float: left; width: 90%; padding:0 40px; font-size: 14px; } .shoppingBasket-labels { width: 100%; float: left; border-bottom: 2px solid #999999; padding: 0 15px; } .shoppingBasket-labels__productTitle { width: 55%; float: left; } .shoppingBasket-labels__productPrice { width: 15%; float: left; } .shoppingBasket-labels__productQty { width: 15%; float: left; } .shoppingBasket-labels__productCost { width: 15%; float: left; text-align: right; } /* ---Shopping items--- */ .shoppingBasket-items { width: 100%; float: left; padding: 8px 15px; line-height: 26px; position: relative; } .shoppingBasket-items:nth-child(odd) { background-color:#dddddd; } .shoppingBasket-items:nth-child(even) { background-color:transparent; } .shoppingBasket-items__title { width: 55%; float: left; } .shoppingBasket-items__price { width: 15%; float: left; text-align: center; } .shoppingBasket-items__qty { width: 15%; float: left; text-align: center; } .shoppingBasket-items__qty > input{ width: 40px; text-align: right; min-height: 26px; } .shoppingBasket-items__cost { width: 15%; float: left; text-align: right; } .remove-item { position: absolute; right: -40px; top: 50%; margin-top: -5px; cursor: pointer; } .remove-item > svg { width: 1em; height: 1em; } .quantity { display: inline-block; vertical-align: middle; } .quantity > span { color: #fff; background: #999999; display: block; padding: 0 4px; font-size: 10px; cursor: pointer; line-height: normal; } .quantity > span:hover{ background: #333333; } .quantity > span:first-child{ margin-bottom: 1px; } .remove-item > svg path{ fill: #030368; } .shoppingBasket-subtotal, .shoppingBasket-vat, .shoppingBasket-total, .shoppingBasket-checkout { width: 100%; float: left; padding: 0 15px; } .shoppingBasket-subtotal__label, .shoppingBasket-vat__label, .shoppingBasket-total__label { width: 85%; float: left; } .shoppingBasket-subtotal__cost, .shoppingBasket-vat__cost, .shoppingBasket-total__cost { width: 15%; float: left; text-align: right; } .shoppingBasket-checkout .btn-checkout { float: right; background: #000066; border: 0; padding: 8px 12px; color: #ffffff; font-weight: bold; font-size: 16px; border-radius: 6px; box-shadow: 1px 2px 6px 1px rgba(0,0,0,0.45); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="shoppingBasket"> <div class="shoppingBasket-labels"> <div class="shoppingBasket-labels__productTitle">Product</div> <div class="shoppingBasket-labels__productPrice text-center">Price</div> <div class="shoppingBasket-labels__productQty text-center">Qty</div> <div class="shoppingBasket-labels__productCost text-center">Cost</div> </div> <div class="shoppingBasket-items"> <div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div> <div class="shoppingBasket-items__price">1.99</div> <div class="shoppingBasket-items__qty"> <input type="text" value="1"> <div class="quantity"> <span class="quantity-increse">+</span> <span class="quantity-decrease">-</span> </div> </div> <div class="shoppingBasket-items__cost"> 1.99 </div> <span class="remove-item"> <svg viewBox="0 0 20 20"> <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667 c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14 c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583 C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167 c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083 z"></path> </svg> </span> </div> <div class="shoppingBasket-items"> <div class="shoppingBasket-items__title">Baseball Cap, One Size</div> <div class="shoppingBasket-items__price">2.99</div> <div class="shoppingBasket-items__qty"> <input type="text" value="1"> <div class="quantity"> <span class="quantity-increse">+</span> <span class="quantity-decrease">-</span> </div> </div> <div class="shoppingBasket-items__cost"> 2.99 </div> <span class="remove-item"> <svg viewBox="0 0 20 20"> <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667 c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14 c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583 C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167 c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083 z"></path> </svg> </span> </div> <div class="shoppingBasket-items"> <div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div> <div class="shoppingBasket-items__price">3.99</div> <div class="shoppingBasket-items__qty"> <input type="text" value="1"> <div class="quantity"> <span class="quantity-increse">+</span> <span class="quantity-decrease">-</span> </div> </div> <div class="shoppingBasket-items__cost"> 3.99 </div> <span class="remove-item"> <svg viewBox="0 0 20 20"> <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667 c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14 c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583 C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167 c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083 z"></path> </svg> </span> </div> <div class="shoppingBasket-subtotal grey mar-top-40"> <div class="shoppingBasket-subtotal__label">Subtotal</div> <div class="shoppingBasket-subtotal__cost" id="cart-subtotal"></div> </div> <div class="shoppingBasket-vat grey mar-bot-40"> <div class="shoppingBasket-vat__label">VAT @ 20%</div> <div class="shoppingBasket-vat__cost" id="cart-tax"></div> </div> <div class="shoppingBasket-total mar-bot-40"> <div class="shoppingBasket-total__label"><strong> Total Cost</strong></div> <div class="shoppingBasket-total__cost" id="cart-total"></div> </div> <div class="shoppingBasket-checkout"> <button class="btn-checkout">Buy Now >></button> </div> </div>

Answer 1

On recalculateCart() function you need to multiply the price with the quantity. Here is the solution :

 var taxRate = 0.2; //var shippingRate = 15.00; var fadeTime = 300; /* Assign actions */ $('.shoppingBasket-items__qty input').change( function() { updateQuantity(this); recalculateCart(); }); $('.remove-item').click( function() { removeItem(this); }); /* Recalculate cart */ function recalculateCart() { var subtotal = 0; /* Sum up row totals */ $('.shoppingBasket-items').each(function () { subtotal += (parseFloat($(this).children('.shoppingBasket-items__price').text()) * $(this).children('.shoppingBasket-items__qty').find('[type="text"]').val()); }); /* Calculate Sub-totals */ var tax = subtotal * taxRate; var total = subtotal + tax; /* Calculate totals */ var tax = subtotal * taxRate; var total = subtotal + tax; /* Update totals display */ $('.shoppingBasket-total__cost').fadeIn(fadeTime, function() { $('#cart-subtotal').html(subtotal.toFixed(2)); $('#cart-tax').html(tax.toFixed(2)); //$('#cart-shipping').html(shipping.toFixed(2)); $('#cart-total').html(total.toFixed(2)); if(total == 0){ $('.checkout').fadeOut(fadeTime); }else{ $('.checkout').fadeIn(fadeTime); } $('.totals-value').fadeIn(fadeTime); }); } recalculateCart(); /* Update quantity */ function updateQuantity(quantityInput) { /* Calculate line price */ var productRow = $(quantityInput).parent().parent(); var price = parseFloat(productRow.children('.shoppingBasket-items__cost').text()); var quantity = $(quantityInput).val(); var linePrice = price * quantity; /* Update line price display and recalc cart totals */ productRow.children('.shoppingBasket-items__cost').each(function () { $(this).fadeOut(fadeTime, function() { $(this).text(linePrice.toFixed(2)); recalculateCart(); $(this).fadeIn(fadeTime); }); }); recalculateCart(); } /* Remove item from cart */ function removeItem(removeButton) { /* Remove row from DOM and recalc cart total */ var productRow = $(removeButton).parent().parent(); productRow.slideUp(fadeTime, function() { productRow.remove(); recalculateCart(); }); }

 /* ---Shopping header--- */ .shoppingBasket { float: left; width: 90%; padding:0 40px; font-size: 14px; } .shoppingBasket-labels { width: 100%; float: left; border-bottom: 2px solid #999999; padding: 0 15px; } .shoppingBasket-labels__productTitle { width: 55%; float: left; } .shoppingBasket-labels__productPrice { width: 15%; float: left; } .shoppingBasket-labels__productQty { width: 15%; float: left; } .shoppingBasket-labels__productCost { width: 15%; float: left; text-align: right; } /* ---Shopping items--- */ .shoppingBasket-items { width: 100%; float: left; padding: 8px 15px; line-height: 26px; position: relative; } .shoppingBasket-items:nth-child(odd) { background-color:#dddddd; } .shoppingBasket-items:nth-child(even) { background-color:transparent; } .shoppingBasket-items__title { width: 55%; float: left; } .shoppingBasket-items__price { width: 15%; float: left; text-align: center; } .shoppingBasket-items__qty { width: 15%; float: left; text-align: center; } .shoppingBasket-items__qty > input{ width: 40px; text-align: right; min-height: 26px; } .shoppingBasket-items__cost { width: 15%; float: left; text-align: right; } .remove-item { position: absolute; right: -40px; top: 50%; margin-top: -5px; cursor: pointer; } .remove-item > svg { width: 1em; height: 1em; } .quantity { display: inline-block; vertical-align: middle; } .quantity > span { color: #fff; background: #999999; display: block; padding: 0 4px; font-size: 10px; cursor: pointer; line-height: normal; } .quantity > span:hover{ background: #333333; } .quantity > span:first-child{ margin-bottom: 1px; } .remove-item > svg path{ fill: #030368; } .shoppingBasket-subtotal, .shoppingBasket-vat, .shoppingBasket-total, .shoppingBasket-checkout { width: 100%; float: left; padding: 0 15px; } .shoppingBasket-subtotal__label, .shoppingBasket-vat__label, .shoppingBasket-total__label { width: 85%; float: left; } .shoppingBasket-subtotal__cost, .shoppingBasket-vat__cost, .shoppingBasket-total__cost { width: 15%; float: left; text-align: right; } .shoppingBasket-checkout .btn-checkout { float: right; background: #000066; border: 0; padding: 8px 12px; color: #ffffff; font-weight: bold; font-size: 16px; border-radius: 6px; box-shadow: 1px 2px 6px 1px rgba(0,0,0,0.45); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="shoppingBasket"> <div class="shoppingBasket-labels"> <div class="shoppingBasket-labels__productTitle">Product</div> <div class="shoppingBasket-labels__productPrice text-center">Price</div> <div class="shoppingBasket-labels__productQty text-center">Qty</div> <div class="shoppingBasket-labels__productCost text-center">Cost</div> </div> <div class="shoppingBasket-items"> <div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div> <div class="shoppingBasket-items__price">1.99</div> <div class="shoppingBasket-items__qty"> <input type="text" value="1"> <div class="quantity"> <span class="quantity-increse">+</span> <span class="quantity-decrease">-</span> </div> </div> <div class="shoppingBasket-items__cost"> 1.99 </div> <span class="remove-item"> <svg viewBox="0 0 20 20"> <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667 c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14 c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583 C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167 c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083 z"></path> </svg> </span> </div> <div class="shoppingBasket-items"> <div class="shoppingBasket-items__title">Baseball Cap, One Size</div> <div class="shoppingBasket-items__price">2.99</div> <div class="shoppingBasket-items__qty"> <input type="text" value="1"> <div class="quantity"> <span class="quantity-increse">+</span> <span class="quantity-decrease">-</span> </div> </div> <div class="shoppingBasket-items__cost"> 2.99 </div> <span class="remove-item"> <svg viewBox="0 0 20 20"> <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667 c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14 c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583 C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167 c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083 z"></path> </svg> </span> </div> <div class="shoppingBasket-items"> <div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div> <div class="shoppingBasket-items__price">3.99</div> <div class="shoppingBasket-items__qty"> <input type="text" value="1"> <div class="quantity"> <span class="quantity-increse">+</span> <span class="quantity-decrease">-</span> </div> </div> <div class="shoppingBasket-items__cost"> 3.99 </div> <span class="remove-item"> <svg viewBox="0 0 20 20"> <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667 c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14 c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583 C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167 c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083 z"></path> </svg> </span> </div> <div class="shoppingBasket-subtotal grey mar-top-40"> <div class="shoppingBasket-subtotal__label">Subtotal</div> <div class="shoppingBasket-subtotal__cost" id="cart-subtotal"></div> </div> <div class="shoppingBasket-vat grey mar-bot-40"> <div class="shoppingBasket-vat__label">VAT @ 20%</div> <div class="shoppingBasket-vat__cost" id="cart-tax"></div> </div> <div class="shoppingBasket-total mar-bot-40"> <div class="shoppingBasket-total__label"><strong> Total Cost</strong></div> <div class="shoppingBasket-total__cost" id="cart-total"></div> </div> <div class="shoppingBasket-checkout"> <button class="btn-checkout">Buy Now >></button> </div> </div>

Answer 2

您的计算是错误的，如果您添加数量 2 并且数量会发生变化，但如果您将其改回 1，则不会显示计算结果