**The code consists of 3 separated HTML file as follows:
**
1- “SHOP.html” An HTML file representing the shop (from where we can select a product)
2- “SPRODUCT.html” An HTML file with a varying content representing a template for the single selected product (includes the “add-to-cart” button, to add the selected product to the shopping cart)
3- “CART.html” An HTML file representing the shopping cart (In where I would like to have the list of the selected product from the “SPRODUCT.html”).
Whenever I select a product from the SHOP, the product details takes a place in the SPRODUCT template, then, I press the “add-to-cart” button to add it to the shopping cart. Then, I get back to the SHOP to select another product.
The problems is:
1- When I press the “add-to-cart” button (representing a specific product at that moment), I lose the old saved data of the previously selected product in the dataset “cartData”.
Here are my codes for the HTML files and their Javascripts:
FILE: SPRODUCT.html
<section id="prodetails" class="section-p1">
<div class="single-pro-img">
<a class="single-pro-img-class"></a>
</div>
<div class="single-pro-details">
<span class="prod-brand"></span>
<h5 class="prod-name"></h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="prod-price"></h5>
<select>
<option>SELECT TYPE OF NUTS (Stuffing and Decoration)</option>
<option>الكاوكاو</option>
<option>اللوز</option>
<option>الجوز</option>
<option>الفستق</option>ذ
<option>خليط من كل المكسرات</option>
</select>
<input type="number" value="1">
<a class="add-cart-button"><button class="normal">Add To Cart</button></a>
</div>
</section>
FILE: SPRODUCT.js
// ########## ADD TO CART BUTTON ########################################################
var addToCartButtons = document.getElementsByClassName('add-cart-button')
console.log(addToCartButtons)
const cartItem = [];
var button = addToCartButtons[0]
button.addEventListener('click', function (event){
var button = event.target
var shopItem = button.parentElement.parentElement.parentElement
var title = shopItem.getElementsByClassName('prod-name')[0].innerText.replace('Name:','')
var price = shopItem.getElementsByClassName('prod-price')[0].innerText.replace('Price:', '').replace('DZD', '')
var imgSrc = shopItem.getElementsByClassName('prod-img')[0].src
console.log(title, price, imgSrc)
// return(title, price, imgSrc)
const productItem = [title, price, imgSrc]
cartItem.push(productItem);
localStorage.setItem('cartData', JSON.stringify(cartItem));
console.log(cartItem)
});
FILE: CART.html
<section id="cart" class="section-p1">
<table width="100%">
<thead>
<tr>
<td>REMOVE</td>
<td>IMAGE</td>
<td>PRODUCT</td>
<td>PRICE</td>
<td>QUANTITY</td>
<td>SUBTOTAL</td>
</tr>
<tbody class="cart-items">
</tbody>
</thead>
</table>
</section>
FILE: CART.js
<script>
let cartData = JSON.parse(localStorage.getItem("cartData"));
var cartItems = document.getElementsByClassName("cart-items")[0]
for (var i = 0; i<cartData.length; i++) {
this["cartData"+i]=cartData[i]
}
let cartHTML = `
<tr class="cart-row">
<td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
<td><img src="${cartData0[2]}" alt=""></td>
<td>${cartData0[0]}</td>
<td class="cart-price">DZD ${cartData0[1]}</td>
<td><input class="cart-quantity-input" type="number" value="1"></td>
<td class="cart-sub-total">DZD ${cartData0[1]}</td>
</tr>`;
cartItems.innerHTML = cartHTML;
</script>
1- I expect saving and maintaining all the selected products after pressing the common “add-to-cart” button in the SPRODUCT.html template. But it does achieve this.
2- I don’t know how to creat a “for” loop that loops in the “cartData” and displays all the products in the cartData not only the first. I think this requires making the cartHTML variable in the “for” loop and I don’t know how to achieve that.
Could you please provide me with guidance to achieve the above two tasks that I believe will solve it?
