I’m currently working on an Express.js application where users can add products to their cart and remove them as well. However, I’m facing an issue where the product removal functionality doesn’t seem to work as expected.
Here’s a brief overview of how my setup looks:
I have an Express.js route defined for handling POST requests to remove products from the cart.
When a user clicks the remove button for a product, it should send a POST request to the ‘/remove-from-cart’ endpoint with the product name.
In my route handler, I retrieve the product name from the request body, filter out the corresponding product from the session cart, and then redirect the user back to the cart page.
Here is my code for the cart page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Cart | BeautySpot - HTML Template for Beauty Salons</title>
<link rel="shortcut icon" href="images/favicon.ico">
<!-- STYLESHEETS : begin -->
<link rel="stylesheet" type="text/css" href="assets/css/general.css"><!-- Default styles generated from assets/scss/general.scss (do not edit) -->
<link rel="stylesheet" type="text/css" href="assets/css/color-schemes/default.css"><!-- Default color scheme generated from assets/scss/color-schemes/default.scss (change to other pre-defined or custom color scheme) -->
<link rel="stylesheet" type="text/css" href="style.css"><!-- Place your own CSS into this file -->
<!-- STYLESHEETS : end -->
</head>
<body>
<!-- WRAPPER : begin -->
<div id="wrapper">
<!-- HEADER : begin -->
<%- html.header %>
<!-- HEADER : end -->
<!-- CORE : begin -->
<div id="core" class="core--narrow">
<div class="core__inner">
<!-- PAGE HEADER : begin -->
<div class="page-header">
<div class="page-header__inner">
<div class="lsvr-container">
<div class="page-header__content">
<h1 class="page-header__title">Your Cart</h1>
<!-- BREADCRUMBS : begin -->
<div class="breadcrumbs">
<div class="breadcrumbs__inner">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a href="index.html" class="breadcrumbs__link">Home</a>
</li>
<li class="breadcrumbs__item">
<a href="product-archive.html" class="breadcrumbs__link">Store</a>
</li>
</ul>
</div>
</div>
<!-- BREADCRUMBS : end -->
</div>
</div>
</div>
</div>
<!-- PAGE HEADER : end -->
<!-- CORE COLUMNS : begin -->
<div class="core__columns">
<div class="core__columns-inner">
<div class="lsvr-container">
<!-- MAIN : begin -->
<main id="main">
<div class="main__inner">
<!-- PAGE : begin -->
<div class="page product-post-page product-post-order product-post-order--cart">
<div class="page__content">
<!-- PRODUCT CART : begin -->
<form class="product-cart" method="post" action="http://localhost:4000/checkout">
<!-- CART LIST : begin -->
<ul class="product-cart__list">
<% products.forEach(product => { %>
<!-- CART ITEM : begin -->
<li class="product-cart__item">
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--thumb">
<!-- ITEM THUMB : begin -->
<p class="product-cart__item-thumb">
<a href="product-single.html" class="product-cart__item-thumb-link">
<img src="<%= product.image %>" class="product-cart__item-thumb-img" alt="<%= product.name %>">
</a>
</p>
<!-- ITEM THUMB : end -->
</div>
<!-- ITEM ITEM COL : end -->
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--title">
<!-- ITEM TITLE : begin -->
<h4 class="product-cart__item-title">
<a href="product-single.html" class="product-cart__item-title-link"><%= product.name %></a>
</h4>
<!-- ITEM TITLE : end -->
<!-- ITEM STATUS : begin -->
<p class="product-cart__item-status product-cart__item-status--in-stock"><!-- You can use "in-stock", "on-order" and "unavailable" modifiers -->
<%= product.status %>
</p>
<!-- ITEM STATUS : end -->
</div>
<!-- ITEM ITEM COL : end -->
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--quantity">
<!-- ITEM QUANTITY : begin -->
<p class="product-cart__item-quantity quantity-field">
<input type="text" class="quantity-field__input" value="1">
<button type="button" class="quantity-field__btn quantity-field__btn--add" title="Add one">
<span class="quantity-field__btn-icon" aria-hidden="true"></span>
</button>
<button type="button" class="quantity-field__btn quantity-field__btn--remove" title="Remove one">
<span class="quantity-field__btn-icon" aria-hidden="true"></span>
</button>
</p>
<!-- ITEM QUANTITY : end -->
</div>
<!-- ITEM ITEM COL : end -->
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--price">
<!-- ITEM PRICE : begin -->
<p class="product-cart__item-price">
<%= product.price %>
</p>
<!-- ITEM PRICE : end -->
</div>
<!-- ITEM ITEM COL : end -->
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--remove">
<!-- ITEM REMOVE : begin -->
<div class="product-cart__item-col product-cart__item-col--remove">
<form action="/remove-from-cart" method="POST">
<input type="hidden" name="productName" value="<%= product.name %>">
<button type="submit" class="product-cart__item-remove-btn">
<span class="product-cart__item-remove-btn-icon" aria-hidden="true"></span>
</button>
</form>
</div>
<!-- ITEM REMOVE : end -->
</div>
<!-- ITEM ITEM COL : end -->
</li>
<!-- CART ITEM : end -->
<% }); %>
</ul>
<!-- CART LIST : end -->
<!-- CART SUMMARY : begin -->
<div class="product-cart__summary">
<!-- CART COUPON : begin -->
<p class="product-cart__coupon">
<input type="text" class="product-cart__coupon-input" placeholder="Coupon Code">
<button type="button" class="product-cart__coupon-btn lsvr-button lsvr-button--type-2">Apply Coupon</button>
</p>
<!-- CART COUPON : end -->
<!-- CART TOTAL : begin -->
<p class="product-cart__total">
<span class="product-cart__total-label">Total</span>
<strong class="product-cart__total-price">$121.60</strong>
</p>
<!-- CART TOTAL : end -->
</div>
<!-- CART SUMMARY : end -->
<!-- ORDER FOOTER : begin -->
<div class="product-order__footer">
<!-- FOOTER BACK : begin -->
<p class="product-order__footer-back">
<a href="product-archive.html" class="product-order__footer-back-link">Back to Store</a>
</p>
<!-- FOOTER BACK : end -->
<!-- FOOTER CHECKOUT : begin -->
<p class="product-order__footer-checkout">
<button type="submit" class="product-order__footer-checkout-btn lsvr-button">To Checkout</button>
</p>
<!-- FOOTER CHECKOUT : end -->
</div>
<!-- ORDER FOOTER : end -->
</form>
<!-- PRODUCT CART : end -->
</div>
</div>
<!-- PAGE : end -->
</div>
</main>
<!-- MAIN : end -->
</div>
</div>
</div>
<!-- CORE COLUMNS : end -->
</div>
</div>
<!-- CORE : end -->
<!-- FOOTER : begin -->
<%- html.footer %>
<!-- FOOTER : end -->
</div>
<!-- WRAPPER : end -->
<!-- SCRIPTS : begin -->
<script src="assets/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="assets/js/third-party-scripts.min.js" type="text/javascript"></script>
<script src="assets/js/scripts.js" type="text/javascript"></script>
<!-- SCRIPTS : end -->
</body>
</html>
Here’s the relevant part of my app.js file:
app.post('/remove-from-cart', (req, res) => {
const { productName } = req.body;
// Remove the product from the session cart
if (req.session.cart) {
req.session.cart = req.session.cart.filter(product => product.name !== productName);
}
// Redirect back to the cart page
res.redirect('/cart');
});
However, despite implementing this functionality, when I click the remove button, instead of removing the product from the cart, it redirects me to the checkout page.
I’m struggling to figure out why the product removal isn’t working as expected. Could someone please help me troubleshoot this issue? Any insights or suggestions would be greatly appreciated. Thank you!