Categories

Friday, June 21, 2024
#919814419350 therichposts@gmail.com
AngularAngular 18Angular Ecommerce TemplatesAngular TemplatesBootstrap 5

Creating an Ecommerce Website in Angular 18 using Bootstrap 5

Creating an Ecommerce Website in Angular 18 using Bootstrap 5

Hello guys how are you? Welcome back to my blog. Today in this blog I am going to Creating an Ecommerce Website in Angular 18 using Bootstrap 5.

Live Demo

First, ensure you have Angular CLI installed. If not, install it using npm:

npm install -g @angular/cli
ng new ecommerce-app
cd ecommerce-app
npm install bootstrap@5.3.0
npm install @fortawesome/fontawesome-free

In your angular.json file, add Bootstrap CSS & Icons:

"styles": [
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": []

Create essential components for your e-commerce site, such as header, footer, product list, product detail, cart, checkout etc.

ng generate component components/header
ng generate component components/footer
ng generate component components/product-list
ng generate component components/product-detail
ng generate component components/cart
ng generate component components/checkout

Update the header.component.html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" routerLink="/">E-Commerce</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/products">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/cart">Cart</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     
    </form>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-search"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/wishlist"><i class="fas fa-heart"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/cart"><i class="fas fa-shopping-cart"></i></a>
      </li>
    </ul>
  </div>
</nav>
<div class="header-image">
  <div class="overlay">
    <h1 class="display-4">Welcome to Our E-Commerce Store</h1>
    <p class="lead">Discover our amazing products and deals.</p>
    <a routerLink="/products" class="btn btn-primary btn-lg">Shop Now</a>
  </div>
</div>

Update the header.component.ts:

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
  selector: 'app-header',
  standalone: true,
  imports: [RouterLink],
  templateUrl: './header.component.html',
  styleUrl: './header.component.css'
})
export class HeaderComponent {

}

Update the header.component.css:

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  .nav-link {
    font-size: 1.2rem;
    margin-right: 1rem;
  }
  
  .form-inline {
    flex-grow: 1;
  }
  
  .form-control {
    margin-right: 0.5rem;
  }
  
  .navbar-nav.ml-auto .nav-item .nav-link {
    font-size: 1.4rem;
  }
  
  .navbar-nav.ml-auto .nav-item .nav-link i {
    margin-right: 0.5rem;
  }
  .header-image {
    position: relative;
    background: url('https://via.placeholder.com/1920x600') no-repeat center center;
    background-size: cover;
    height: 60vh;
    color: white;
  }
  
  .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .overlay h1 {
    font-size: 3rem;
    font-weight: bold;
  }
  
  .overlay p {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .overlay .btn {
    font-size: 1.25rem;
    padding: 0.75rem 1.5rem;
  }
  @media (max-width: 768px) {
    .header-image {
      height: 40vh;
    }
  
    .overlay h1 {
      font-size: 2rem;
    }
  
    .overlay p {
      font-size: 1.2rem;
    }
  
    .overlay .btn {
      font-size: 1rem;
      padding: 0.5rem 1rem;
    }
  }
    

Update product-list.component.html to include some mock products:

<div class="container mt-4">
    <div class="row">
        <div class="col-md-4">
    <div *ngIf="product">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="{{ product.name }}">
      <h2>{{ product.name }}</h2>
      <p>Price: ${{ product.price }}</p>
      <button class="btn btn-primary">Add to Cart</button>
    </div>
    <div *ngIf="!product">
      <p>Product not found.</p>
    </div>
  </div>
  </div>
  </div>
  

Update product-list.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [CommonModule, RouterLink],
  templateUrl: './product-detail.component.html',
  styleUrl: './product-detail.component.css'
})
export class ProductDetailComponent {
  productId: number;
  product: any;

  products = [
    { id: 1, name: 'Product 1', price: 100 },
    { id: 2, name: 'Product 2', price: 200 },
    { id: 3, name: 'Product 3', price: 300 },
  ];

  constructor(private route: ActivatedRoute) {
    this.productId = this.route.snapshot.params['id'];
    this.product = this.products.find(p => p.id === +this.productId);
  }
}

Update header.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" routerLink="/">E-Commerce</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/products">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/cart">Cart</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     
    </form>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-search"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/wishlist"><i class="fas fa-heart"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/cart"><i class="fas fa-shopping-cart"></i></a>
      </li>
    </ul>
  </div>
