Categories

Monday, May 27, 2024
#919814419350 therichposts@gmail.com
Angular 12Bootstrap 5

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

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.
Angular Ecommerce Project Cart Page
Angular 12 Bootstrap 5 Ecommerce Testing Project - Part 3 Cart Page
Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 3 Cart 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

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.