Hello everyone! Please help me out!
I have implemented two buttons on my Editor X website: button1 adds a product to the cart, and button2 is supposed to remove the same product from the cart. However, when I attempt to remove the product using the removeProduct method, it removes all products from the cart instead of just the one I intend to remove. For example, clicking button1 three times adds the product to the cart. Then, when I press button2 to remove it once, instead, it removes all three products."
Here’s a version of my code:
import { cart } from ‘wix-stores-frontend’;
export function button1_click(event) {
let idProduct = “fc76d9af-68a7-1c8a-a7e9-6b41eca75d8f”;
$w(‘#shoppingCartIcon2’).addToCart(idProduct)
.then(() => {
console.log(“Product Added”);
cart.showMiniCart();
})
.catch((error) => {
console.log(error);
});
}
export function button2_click(event) {
let idProduct = “fc76d9af-68a7-1c8a-a7e9-6b41eca75d8f”;
cart.removeProduct(1)
.then(() => {
console.log("Product Removed");
cart.showMiniCart();
})
.catch((error) => {
console.log(error);
});
}
I’ve tried various approaches, but, none of these solutions have resolved the issue. Thanks to everyone!!!
The removeProduct method removes all instances of a product from the cart, not just one. This is why when you add a product three times and then try to remove it once, all three instances of the product are removed.
To remove a single instance of a product, you should use the updateLineItemQuantity method instead. This method allows you to specify the quantity of a specific product in the cart.
Here’s how you can modify your button2_click function to remove a single instance of a product
import { cart } from 'wix-stores-frontend';
export function button2_click(event) {
let idProduct = "fc76d9af-68a7-1c8a-a7e9-6b41eca75d8f";
cart.getCart()
.then((cart) => {
let lineItem = cart.lineItems.find(item => item.productId === idProduct);
if (lineItem) {
let newQuantity = lineItem.quantity - 1;
if (newQuantity > 0) {
return cart.updateLineItemQuantity(lineItem._id, newQuantity);
} else {
return cart.removeProduct(lineItem._id);
}
}
})
.then(() => {
console.log("Product Removed");
cart.showMiniCart();
})
.catch((error) => {
console.log(error);
});
}
1 Like
Hey Dan, thanks a lot for trying to help me out. I’ve also tried that approach before, but whenever I run the code, I keep encountering an error on the line cart.getCart() , specifically saying “Property ‘getCart’ doesn’t exist on type ‘Cart’.” I’ve checked the Velo References, and it seems like from my noob view the only option to replace it with for ‘wix-stores-frontend’ is getCurrentCart() , but when I replace it, I get errors in updateLineItemQuantity and removeProduct , stating “property doesn’t exist on type ‘cart0bj’.” Any ideas on how to fix this ? Thank you so much!
@Dan_Suhr this how it looks
I just checked and the getCart is now in the wix-ecom-backend. The getCurrentCart() in the frontend is now depreciated so may not work as intended.
Have a read here to see if you can learn more.
