Glow - The incrementing/decrementing product quantities we found the most interesting both front and and backend. We liked the styling and looking at amazon.com as a source of inspiration we would say it looks pretty close & minimal to it. We found the backend retrieving an auth0 userId and moving that data to the backend on each click worked well and was challenging to implement
async function updateCartItemQuantity(req, res, next) {
try {
//destructure the userID, action and productID from the req.body
const { userId, action, productId } = req.body;
//find the cart for the user using userID
const currentCart = await Cart.findOne({ userId });
if (currentCart) {
//find index of product to we want to update the quantity of.
const productIndex = currentCart.products.findIndex((p) =>
p._id.equals(productId)
);
if (productIndex !== -1) {
//if product exists and the action sent by the req.body is increment, increase quantity by 1
if (action === "increment") {
currentCart.products[productIndex].quantity++;
} else if (action === "decrement") {
//if product exists and the action sent by the req.body is decrement, decrease quantity by 1
currentCart.products[productIndex].quantity--;
if (currentCart.products[productIndex].quantity <= 0) {
// Remove the product if the quantity becomes zero or negative
currentCart.products.splice(productIndex, 1);
}
}
//calculate total amount of cart
currentCart.totalAmount = calculateTotalPriceOfCart(currentCart);
await Cart.findByIdAndUpdate(currentCart._id, currentCart, {
new: true,
});
res.json(currentCart);
} else {
res.status(404).json({ message: "Product not found in the cart" });
}
} else {
res.status(404).json({ message: "Cart not found" });
}
We also really like the function to create and update a cart as it was taking userId and using it to see if the user has an existing cart or not and create/update according to that
async function createOrUpdate(req, res, next) {
try {
const { userId, product } = req.body;
const currentCart = await Cart.findOne({ userId });
if (currentCart) {
//if there is a cart for the user, find the index of the product that has an id equal to product._id sent by req.body
const isProductAlreadyInCart = currentCart.products.findIndex((p) =>
p._id.equals(product._id)
);
if (isProductAlreadyInCart !== -1) {
//findIndex returns -1 if no product found, if that is not the case, update the quantity of the product at the found index
currentCart.products[isProductAlreadyInCart].quantity++;
} else {
currentCart.products.push({ ...product, quantity: 1 });
}
//use the total price calculation function to update the carts total amount
currentCart.totalAmount = calculateTotalPriceOfCart(currentCart);
await Cart.findByIdAndUpdate(currentCart._id, currentCart, { new: true });
res.json(currentCart);
} else {
//if the user does not alrady have a cart, create it.
const cartData = {
products: [{ ...product, quantity: 1 }],
userId,
totalAmount: product.price,
};
const newCart = Cart.create(cartData);
res.json(newCart);
}
} catch (error) {
console.log(error);
}
}
async function updateCartItemQuantity(req, res, next) { try { //destructure the userID, action and productID from the req.body const { userId, action, productId } = req.body; //find the cart for the user using userID const currentCart = await Cart.findOne({ userId });
} catch (error) { console.log(error); res.status(500).json({ message: "Internal server error" }); } }
async function createOrUpdate(req, res, next) { try { const { userId, product } = req.body; const currentCart = await Cart.findOne({ userId }); if (currentCart) { //if there is a cart for the user, find the index of the product that has an id equal to product._id sent by req.body const isProductAlreadyInCart = currentCart.products.findIndex((p) => p._id.equals(product._id) ); if (isProductAlreadyInCart !== -1) { //findIndex returns -1 if no product found, if that is not the case, update the quantity of the product at the found index currentCart.products[isProductAlreadyInCart].quantity++; } else { currentCart.products.push({ ...product, quantity: 1 }); } //use the total price calculation function to update the carts total amount currentCart.totalAmount = calculateTotalPriceOfCart(currentCart); await Cart.findByIdAndUpdate(currentCart._id, currentCart, { new: true }); res.json(currentCart); } else { //if the user does not alrady have a cart, create it. const cartData = { products: [{ ...product, quantity: 1 }], userId, totalAmount: product.price, }; const newCart = Cart.create(cartData); res.json(newCart); } } catch (error) { console.log(error); } }