</nav>
<div class="header-image">
  <div class="overlay">
    <h1 class="display-4">Welcome to Our E-Commerce Store</h1>
    <p class="lead">Discover our amazing products and deals.</p>
    <a routerLink="/products" class="btn btn-primary btn-lg">Shop Now</a>
  </div>
</div>

Update header.component.ts

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
  selector: 'app-header',
  standalone: true,
  imports: [RouterLink],
  templateUrl: './header.component.html',
  styleUrl: './header.component.css'
})
export class HeaderComponent {

}

Update header.component.css

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  .nav-link {
    font-size: 1.2rem;
    margin-right: 1rem;
  }
  
  .form-inline {
    flex-grow: 1;
  }
  
  .form-control {
    margin-right: 0.5rem;
  }
  
  .navbar-nav.ml-auto .nav-item .nav-link {
    font-size: 1.4rem;
  }
  
  .navbar-nav.ml-auto .nav-item .nav-link i {
    margin-right: 0.5rem;
  }
  .header-image {
    position: relative;
    background: url('https://via.placeholder.com/1920x600') no-repeat center center;
    background-size: cover;
    height: 60vh;
    color: white;
  }
  
  .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .overlay h1 {
    font-size: 3rem;
    font-weight: bold;
  }
  
  .overlay p {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .overlay .btn {
    font-size: 1.25rem;
    padding: 0.75rem 1.5rem;
  }
  @media (max-width: 768px) {
    .header-image {
      height: 40vh;
    }
  
    .overlay h1 {
      font-size: 2rem;
    }
  
    .overlay p {
      font-size: 1.2rem;
    }
  
    .overlay .btn {
      font-size: 1rem;
      padding: 0.5rem 1rem;
    }
  }
    
//footer.component.html

<footer class="bg-light text-center text-lg-start mt-5">
    <div class="container p-4">
      <div class="row">
        <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
          <h5 class="text-uppercase">About Us</h5>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste atque ea quis molestias.
            Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam voluptatem veniam,
            est atque cumque eum delectus sint!
          </p>
        </div>
  
        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase">Links</h5>
          <ul class="list-unstyled mb-0">
            <li>
              <a href="#!" class="text-dark">Privacy Policy</a>
            </li>
            <li>
              <a href="#!" class="text-dark">Terms of Service</a>
            </li>
            <li>
              <a href="#!" class="text-dark">Contact Us</a>
            </li>
            <li>
              <a href="#!" class="text-dark">FAQs</a>
            </li>
          </ul>
        </div>
  
        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase">Contact</h5>
          <ul class="list-unstyled mb-0">
            <li>
              <p class="text-dark">1234 Street Name, City, State, 12345</p>
            </li>
            <li>
              <p class="text-dark">Email: info.com</p>
            </li>
            <li>
              <p class="text-dark">Phone: +1 234 567 890</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
      © 2024 E-Commerce Website
    </div>
  </footer>
  
//footer.component.css

footer {
    padding: 20px 0;
    background-color: #f8f9fa;
    color: #6c757d;
  }
  
  footer h5 {
    margin-bottom: 1rem;
    font-weight: bold;
  }
  
  footer p,
  footer a {
    margin-bottom: 0.5rem;
    color: #6c757d;
  }
  
  footer a:hover {
    color: #007bff;
    text-decoration: none;
  }
  
  footer .text-center {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  

Update cart.component.html:

<div class="container mt-4">
    <h2>Shopping Cart</h2>
    <table class="table">
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of cartItems">
          <td>{{ item.name }}</td>
          <td>${{ item.price }}</td>
          <td>{{ item.quantity }}</td>
          <td>${{ item.price * item.quantity }}</td>
        </tr>
      </tbody>
    </table>
    <div class="text-right">
     
      <button class="btn btn-success" [routerLink]="['/checkout']">Checkout</button>
    </div>
  </div>
  

Update cart.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
@Component({
  selector: 'app-cart',
  standalone: true,
  imports: [CommonModule, RouterLink],
  templateUrl: './cart.component.html',
  styleUrl: './cart.component.css'
})
export class CartComponent {
  cartItems = [
    { id: 1, name: 'Product 1', price: 100, quantity: 2 },
    { id: 2, name: 'Product 2', price: 200, quantity: 1 },
  ];
}

update checkout.component.html

<div class="container mt-5">
    <h2 class="mb-4">Checkout</h2>
    <form>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName" class="form-label">First Name</label>
          <input type="text" class="form-control" id="firstName" required>
        </div>
        <div class="col-md-6 mb-3">
          <label for="lastName" class="form-label">Last Name</label>
          <input type="text" class="form-control" id="lastName" required>
        </div>
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" required>
      </div>
      <div class="mb-3">
        <label for="address" class="form-label">Address</label>
        <input type="text" class="form-control" id="address" required>
      </div>
      <div class="mb-3">
        <label for="address2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="address2">
      </div>
      <div class="row">
        <div class="col-md-5 mb-3">
          <label for="country" class="form-label">Country</label>
          <select class="form-select" id="country" required>
            <option value="">Choose...</option>
            <option>United States</option>
            <option>Canada</option>
            <option>United Kingdom</option>
          </select>
        </div>
        <div class="col-md-4 mb-3">
          <label for="state" class="form-label">State</label>
          <select class="form-select" id="state" required>
            <option value="">Choose...</option>
            <option>California</option>
            <option>Texas</option>
            <option>New York</option>
          </select>
        </div>
        <div class="col-md-3 mb-3">
          <label for="zip" class="form-label">Zip</label>
          <input type="text" class="form-control" id="zip" required>
        </div>
      </div>
      <h4 class="mb-3">Payment</h4>
      <div class="my-3">
        <div class="form-check">
          <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
          <label class="form-check-label" for="credit">Credit card</label>
        </div>
        <div class="form-check">
          <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
          <label class="form-check-label" for="debit">Debit card</label>
        </div>
        <div class="form-check">
          <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
          <label class="form-check-label" for="paypal">PayPal</label>
        </div>
      </div>
      <div class="row gy-3">
        <div class="col-md-6">
          <label for="cc-name" class="form-label">Name on card</label>
          <input type="text" class="form-control" id="cc-name" required>
          <small class="text-muted">Full name as displayed on card</small>
        </div>
        <div class="col-md-6">
          <label for="cc-number" class="form-label">Credit card number</label>
          <input type="text" class="form-control" id="cc-number" required>
        </div>
        <div class="col-md-3">
          <label for="cc-expiration" class="form-label">Expiration</label>
          <input type="text" class="form-control" id="cc-expiration" required>
        </div>
        <div class="col-md-3">
          <label for="cc-cvv" class="form-label">CVV</label>
          <input type="text" class="form-control" id="cc-cvv" required>
        </div>
      </div>
      <hr class="my-4">
      <button class="w-100 btn btn-primary btn-lg" type="submit">Place Order</button>
    </form>
  </div>
  

Update product-details.component.html:

<div class="container mt-4">
    <div class="row">
        <div class="col-md-4">
    <div *ngIf="product">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="{{ product.name }}">
      <h2>{{ product.name }}</h2>
      <p>Price: ${{ product.price }}</p>
      <button class="btn btn-primary">Add to Cart</button>
    </div>
    <div *ngIf="!product">
      <p>Product not found.</p>
    </div>
  </div>
  </div>
  </div>
  

Update product-details.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [CommonModule, RouterLink],
  templateUrl: './product-detail.component.html',
  styleUrl: './product-detail.component.css'
})
export class ProductDetailComponent {
  productId: number;
  product: any;

