In this part we gonna see how to add T-Shirts to shopping cart and how to remove T-Shirts from shopping cart.
If you followed all steps of part1, you html code should looks like :
<body>
<h2 class="ti">T-Shirts Collection</h2>
<div class="container">
<div class="articles">
<div>
<img src="imgFolder/img1.jpeg">
<div class="prod">
<h3 class="tit" id="brand1">Nike</h3>
<h4 id="price1">19.90</h4>
<h4>$</h4>
</div>
<div class="inputs">
<input type="number" id="quantity1" name="quantity1" min="1" max="99" value="1">
<select id="size1" name="size1">
<option value="size" disabled selected>Size</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<div>
<button class="addTo"> Add</button>
</div>
</div>
</div>
<div>
<img src="imgFolder/img2.jpeg">
<div class="prod">
<h3 class="tit" id="brand2">Levi's</h3>
<h4 id="price2">19.90</h4>
<h4>$</h4>
</div>
<div class="inputs">
<input type="number" id="quantity2" name="quantity2" min="1" max="99" value="1">
<select id="size2" name="size2">
<option value="size" disabled selected>Size</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<div>
<button class="addTo"> Add</button>
</div>
</div>
</div>
<div>
<img src="imgFolder/img3.jpeg">
<div class="prod">
<h3 class="tit" id="brand3">Puma</h3>
<h4 id="price3">16.90</h4>
<h4>$</h4>
</div>
<div class="inputs">
<input type="number" id="quantity3" name="quantity3" min="1" max="99" value="1">
<select id="size3" name="size3">
<option value="size" disabled selected>Size</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<div>
<button class="addTo"> Add</button>
</div>
</div>
</div>
</div>
<div class="cart">
<h3 class="tit">My articles</h3>
<ul id="items">
<li>Adidas, Size: M, Quantity: 2 x 18.90 $</li>
<li>Nike, Size: L, Quantity: 2 x 19.90$</li>
</ul>
<h3 style="text-align: right;">Total: 77.60 $</h3>
</div>
</div>
</body>
I put a link to Github project at the end of this article.
There are three shirts in this example but you can add more. Check if you gived a different id and a different name to elements and inputs.
In your javascript folder create a variables for total and index and a list for item price.
var total = 0;
var i = 1;
var itemCost = [];
Create a function add:
function add(n) {
}
The user should select a size of shirt. Add an alert message in case when the user forget to select a size.
var message = "Please select a size";
Add a p element after each div with class inputs in the html file.
<div class="inputs">
----------------
----------------
</div>
<p id="message1"></p>
The id of message for T-Shirt1 is: message1. The id of message for T-Shirt2 is: message2...
add onclick event to each button
<button class="addTo" onclick="add(1)"> Add</button>
onclick="add(1)" for t-shirt1. onclick="add(2)" for t-shirt2...
In javascript file. We gonna start by checking if the user selected a size.
function add(n) {
// Get the id of select list
sizeId = "size" + n
// Each select list has an id starts with the word size and ends with a number (ex: size1, size2...)
// Same rule apply to message, brand, price and quantity
messageId = "message" + n
// Use DOM to get the value of size
size = document.getElementById(sizeId).value
// Check if the user didn't select a size
if (size === "size"){
// Use DOM to alert the user
document.getElementById(messageId).innerHTML = message;
return 0
}
}
document.getElementById(messageId).innerHTML = " ";
}
Now we gonna get values of brand, price and quantity. Add the following code to the function add.
brand = "brand" + n
priceId = "price" + n
quantityId = "quantity" + n
// brand value
name = document.getElementById(brand).innerHTML
// price value
price = document.getElementById(priceId).innerHTML
// quantity value
document.getElementById(quantityId).value
After create a new element LI and give it an Id.
var node = document.createElement("LI")
// id for li element
item = "item" + i
node.setAttribute("id", item)
Then save the cost of selected T-Shirt in the array itemCost
itemCost[i - 1] = Number(price) * Number(quantity)
Update the index i so when a user select another shirt, the id of li element and the index of the new selected shirt will be differnt than the previous.
i += 1
Create a text for the li element. This text is information of ths shirt added to shopping cart.
var textnode = document.createTextNode(name + " " + quantity + " x " + price + " $, size: " + size)
Add the text to element li.
node.appendChild(textnode)
Add the element li to ul list.
document.getElementById("items").appendChild(node)
Update the number of total.
total += Number(price) * Number(quantity)
document.getElementById("total").innerHTML = "Total: " + total.toFixed(2) + " $"
Add a delete button to li element
document.getElementById(item).innerHTML += '<button onclick="deleItem(' + '"'" + item + '"'" + ')">x</button>'
Create a new function that allows the user to remove an item from the shopping cart:
document.getElementById(eId).remove
// slice is string method
// eId (element Id) contain word + number (ex:item4)
// n is the number in eId
n = Number(eId.slice(-1)) -1
// remove the cost of item from total
total -= itemCost[n]
/ / update the total
document.getElementById("total").innerHTML = "Total: " + total.toFixed(2) + " $"
}
You can download the code from github:
https://github.com/merazig/Javascript-cart/blob/master/cart.html
Comments
Post a Comment