Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 3 Cart Page

Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you, Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 3 Cart Page.

Guys before starting this please check part 1 and part 2 for basic setup like project setup, bootstrap installation, components building.

Post working information and working video:

1. In this post, we will make bootstrap 5 responsive cart page.
2. In next part, we will do checkout page.

Guys Angular12 and Bootstrap5 came and if you are new in both or want to learn more about them then please check below tutorial links:

1. Angular12 Tutorials
2. Bootstrap 5 Tutorials

Guy’s here is working code snippet and please follow it carefully to avoid the mistakes:

1. Guy’s very first we need to run below command into our project terminal to generate cart files:

ng g c cart

ng serve --o //run project

2. Now guy’s, now we need to add below code into our angularecom/src/app/app-routing.module.ts file to cart page route:

...
import { CartComponent } from './cart/cart.component';

const routes: Routes = [
    ...
    { path: 'cart', component: CartComponent }
];

3. Now guy’s, now we need to add below code into our angularecom/src/app/header/header.component.html file(check highlighted text) to cart page link:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" [routerLink]="['']" >TheRich Shop</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
                <li class="nav-item"><a class="nav-link active" aria-current="page" [routerLink]="['']" >Home</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" [routerLink]="['']" >All Products</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" [routerLink]="['']" >Popular Items</a></li>
                        <li><a class="dropdown-item" [routerLink]="['']" >New Arrivals</a></li>
                    </ul>
                </li>
            </ul>
           
                <a class="btn btn-outline-dark" [routerLink]="['/cart']">
                    <i class="bi-cart-fill me-1"></i>
                    Cart
                    <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                </a>
           
        </div>
    </div>
  </nav>

4. Now guy’s, now we need to add below code into our angularecom/src/app/cart/cart.component.html file:

<section class="py-5">
    <div class="container px-4 px-lg-5 my-5">
    <div class="row">
      <div class="col-lg-12 p-5 bg-white rounded shadow-sm mb-5">

        <!-- Shopping cart table -->
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th scope="col" class="border-0 bg-light">
                  <div class="p-2 px-3 text-uppercase">Product</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Price</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Quantity</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Remove</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row" class="border-0">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block align-middle">Product 1</a></h5>
                    </div>
                  </div>
                </th>
                <td class="border-0 align-middle"><strong>$79.00</strong></td>
                <td class="border-0 align-middle"><strong>3</strong></td>
                <td class="border-0 align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a></td>
              </tr>
              <tr>
                <th scope="row">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"><a href="#" class="text-dark d-inline-block">Product 2</a></h5>
                    </div>
                  </div>
                </th>
                <td class="align-middle"><strong>$79.00</strong></td>
                <td class="align-middle"><strong>3</strong></td>
                <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                </td>
              </tr>
              <tr>
                <th scope="row">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block">Product 3</a></h5>
                    </div>
                  </div></th>
                  <td class="align-middle"><strong>$79.00</strong></td>
                  <td class="align-middle"><strong>3</strong></td>
                  <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                  </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- End -->
      </div>
    </div>

    <div class="row py-5 p-4 bg-white rounded shadow-sm">
      <div class="col-lg-6">
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Coupon code</div>
        <div class="p-4">
          <p class="mb-4"><em>If you have a coupon code, please enter it in the box below</em></p>
          <div class="input-group mb-4 border rounded-pill p-2">
            <input type="text" placeholder="Apply coupon" aria-describedby="button-addon3" class="form-control border-0">
            <div class="input-group-append border-0">
              <button id="button-addon3" type="button" class="btn btn-dark px-4 rounded-pill"><i class="fa fa-gift mr-2"></i>Apply coupon</button>
            </div>
          </div>
        </div>
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Instructions for seller</div>
        <div class="p-4">
          <p class="mb-4"><em>If you have some information for the seller you can leave them in the box below</em></p>
          <textarea name="" cols="30" rows="2" class="form-control"></textarea>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Order summary </div>
        <div class="p-4">
          <p class="mb-4"><em>Shipping and additional costs are calculated based on values you have entered.</em></p>
          <ul class="list-unstyled mb-4">
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Order Subtotal </strong><strong>$390.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Shipping and handling</strong><strong>$10.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Tax</strong><strong>$0.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Total</strong>
              <h5 class="fw-bold">$400.00</h5>
            </li>
          </ul><a href="#" class="btn btn-dark rounded-pill py-2 d-md-block">Procceed to checkout</a>
        </div>
      </div>
    </div>

  </div>
  </section>

Guy’s in the end please run ng serve command(if forgot) to check the output on browser(localhost:4200) and if you will have any query then feel free to comment below.

Guy’s I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks