Cart Module – Low Level Design

🛒 Step 7: Cart Module – Low Level Design (LLD)

This document details the low-level design of the cart feature module for managing shopping cart functionality in the Angular e-commerce frontend.

📦 Module Structure

src/
├── app/
│   └── features/
│       └── cart/
│           ├── components/
│           │   ├── cart-items/
│           │   ├── cart-summary/
│           │   └── checkout/
│           ├── services/
│           │   └── cart.service.ts
│           ├── store/
│           │   ├── cart.actions.ts
│           │   ├── cart.reducer.ts
│           │   ├── cart.effects.ts
│           │   └── cart.selectors.ts
│           ├── models/
│           │   └── cart.model.ts
│           ├── cart-routing.module.ts
│           └── cart.module.ts

🧱 Component Breakdown

🛍️ CartItemsComponent

• Lists all items in the cart with quantity controls and remove option
• Shows product thumbnail, name, price, and total per item

💰 CartSummaryComponent

• Shows subtotal, taxes, discounts, and total price
• Proceed to checkout button

🧾 CheckoutComponent

• Handles user checkout process
• Collects shipping info, payment details
• Validates inputs and submits order

🧪 Service: CartService

Manages cart state and API interactions for checkout.

@Injectable({ providedIn: "root" })
export class CartService {
  private cartUrl = "/api/cart";

  constructor(private http: HttpClient) {}

  getCart(): Observable<Cart> {
    return this.http.get<Cart>(this.cartUrl);
  }

  addItem(productId: string, quantity: number): Observable<Cart> {
    return this.http.post<Cart>(`${this.cartUrl}/items`, {
      productId,
      quantity,
    });
  }

  updateItem(productId: string, quantity: number): Observable<Cart> {
    return this.http.put<Cart>(`${this.cartUrl}/items/${productId}`, {
      quantity,
    });
  }

  removeItem(productId: string): Observable<Cart> {
    return this.http.delete<Cart>(`${this.cartUrl}/items/${productId}`);
  }

  checkout(orderDetails: any): Observable<OrderConfirmation> {
    return this.http.post<OrderConfirmation>(
      `${this.cartUrl}/checkout`,
      orderDetails
    );
  }
}

🧩 NgRx Store (optional)

✅ Actions – cart.actions.ts

export const loadCart = createAction("[Cart] Load Cart");
export const loadCartSuccess = createAction(
  "[Cart] Load Cart Success",
  props<{ cart: Cart }>()
);
export const addItemToCart = createAction(
  "[Cart] Add Item",
  props<{ productId: string; quantity: number }>()
);
export const updateCartItem = createAction(
  "[Cart] Update Item",
  props<{ productId: string; quantity: number }>()
);
export const removeCartItem = createAction(
  "[Cart] Remove Item",
  props<{ productId: string }>()
);
export const checkoutCart = createAction(
  "[Cart] Checkout",
  props<{ orderDetails: any }>()
);
export const checkoutSuccess = createAction(
  "[Cart] Checkout Success",
  props<{ confirmation: OrderConfirmation }>()
);

🔁 Reducer – cart.reducer.ts

Handles updating cart items, quantities, and order status.

🌐 Effects – cart.effects.ts

Triggers API calls for cart load, add, update, remove, and checkout.

🔍 Selectors – cart.selectors.ts

export const selectCartItems = createSelector(
  selectCartState,
  (state) => state.items
);
export const selectCartTotal = createSelector(
  selectCartState,
  (state) => state.total
);
export const selectOrderConfirmation = createSelector(
  selectCartState,
  (state) => state.orderConfirmation
);

🔄 API Contracts

📐 Models

export interface CartItem {
  productId: string;
  name: string;
  price: number;
  quantity: number;
  imageUrl: string;
}

export interface Cart {
  items: CartItem[];
  subtotal: number;
  taxes: number;
  discount: number;
  total: number;
}

export interface OrderConfirmation {
  orderId: string;
  estimatedDelivery: string;
  status: string;
}

🚦 Routing & Guards

const routes: Routes = [
  { path: "view", component: CartItemsComponent, canActivate: [AuthGuard] },
  { path: "checkout", component: CheckoutComponent, canActivate: [AuthGuard] },
];

🔐 Security & UX

• Use AuthGuard to protect cart and checkout pages
• Confirm before removing items
• Disable checkout button if cart empty or invalid inputs
• Show loading indicators for async operations
• Provide user feedback (toasts/snackbars) on actions

✅ Responsibilities Summary