I'm making a shopping cart on pure JS. When I click on the buy button, I get the product ID and add it with the same ID to the cart. But in the product I have a choice of grams, it turns out that a person can add one product with a weight of 250 grams and 500 grams, but the problem is that this is the same product and it has one ID. Please tell me the approximate logic of the work of such a basket.
window.addEventListener('load', ()=> {
const cart = document.querySelector('.cart-header__icon')
const buyButtons = document.querySelectorAll('.item-product__buy');
const deleteButtons = document.querySelectorAll('.item-cart__delete');
buyButtons.forEach(buyButton => {
buyButton.addEventListener('click', () => {
const productId = buyButton.closest('.item-product').dataset.pid;
addToCart(buyButton, productId)
})
})
deleteButtons.forEach(deleteButton => {
deleteButton.addEventListener('click', () => {
const productId = deleteButton.closest('.item-cart').dataset.cartPid;
updateCart(deleteButton, productId, false)
})
})
function addToCart(productButton, productId) {
if(!productButton.classList.contains('_hold')) {
productButton.classList.add('_hold');
productButton.classList.add('_fly');
const product = document.querySelector(`[data-pid="${productId}"]`);
const productImage = document.querySelector('.item-product__image');
const productImageFly = productImage.cloneNode(true);
const productImageFlyWidth = productImage.offsetWidth;
const productImageFlyHeight = productImage.offsetHeight;
const productImageFlyTop = productImage.getBoundingClientRect().top;
const productImageFlyLeft = productImage.getBoundingClientRect().left;
productImageFly.setAttribute('class', '_flyImage _ibg');
productImageFly.style.cssText = `
left: ${productImageFlyLeft}px;
top: ${productImageFlyTop}px;
width: ${productImageFlyWidth}px;
height: ${productImageFlyHeight}px;
`;
document.body.append(productImageFly);
const cartFlyLeft = cart.getBoundingClientRect().left;
const cartFlyTop = cart.getBoundingClientRect().top;
productImageFly.style.cssText = `
left: ${cartFlyLeft}px;
top: ${cartFlyTop}px;
width: 0px;
height: 0px;
opacity: 0;
`;
productImageFly.addEventListener('transitionend', () => {
if (productButton.classList.contains('_fly')) {
productImageFly.remove()
updateCart(productButton, productId);
productButton.classList.remove('_fly')
}
})
}
}
function updateCart(productButton, productId, productAdd = true) {
const cart = document.querySelector('.cart-header');
const cartIcon = cart.querySelector('.cart-header__icon');
const cartQuantity = cartIcon.querySelector('.icon-header__number');
const cartProduct = document.querySelector(`[data-cart-pid="${productId}"`);
const cartList = document.querySelector('.cart-header__list');
if (productAdd) {
if (cartQuantity) {
cartQuantity.innerHTML = cartQuantity.innerHTML;
} else {
cartIcon.insertAdjacentHTML('beforeend', `<span >1</span>`);
}
if (!cartProduct) {
const product = document.querySelector(`[data-pid="${productId}"]`);
const cartProductImage = product.querySelector('.item-product__image').innerHTML;
const cartProductTitle = product.querySelector('.item-product__name').innerHTML;
const cartProductWeigh = product.querySelector('.item-product__weigh-input').value;
const cartProductPrice = product.querySelector('.item-product__current-price span').innerHTML
const cartProductContent = `
<a href="" >
${cartProductImage}
</a>
<div >
<div >
<a href="" >
<span >${cartProductTitle}</span>,
<span >${cartProductWeigh}г</span>
</a>
</div>
<div >
<button type="button" >-</button>
<div >
<span>1</span>
</div>
<button type="button" > </button>
</div>
</div>
<div >
<div >
<span>${cartProductPrice}</span>грн
</div>
<div >
<span>
<svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg"> <path d="M2.32129 2.32363C2.72582 1.9191 3.38168 1.9191 3.78621 2.32363L25.6966 24.234C26.1011 24.6385 26.1011 25.2944 25.6966 25.6989C25.2921 26.1035 24.6362 26.1035 24.2317 25.6989L2.32129 3.78854C1.91676 3.38402 1.91676 2.72815 2.32129 2.32363Z" fill="black"></path> <path d="M25.6787 2.30339C25.2742 1.89887 24.6183 1.89887 24.2138 2.30339L2.30339 24.2138C1.89887 24.6183 1.89887 25.2742 2.30339 25.6787C2.70792 26.0832 3.36379 26.0832 3.76831 25.6787L25.6787 3.76831C26.0832 3.36379 26.0832 2.70792 25.6787 2.30339Z" fill="black"></path> </svg>
</span>
</div>
</div>
`
cartList.insertAdjacentHTML('beforeend',`<li data-cart-pid="${productId}" >${cartProductContent}</li>`)
} else {
const cartProductQuantity = cartProduct.querySelector('.item-cart__input span');
cartProductQuantity.innerHTML = cartProductQuantity.innerHTML;
}
} else {
const cartProductQuantity = cartProduct.querySelector('.item-cart__input span');
cartProductQuantity.innerHTML = --cartProductQuantity.innerHTML;
if(!parseInt(cartProductQuantity.innerHTML)) {
cartProduct.remove()
}
}
productButton.classList.remove('_hold')
}
})
CodePudding user response：
You can investigate how other e-commerce platforms are implementing that. As per what i was working with in past - Shopify, each Product can have multiple Variants and a default Variant for situation when product has no variants but just to simplify things. So the Variant Id is going to the cart, not the Product id.
For example, suppose that you sell T-shirts with two options: size and color. The size option has three values: small, medium, and large. The color option has two values: blue and green. One specific variant from these options is a small, blue T-shirt.
You can see a list of variants for a product on its product details page. You can also manage inventory for each variant from the Inventory page.
Source: https://help.shopify.com/en/manual/products/variants