Build a eCart App with Angular and Bootstrap

The Code Points
0

Build a eCart App with Angular and Bootstrap

The Code Points 0

Building an eCommerce application requires several key features like a dynamic product display, shopping cart, and checkout functionality. A responsive design is crucial to ensure that users have a seamless shopping experience on all devices, from desktop to mobile. Angular and Bootstrap are the perfect tools to create a responsive and feature-rich eCart app.

In this article, we will walk through the process of building an eCart application using Angular for the frontend and Bootstrap for responsive design. Whether you are creating a small store or a full-fledged online shopping platform, this approach will help you build a solid, scalable, and mobile-friendly eCart app.

Why Choose Angular and Bootstrap?

  • Angular: Angular is a powerful front-end framework that simplifies the development of dynamic web applications. It offers features like data binding, dependency injection, and modular architecture, making it ideal for building scalable web apps, including eCommerce platforms.
  • Bootstrap: Bootstrap is a popular front-end framework that provides pre-designed, responsive layout components and CSS utilities. It ensures that your eCart app looks great on any device with minimal effort. Using Bootstrap in combination with Angular helps speed up development while maintaining flexibility.

Setting Up the Project

First, ensure you have Node.js and Angular CLI installed. If you don't have these, install them from their official websites.

Create a New Angular Project:

Open a terminal and run the following commands to set up a new Angular project.

ng new eCartApp
cd eCartApp

Install Bootstrap:

To add Bootstrap to your Angular project, use the following command:

npm install bootstrap

Then, import Bootstrap CSS into your angular.json file:
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

Creating the Product Display Component

In an eCart app, displaying products in a user-friendly and responsive manner is essential. We will create a product display component where users can browse through available items.

Generate the Product Component:

Run the following command to generate a new component for displaying products:

ng generate component product-list

Design the Product Layout with Bootstrap:

In the product-list.component.html, use Bootstrap’s grid system to create a responsive layout for displaying products.

<div class="container">
  <div class="row">
    <div class="col-sm-4" *ngFor="let product of products">
      <div class="card">
        <img [src]="product.image" class="card-img-top" 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">${{ product.price }}</p>
          <button class="btn btn-primary" (click)="addToCart(product)">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

Product List Data:

In the product-list.component.ts, define a list of products that will be displayed.

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

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

  products = [
    { name: 'Product 1', description: 'Description 1', price: 25.99, image: 'assets/product1.jpg' },
    { name: 'Product 2', description: 'Description 2', price: 35.99, image: 'assets/product2.jpg' },
    { name: 'Product 3', description: 'Description 3', price: 15.99, image: 'assets/product3.jpg' },
  ];

  constructor() { }

  ngOnInit(): void {}

  addToCart(product: any): void {
    console.log('Product added to cart:', product);
  }
}

Building the Shopping Cart Functionality

The next step is to create a shopping cart that allows users to add and remove items. We’ll store the cart items in a service, making it easy to manage the cart state across components.

Create a Cart Service:

Generate a new service to handle the cart functionality.

ng generate service cart

In cart.service.ts, define methods to add, remove, and retrieve items in the cart.
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CartService {

  private cart: any[] = [];

  constructor() { }

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

  getCartItems(): any[] {
    return this.cart;
  }

  removeFromCart(product: any): void {
    this.cart = this.cart.filter(item => item !== product);
  }
}

Displaying Cart Items:

Create a new component to display the shopping cart contents.

ng generate component cart

In cart.component.ts, retrieve the cart items from the CartService and display them.
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 = [];

  constructor(private cartService: CartService) {}

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

  removeItem(item: any): void {
    this.cartService.removeFromCart(item);
    this.cartItems = this.cartService.getCartItems();
  }

  checkout(): void {
    console.log('Proceeding to checkout...');
  }
}

In the cart.component.html, display the cart items using Bootstrap’s table layout:
<div class="container">
  <h2>Your Cart</h2>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of cartItems">
        <td>{{ item.name }}</td>
        <td>${{ item.price }}</td>
        <td><button class="btn btn-danger" (click)="removeItem(item)">Remove</button></td>
      </tr>
    </tbody>
  </table>
  <button class="btn btn-success" (click)="checkout()">Proceed to Checkout</button>
</div>

Responsive Design with Bootstrap

By using Bootstrap’s grid system and pre-built components, your eCart app will automatically be responsive on mobile, tablet, and desktop screens. Ensure your app looks good across all devices without writing custom media queries.

Bootstrap’s grid system helps you organize content into rows and columns, making it easier to build layouts that adapt to different screen sizes. By using classes like col-sm-4, col-md-6, and col-lg-3, you can adjust how products are displayed based on the screen size.

Conclusion

By combining Angular and Bootstrap, you can quickly build a responsive eCart application that works seamlessly across devices. The integration of Angular’s component-based architecture with Bootstrap’s responsive grid system ensures that your application is scalable, maintainable, and mobile-friendly.

This tutorial covers key components like product display, cart functionality, and checkout, but you can extend it further by adding features like user authentication, order history, payment integration, and more. With these tools, you are ready to create a feature-rich eCommerce experience.

Tags:

Post a Comment

Previous Post Next Post