adrianhajdin / ecommerce_sanity_stripe

Modern Full Stack ECommerce Application with Stripe

Home Page:https://jsmastery.pro

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Re-ordering of cart: Fix

Aminur-Application opened this issue · comments

For those who wanted the cart order to remain the same after increasing or decreasing the quantity,

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity + 1}, ...newCartItems.slice(index)])

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity - 1}, ...newCartItems.slice(index)])

https://stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript
--refer to the link for more info

Thanks worked for me

Thank you! This also worked well for me!

For those who wanted the cart order to remain the same after increasing or decreasing the quantity,

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity + 1}, ...newCartItems.slice(index)])

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity - 1}, ...newCartItems.slice(index)])

https://stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript --refer to the link for more info

Great answer 🤗🤗

I tried in a bit crude way:
`
const toggleCartItemQuantity = (id, value) => {
foundProduct = cartItems.find((item) => item._id === id);
index = cartItems.findIndex((product) => product._id === id);

const newCartItems = cartItems.filter((item) => item._id !== id);

if (value === 'inc') {
    let finalCartItems = [...newCartItems, { ...foundProduct, quantity: foundProduct.quantity + 1 }];
    let length = finalCartItems.length;
    [finalCartItems[index], finalCartItems[length - 1]] = [finalCartItems[length - 1], finalCartItems[index]];
    setCartItems(finalCartItems);
    setTotalPrice((prevTotalPrice) => prevTotalPrice + foundProduct.price);
    setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + 1);
}
else if (value === 'dec') {
    if (foundProduct.quantity > 1) {
        let finalCartItems = [...newCartItems, { ...foundProduct, quantity: foundProduct.quantity - 1 }];
        let length = finalCartItems.length;
        [finalCartItems[index], finalCartItems[length - 1]] = [finalCartItems[length - 1], finalCartItems[index]];
        setCartItems(finalCartItems);
        setTotalPrice((prevTotalPrice) => prevTotalPrice - foundProduct.price);
        setTotalQuantities((prevTotalQuantities) => prevTotalQuantities - 1);
    }
}

}
`

I have figured out with this way using splice
use Splice with index to update newCartItems then simply setCartitems as newCartItems

const toggleCartItemQuantity = (id, value) => {

   foundProduct = cartItems.find((item) => item._id === id);
   index = cartItems.findIndex((product) => product._id === id);
   const newCartItems = cartItems.filter((item) => item._id !== id);

   if (value === "inc") {
     newCartItems.splice(index, 0, {...foundProduct, quantity: foundProduct.quantity + 1})

     setCartItems([ ...newCartItems ]);
     setTotalPrice((prevTotalPrice) => prevTotalPrice + foundProduct.price);
     setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + 1);
   } else if (value === "dec") {
     if (foundProduct.quantity > 1) {
       newCartItems.splice(index, 0, {...foundProduct, quantity: foundProduct.quantity - 1})

       setCartItems([ ...newCartItems ]);
       setTotalPrice((prevTotalPrice) => prevTotalPrice - foundProduct.price);
       setTotalQuantities((prevTotalQuantities) => prevTotalQuantities - 1);
     }
   }
 };

For those who wanted the cart order to remain the same after increasing or decreasing the quantity,

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity + 1}, ...newCartItems.slice(index)])

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity - 1}, ...newCartItems.slice(index)])

https://stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript --refer to the link for more info

Thanks for the fix, worked for me ! 😊

For those who wanted the cart order to remain the same after increasing or decreasing the quantity,

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity + 1}, ...newCartItems.slice(index)])

setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity - 1}, ...newCartItems.slice(index)])

https://stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript --refer to the link for more info

thanks !!!

For those who wanted the cart order to remain the same after increasing or decreasing the quantity,
setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity + 1}, ...newCartItems.slice(index)])
setCartItems([...newCartItems.slice(0, index), {...foundProduct, quantity: foundProduct.quantity - 1}, ...newCartItems.slice(index)])
https://stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript --refer to the link for more info

Great answer 🤗🤗

I tried in a bit crude way: ` const toggleCartItemQuantity = (id, value) => { foundProduct = cartItems.find((item) => item._id === id); index = cartItems.findIndex((product) => product._id === id);

const newCartItems = cartItems.filter((item) => item._id !== id);

if (value === 'inc') {
    let finalCartItems = [...newCartItems, { ...foundProduct, quantity: foundProduct.quantity + 1 }];
    let length = finalCartItems.length;
    [finalCartItems[index], finalCartItems[length - 1]] = [finalCartItems[length - 1], finalCartItems[index]];
    setCartItems(finalCartItems);
    setTotalPrice((prevTotalPrice) => prevTotalPrice + foundProduct.price);
    setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + 1);
}
else if (value === 'dec') {
    if (foundProduct.quantity > 1) {
        let finalCartItems = [...newCartItems, { ...foundProduct, quantity: foundProduct.quantity - 1 }];
        let length = finalCartItems.length;
        [finalCartItems[index], finalCartItems[length - 1]] = [finalCartItems[length - 1], finalCartItems[index]];
        setCartItems(finalCartItems);
        setTotalPrice((prevTotalPrice) => prevTotalPrice - foundProduct.price);
        setTotalQuantities((prevTotalQuantities) => prevTotalQuantities - 1);
    }
}

} `

THANKS

image
this works for me