Hello
I'm doing my first online store project but I'm missing out on completing some tasks that I do not know at this point how to solve. Below is what I need to do:
- How to show the cart (which will be hidden) when the first item is inserted? And how to hide it again when there are no items?
- At the moment I can insert one item but once I load another, it is simply replaced. How do I add an item without removing what's already there? Will I also have to generate new HTML elements to pack each new item into the cart?
- How to increase / decrease the number in the input box?
-
How do I show the price in the format € 14.35 instead of € 14.3546567?
I did a jsfiddle to show the problem:
HTML
<main>
<section id="is-shopContainer">
<article id="section-shop">
<h2>Online Shop</h2>
<p>Articles available.</p>
<ol>
<li>
<div>
<h3>FlipFlops</h3>
<p>Beach shoes.</p>
</div>
<footer>
<p>€5</p>
<button data-shop-listing='{"name": "FlipFlops", "description": "FlipFlops", "price": 5.00}'>Add to cart</button>
</footer>
</li>
<li>
<div>
<h3>Raquet</h3>
<p>Play it</p>
</div>
<footer>
<p>€12.99</p>
<button data-shop-listing='{"name": "Raquet", "description": "Play the Raquet", "price": 12.99}'>Add to cart</button>
</footer>
</li>
<li>
<div>
<h3>Balls</h3>
<p>Raquet balls.</p>
</div>
<footer>
<p>€9.99</p>
<button data-shop-listing='{"name": "Balls", "description": "Balls.", "price": 9.99}'>Add to cart</button>
</footer>
</li>
<li>
<div>
<h3>Buoy</h3>
<p>A buoy</p>
</div>
<footer>
<p>€2.50</p>
<button data-shop-listing='{"name": "Buoy", "description": "A buoy", "price": 5.50}'>Add to cart</button>
</footer>
</li>
</ol>
</article>
</section>
<article id="section-shoppingcart">
<h2>Your shopping cart</h2>
<p>…is empty.</p>
<form id="shoppingcart-form">
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3></h3>
<p></p>
<div>
<button>Remove</button>
</div>
</td>
<td>
<output></output>
</td>
<td>
<input type="number" min="1" value="1">
<span>
<button type="button" aria-label="decrease">
-
</button>
<button type="button" aria-label="step up">
+
</button>
</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<ol>
<li>
<label>Price before <abbr title="Value Added Tax">VAT</abbr>:</label>
<output></output>
</li>
<li>
<label><abbr title="Value Added Tax">VAT</abbr> @ <strong>20</strong>%:</label>
<output></output>
</li>
<li>
<label>Total to be paid:</label>
<output></output>
</li>
</ol>
</td>
</tr>
</tfoot>
</table>
<footer>
<p>
</p>
<a href="#"></a> <button type="submit" form="shoppingcart-form">Proceed to Checkout</button>
</footer>
</form>
</article>
jQuery
$(document).ready(function(){
//add items to cart
var itemData = $('#section-shop button').each(function(){
var productName = $(this).data('shop-listing').name;
var productDescription = $(this).data('shop-listing').description;
var productPrice = $(this).data('shop-listing').price;
console.log(productName);
console.log(productDescription);
console.log(productPrice);
$(this).on('click', function(product, description, price){
$('#shoppingcart-form tbody tr td h3').text(productName);
$('#shoppingcart-form tbody tr td p').text(productDescription);
$('#shoppingcart-form output').text('€'+ productPrice);
//get input label to increase/decrease number
var inp = $('#shoppingcart-form tbody tr td:last-child
input').val();
//increase/decrease price
var totalPrice = productPrice;
$('#shoppingcart-form tfoot ol li:first-child
output').text(totalPrice);
if($('#shoppingcart-form tbody button:first-child').click(function()
{
price++;
totalPrice++;
inp++;
}));
if($('#shoppingcart-form tbody button:last-child').click(function(){
price--;
totalPrice--;
inp--;
}));
//add VAT
var VAT = 20/100 * totalPrice;
$('#shoppingcart-form tfoot ol li:nth-child(2) output').text('€' +
VAT);
//Total Price with VAT
var total = VAT + totalPrice;
//print total price
$('#shoppingcart-form tfoot ol li:last-child output').text('€' +
total);
});
});
//show/hide shopping cart when first item is choosen or is empty
var shoppingCart = $('#section-shoppingcart');
if(shoppingCart.length > 0) {
$(this).css('opacity', 1);
} else {
$(this).css('opacity', 0);
}
//remove items from the cart
$('#shoppingcart-form tbody tr td:first-child div button').on('click', function() {
$(this).remove(itemData);
});
console.log(itemData);
//Checkout button inactive
$('#shoppingcart-form footer button').on('click', function(e){
e.preventDefault();
$(this).attr('disabled', 'disabled').prop('disabled', true).css('opacity', '0.5');
$(this).text('Sending your order');
});
});
Thanks for the help.