-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Description
Describe the Bug
I’m currently adding products to the cart by fetch request because the standard addItem method has built-in validation for product uniqueness conflicts with my use case: the same product as new line in cart.
To make this workflow smoother, could you:
Expose a way to manually refresh the cart state, so I can re-sync the UI whenever I modify cart items directly.
Provide access to updateCart from useCart - this would allow updating the cart programmatically while keeping the state consistent.
This would allow more flexibility for custom cart logic without being blocked by addItem’s uniqueness validation.
Current addItem method:
`const addItem: EcommerceContextType['addItem'] = useCallback(
async (item, quantity = 1) => {
if (cartID) {
const existingCart = await getCart(cartID)
if (!existingCart) {
// console.error(`Cart with ID "${cartID}" not found`)
setCartID(undefined)
setCart(undefined)
return
}
// Check if the item already exists in the cart
const existingItemIndex =
existingCart.items?.findIndex((cartItem: CartItem) => {
const productID =
typeof cartItem.product === 'object' ? cartItem.product.id : item.product
const variantID =
cartItem.variant && typeof cartItem.variant === 'object'
? cartItem.variant.id
: item.variant
return (
productID === item.product &&
(item.variant && variantID ? variantID === item.variant : true)
)
}) ?? -1
let updatedItems = existingCart.items ? [...existingCart.items] : []
if (existingItemIndex !== -1) {
// If the item exists, update its quantity
updatedItems[existingItemIndex].quantity =
updatedItems[existingItemIndex].quantity + quantity
// Update the cart with the new items
await updateCart(cartID, {
items: updatedItems,
})
} else {
// If the item does not exist, add it to the cart
updatedItems = [...(existingCart.items ?? []), { ...item, quantity }]
}
// Update the cart with the new items
await updateCart(cartID, {
items: updatedItems,
})
} else {
// If no cartID exists, create a new cart
const newCart = await createCart({ items: [{ ...item, quantity }] })
setCartID(newCart.id)
setCart(newCart)
}
},
[cartID, createCart, getCart, updateCart],
)
`
I’ve created a discussion for this here: #14764
Do you know of any alternative approaches so I don’t have to struggle with this workaround?
Link to the code that reproduces this issue
.
Reproduction Steps
Set up a PayloadCMS project with the E-commerce plugin enabled.
Create a product in the Payload admin (or via API) that you want to add multiple times.
Use the standard addItem method from useCart in a React component to add the same product twice:
const { addItem } = useCart();
addItem({ product: 'PRODUCT_ID' });
addItem({ product: 'PRODUCT_ID' }); // Will increment quantity
Observe the behavior:
addItem merges the product quantity instead of adding a new line for the same product.
There is no built-in way to bypass the uniqueness check.
Which area(s) are affected? (Select all that apply)
plugin: ecommerce
Environment Info
.