Building an e-Commerce website with Node – Part 46 – Create Cart Page in Node.js

We are going to create a cart page for our application. Open the views/main folder and create a new file named cart.ejs. Type in it the following code.

<% layout('layout') -%>

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <% 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>
              </div>
            </div>
          </span>
        </div>
        <% } %>
      </div>
    </div>
  </div>

Now, if you go to http://localhost:3000, sing in and do some shopping, the shopping cart page looks a little bit weird. We are going to fix that by adding a bit of custom CSS.

Open public/css folder and open the custom.css file. Type in the file the following code.

.product-image {
  width: 100%;
}

Now everything looks pretty nice. In future posts we are going to add a “Remove” button and of course the payment system.

Leave a Reply