Building an e-Commerce website with Node – Part 47 – Remove button for cart in Node.js

We are going to add a “Remove” button so the user can remove a product from the cart. Open the main.js file in the routes folder and type in the following code. The cart.ejs file will be shown at the end of the article.

router.post('/remove', function(req, res, next) {
  Cart.findOne({ owner: req.user._id }, function(err, foundCart) {
    foundCart.items.pull(String(req.body.item));

    foundCart.total = (foundCart.total - parseFloat(req.body.price)).toFixed(2);
    foundCart.save(function(err, found) {
      if (err) return next(err);
      req.flash('remove', 'Successfully removed');
      res.redirect('/cart');
    });
  });
});

First we need to get the id of the items. Once we have that we can pull the product that we don’t need.
Next we want to minus the total of the cart’s price and items’ price. After that you save it and flash the message. Lastly, the user is redirected to the Cart page.

We have created the route. Now we have to add the actual button to our page. Open the cart.ejs file under the views/main folder and add the following code.

<form method="post" action="/remove">
   <input type="hidden" name="item" value="<%= foundCart.items[i]._id %>">
   <input type="hidden" name="price" value="<%= foundCart.items[i].price %>">
   <button type="submit" type="button">Remove</button>
</form>

We also need to add the “message” in our cart.ejs file.

<% if (message.length > 0) { %>
      <div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismmiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <%= message %>
      </div>
    <% } %>

Now, a user can remove items from the shopping cart if the user changes his mind.
Below is the full cart.ejs file as I have it at this moment.

<% layout('layout') -%>

<div class="container">
  <div class="row">
    <div class="col-lg-6">

      <% if (message.length > 0) { %>
        <div class="alert alert-success alert-dismissible">
          <button type="button" class="close" data-dismmiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <%= message %>
        </div>
      <% } %>

      <% for (var i = 0; i < foundCart.items.length; i++) { %>
        <div class="list-group">
          <span class="list-group-item">
            <div class="row">
              <div class="col-md-3">
                <span><img class="product-image" src="<%= foundCart.items[i].item.image %>"></span>
              </div>
              <div class="col-md-6">
                <p class="list-group-item-heading"><%= foundCart.items[i].item.name %></p>
              </div>
              <div class="col-md-3">
                <p><%= foundCart.items[i].quantity %></p>
                <p><%= foundCart.items[i].price %></p>

                <form method="post" action="/remove">
                    <input type="hidden" name="item" value="<%= foundCart.items[i]._id %>">
                    <input type="hidden" name="price" value="<%= foundCart.items[i].price %>">
                    <button type="submit" type="button">Remove</button>
                </form>

              </div>
            </div>
          </span>
        </div>
        <% } %>
      </div>
    </div>
  </div>

Leave a Reply