  products = [
    { id: 1, name: 'Product 1', price: 100 },
    { id: 2, name: 'Product 2', price: 200 },
    { id: 3, name: 'Product 3', price: 300 },
  ];

  constructor(private route: ActivatedRoute) {
    this.productId = this.route.snapshot.params['id'];
    this.product = this.products.find(p => p.id === +this.productId);
  }
}

Configure your app routing in app-routing.module.ts:

import { Routes } from '@angular/router';
import { ProductListComponent } from './components/product-list/product-list.component';
import { ProductDetailComponent } from './components/product-detail/product-detail.component';
import { CartComponent } from './components/cart/cart.component';
import { CheckoutComponent } from './components/checkout/checkout.component';
export const routes: Routes = [
    { path: '', component: ProductListComponent },
    { path: 'products', component: ProductListComponent },
    { path: 'product/:id', component: ProductDetailComponent },
    { path: 'cart', component: CartComponent },
    { path: 'checkout', component: CheckoutComponent },
    { path: '**', redirectTo: '', pathMatch: 'full' }
];

Ensure that you are using the component correctly in the template. For example, in the app.component.html

<app-header></app-header>
<app-product-list></app-product-list>
<app-footer></app-footer>

Sometimes, changes might not take effect immediately. Restart the Angular development server

ng serve

Open your browser and navigate to http://localhost:4200.

This setup provides a basic e-commerce website structure using Angular 18 and Bootstrap 5. You can expand and customize it further based on your requirements, such as adding authentication, connecting to a backend, and improving the UI/UX.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

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.