Build a Responsive eCart App with Angular and Bootstrap

The Code Points
0

Build a Responsive eCart App with Angular and Bootstrap

The Code Points 0

In today's digital world, creating a responsive eCommerce app is essential for offering a seamless shopping experience. Angular provides a robust framework for building dynamic and interactive web applications, while Bootstrap helps with styling and responsiveness. By combining these technologies, you can build a responsive eCart (eCommerce Cart) app that is easy to use and looks great on any device.

In this blog post, we'll walk you through the steps of building a responsive eCart app using Angular and Bootstrap, covering everything from setting up the environment to implementing the cart functionality.

Step 1: Set Up the Angular Project

1.1 Install Angular CLI

If you haven't already, start by installing Angular CLI globally on your system:

npm install -g @angular/cli

1.2 Create a New Angular Project

Now, create a new Angular project:

ng new responsive-ecart
cd responsive-ecart

1.3 Install Bootstrap

To use Bootstrap for styling, you need to install it via npm:

npm install bootstrap

Next, include Bootstrap in your angular.json file to load the CSS globally. Open angular.json and add the following to the "styles" array:
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Step 2: Set Up the Basic Structure

2.1 Create Components for the eCart

We’ll create a few components for the eCart application:

  • Product List: Display all available products.
  • Cart: Manage the shopping cart and display selected products.
  • Navbar: A navigation bar to switch between product listing and the cart.

Generate the components using Angular CLI:

ng generate component navbar
ng generate component product-list
ng generate component cart

2.2 Add Bootstrap Navbar to navbar.component.html

In navbar.component.html, add the Bootstrap navigation bar that will allow users to navigate between the product list and the cart:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">eCart</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="/products">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/cart">Cart</a>
      </li>
    </ul>
  </div>
</nav>

This navigation bar includes links to the Products and Cart components, which will be displayed using Angular's routing.

Step 3: Implementing the Product List

3.1 Define the Product Data

In product-list.component.ts, define an array of products to display. Each product will have properties such as name, description, and price:

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = [
    { id: 1, name: 'Product 1', description: 'Description for product 1', price: 10 },
    { id: 2, name: 'Product 2', description: 'Description for product 2', price: 20 },
    { id: 3, name: 'Product 3', description: 'Description for product 3', price: 30 },
    { id: 4, name: 'Product 4', description: 'Description for product 4', price: 40 }
  ];
}

3.2 Display Products in product-list.component.html

Now, let's display the product data in product-list.component.html using Bootstrap cards to make it responsive:

<div class="container mt-4">
  <div class="row">
    <div class="col-md-3" *ngFor="let product of products">
      <div class="card">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Product image">
        <div class="card-body">
          <h5 class="card-title">{{ product.name }}</h5>
          <p class="card-text">{{ product.description }}</p>
          <p class="card-text"><strong>\${{ product.price }}</strong></p>
          <button class="btn btn-primary" (click)="addToCart(product)">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

This layout uses Bootstrap’s grid system to make the product cards responsive. The *ngFor directive loops over the products and displays each one.

3.3 Add Products to the Cart

To handle adding products to the cart, we need to implement a service to manage the cart state. Let's create a cart.service.ts.

Generate the service:

ng generate service cart

In cart.service.ts, implement methods to manage the cart:
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private cart: any[] = [];

  addToCart(product: any) {
    this.cart.push(product);
  }

  getCart() {
    return this.cart;
  }

  clearCart() {
    this.cart = [];
  }
}

Now, back in product-list.component.ts, inject the CartService and implement the addToCart method:
import { Component } from '@angular/core';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {

  products = [
    { id: 1, name: 'Product 1', description: 'Description for product 1', price: 10 },
    { id: 2, name: 'Product 2', description: 'Description for product 2', price: 20 },
    { id: 3, name: 'Product 3', description: 'Description for product 3', price: 30 },
    { id: 4, name: 'Product 4', description: 'Description for product 4', price: 40 }
  ];

  constructor(private cartService: CartService) { }

  addToCart(product: any) {
    this.cartService.addToCart(product);
  }
}

Step 4: Implement the Cart

4.1 Display Cart Items

In cart.component.ts, retrieve the cart items using the CartService:

import { Component, OnInit } from '@angular/core';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  cartItems: any[] = [];

  constructor(private cartService: CartService) { }

  ngOnInit(): void {
    this.cartItems = this.cartService.getCart();
  }

  clearCart() {
    this.cartService.clearCart();
    this.cartItems = [];
  }
}

4.2 Display Cart Content

In cart.component.html, display the cart items using Bootstrap’s table component:

<div class="container mt-4">
  <h3>Your Cart</h3>
  <table class="table">
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of cartItems">
        <td>{{ item.name }}</td>
        <td>\${{ item.price }}</td>
      </tr>
    </tbody>
  </table>
  <button class="btn btn-danger" (click)="clearCart()">Clear Cart</button>
</div>

Step 5: Configure Routing

To navigate between the Products and Cart components, configure routing in app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { CartComponent } from './cart/cart.component';

const routes: Routes = [
  { path: 'products', component: ProductListComponent },
  { path: 'cart', component: CartComponent },
  { path: '', redirectTo: '/products', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Conclusion

In this blog, we built a responsive eCart app using Angular and Bootstrap. We covered the following steps:

  • Setting up Angular and installing Bootstrap for styling.
  • Creating components like the product list, cart, and navigation bar.
  • Managing cart state using a service to store products.
  • Displaying the cart contents dynamically and adding basic routing.

This setup provides a simple yet functional shopping cart app, which you can extend with features like checkout, product details, and user authentication. By leveraging Angular’s powerful data-binding capabilities and Bootstrap’s responsive grid system, we’ve built an app that is both easy to navigate and mobile-friendly.


Tags:

Post a Comment

Previous Post Next Post