this is my product remove button for removing the product from the cart, I am used here ajax :
cart.hbs
<button
href="/remove-product"
id="{{this.product._id}}"
class="btn btn-danger"
onclick="removeProduct ,('{{this.product._id}}'), confirm('Are you sure you want to remove the product {{this.product.Name}} ?')"
>
remove
</button>
function removeProduct(cartId, proId) {
$.ajax({
url: '/remove-product',
data: {
product: proId,
cart: cartId,
},
method: 'post',
success: (response) => {
if (response.removeProduct) {
alert('Product Removed Successfully');
location.reload();
} else {
document.getElementById(proId).innerHTML = response.removeProduct;
}
},
});
}
user.js this is my js file
router.post('/remove-product', (req, res) => {
userHelpers.removeProduct(req.body).then((response) => {
res.json(response);
});
});
for removing the product, this is the cord for removing the product from the cart here , I passed proId and cartId user-helpers.js
removeProduct: (details) => {
return new Promise((resolve, reject) => {
db.get()
.collection(collection.CART_COLLECTION)
.updateOne(
{ _id: objectId(details.cart) },
{
$pull: { products: { item: objectId(details.product) } },
}
)
.then((response) => {
resolve({ removeProduct: true });
});
});
};
When using Ajax, we have to be very conscious about how the data is sending. I mean here we sending the data
data: {
product: proId,
cart: cartId,
},
this is the data and sending method is post so, in js file also need to use post method, I have solved this problem myself here is the code,
here is the button, cart.hbs
<button id=" Remove" class=" btn btn-danger" onclick=" removeProduct
('{{this._id}}','{{this.product._id}}')"> remove</button>
<script>
function removeProduct(cartId, proId) {
$.ajax({
url: '/remove-product',
data: {
product: proId,
cart: cartId,
},
method: 'post',
success: (response) => {
if (response.removeProduct) {
alert("Product Removed Successfully")
location.reload()
} else {
document.getElementById(proId).innerHTML = response.removeProduct
}
}
});
};
</script>
user.js
router.post('/remove-product',(req,res)=>{
userHelpers.removeProduct(req.body).then(async(response)=>{
res.json(response)
})
})
and this is the code for removing the product from the cart
user-helpers.js
removeProduct:(details)=>{
return new Promise ((resolve,reject)=>{
db.get().collection(collection.CART_COLLECTION)
.updateOne({_id:objectId(details.cart)},
{
$pull:{products:{item:objectId(details .product)}}
}
).then((response)=>{
resolve({removeProduct:true})
})
})
}