add a "add to cart" feature using mongodb and node js - node.js

Question

I've been trying many things and couldn't write the code for the "add to cart" feature. Can you please help me in doing this?
Here is the cart model:
var cartSchema = new mongoose.Schema({
owner: {type: mongoose.Schema.Types.ObjectID, ref: 'User'},
totalPrice: {type: Number, default: 0},
items: [{
item: {type: mongoose.Schema.Types.ObjectID, ref: 'Product'},
qty: {type: Number, default: 1},
price: {type: Number, default: 0}
}]})
Here is the product model:
var productSchema = new mongoose.Schema({
category: String,
name: String,
price: Number,
image: String,
description: String,
stock: Number,
reviews: [
{
type: mongoose.Schema.Types.ObjectID, ref: 'Review'
}
]
})
Edit(detailed explanation):
step1: when I click on the add to cart button it should make a "get" request and these following things should happen:
get the id of the signed-in user i.e req.user._id
store the clicked product inside the items array in the cart model
based on the required quantity of the product it should calculate the price i.e qty*price and store it in "price" in the items array in the cart model
step2: when another product is added to the cart it should follow all the steps mentioned in step1 and in addition to that it should calculate the total price of the cart i.e. totalPrice = qty1xproduct1_price + qty2xproduct2_price + .... and store it in "totalPrice" in the cart model.
step3: when I click on view cart i.e. router.get("/cart"), this should take me to the cart and it should check for the signed-in user and show the cart which belongs to that user i.e. it should check for Cart.owner and show me all the details of the cart. Ex: (
product details in short
quantity
price= qty x price_per_product
In the end total price of all these products
)
edit 3:
Here is add to cart button:
<form action="/product/<%= product._id %>/addCart" method="POST">
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button>Add to cart</button>
</form>
Here is cart route:
router.post("/product/:id/addCart", async (req, res) => {
const quantity = req.body;
Product.findById(req.params.id, function(err, foundProduct){
if(err){
console.log(err);
}
const product = {
item: foundProduct._id,
qty: quantity,
price: foundProduct.price * quantity
}
Cart.owner = req.user._id;
Cart.itmes.push(product);
Cart.save();
res.redirect("/cart");
})
})
router.get("/cart", function(req, res){
Cart.find({owner: req.user._id}, function(err, userCart){
if(err){
console.log(err);
}
const pPrice = userCart.items.map(p => p.price);
const totalPrice = pPrice.reduce((a, b) => a + b, 0);
userCart.totalPrice = totalPrice;
userCart.save()
res.render("cart", {cart: userCart});
})
})
It shows Cannot POST /product/5f80569156202d0a624d35af/addCart

Answer 1

In order to help you, here's a quick example :
Simple HTML :
Quantity :
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button id="btnOK">OK</button>
In your front-end JS (I used jQuery because it's much simpler to write than plain JS) :
$("#btnOK").click( () => {
const quantity = Number( $("#quantity").val());
const productData = {
id : "123456",
quantity,
price : quantity * 20
}
$.post( "/product" , productData, result => {
console.log("Response from Node : ", result)
})
})
In your back-end JS :
router.post("/product", async (req, res) => {
const productData = req.body;
const result = await (new productModel(productData)).save();
res.send(result)
})
If you want to return the sum of the price of several items, you don't need an aggregation. You can just fetch the products and sum up their prices. For instance :
const idArray = ["1", "3", "18", "27"]
// This should return 4 products :
const products = await productModel.find({
_id: {
$in: idArray
}
})
.lean()
.exec()
const totalPrice = products
.map( p => p.price)
.reduce((a, b) => a + b, 0)
res.send(totalPrice)