I am a beginner Web Developer and still fairly new to JavaScript. I am developing an E-commerce website using HTML, CSS, and JS. for the cart page, I have this following code (which is static).
<link rel="stylesheet" href="css/cart.css">
<div id="cartMainContainer">
<h1> Checkout </h1>
<div id="#cartContainer">
<div class="cart">
<div class="sm-product">
<img src=" https://i.ibb.co/23LzBDq/40.png" class="sm-product-img" alt="" />
<div class="sm-text">
<p class="sm-product-title">
Black Embroidered Dress
</p>
<p class="sm-product-desc">
Description about this very nice dress
</p>
</div>
<div class=”prices”>
<div class="sm-price">850 NIS</div>
<div class="delete"><u>Remove</u></div>
</div>
</div>
</div>
</div>
<div class="checkout-box">
<p class="text">Your Total is: </p>
<h1 class="bill">850 NIS</h1>
<a href="/checkout" class="checkout-btn">Place Order</a>
</div>
</div>
and every product has its own ID. The following code is the "Add to Cart" button, which is found in every "contentDetails.html" page. It only increments the number of items found on the cart badge in the navbar. I need the item to be added to the cart (make it dynamic) for every customer.
let buttonDiv = document.createElement('div')
buttonDiv.id = 'button'
let buttonTag = document.createElement('button')
buttonDiv.appendChild(buttonTag)
buttonText = document.createTextNode('Add to Cart')
buttonTag.onclick = function()
{
let order = id+" "
let counter = 1
if(document.cookie.indexOf(',counter=')>=0)
{
order = id + " " + document.cookie.split(',')[0].split('=')[1]
counter = Number(document.cookie.split(',')[1].split('=')[1]) + 1
}
document.cookie = "orderId=" + order + ",counter=" + counter
document.getElementById("badge").innerHTML = counter
console.log(document.cookie)
}
buttonTag.appendChild(buttonText)