Of the first set of requirements, the number of parts that have been taken care of are in bold.
Adding products to your shopping cart is done on the event click on the add class item. If there is a product with the same name in the cart, it will increase its amount. If the product no longer exists in the shopping cart, the quantity will be 1.To add to the shopping cart, the content of the template item will be clustered with id item-basket-template. Values ??for cells with price and total classes will be set. Set or update the value for the input with the quantity class. The cloned element will be added to the page in the element with the item id. After adding, the date-index attribute is updated with the current index in the shopping cart
The next part of the requirements is: “If there is a product with the same name in the cart, it will increase its amount.”
I like to add a temporary product to the cart, so that we can have the code do what it’s expected to do in that situation.
<tbody id="items">
<tr>
<td><img class="image" src="img/supa.jpg" alt="Supa"></td>
<td class="name">Supa</td>
<td class="price">10.45</td>
<td>
<span class="amount">1</span>
<button class="remove" data-index="supa">Remove</button>
</td>
</tr>
</tbody>
With that cart item in place, we can now easily work on the next part of the addToCart function.
If there is a product with the same name in the cart, it will increase its amount.
When an item of the same name is in the cart, we just increase amount by 1.
That means getting the name of the item
function getName(itemRow) {
return itemRow.querySelector(".name").innerHTML;
}
function addToCart(itemRow) {
var name = getName(itemRow);
console.log(name);
}
getting a list of item names
function addToCart(itemRow) {
var cartRows = document.querySelectorAll("#items tr");
var cartItems = Array.from(cartRows).map(getName);
console.log(cartItems);
}
and checking if the name is in that list.
function addToCart(itemRow) {
var cartRows = document.querySelectorAll("#items tr");
var cartItems = Array.from(cartRows).map(getName);
if (cartItems.includes(name)) {
console.log(name);
}
}
And if the named row is already there, increase the count of that row
if (cartItems.includes(name)) {
var row = getCartRow(name);
increaseItemAmount(row);
}
The getCartRow function just needs to return the first row that’s found that has the name:
function getCartRow(name) {
var items = document.querySelector("#items tr");
return Array.from(items).find(function findName(row) {
return getName(row) === name;
});
}
And now that we have the appropriate row, we can increase its value.
function increaseItemAmount(row) {
var amount = row.querySelector(".amount").innerHTML;
amount = Number(amount) + 1;
row.querySelector(".amount").innerHTML = amount;
}
So of the first set of requirements, the piece of your assignment that has been done for you in this post is in bold.
Adding products to your shopping cart is done on the event click on the add class item. If there is a product with the same name in the cart, it will increase its amount. If the product no longer exists in the shopping cart, the quantity will be 1.To add to the shopping cart, the content of the template item will be clustered with id item-basket-template. Values ??for cells with price and total classes will be set. Set or update the value for the input with the quantity class. The cloned element will be added to the page in the element with the item id. After adding, the date-index attribute is updated with the current index in the shopping cart
The details will of course change depending on the intended structure of the cart table, and whether values are supposed to be in named input fields.
But hopefully, the above helps to give some insight into just how much work is needed for each piece of those requirements.
I just hope that you haven’t left it too late for your to finish your assignment. Just don’t forget that when you get other people to do your assignment work for you, that means that you haven’t done the work yourself.