🛒 Feature: Shopping Cart Management for Album Viewer

[KhanHam]

Description

Add a shopping cart feature to the Vue.js album viewer application, allowing users to add albums to their cart, view cart contents, and manage their selections before checkout.

Background

Currently, the album viewer displays a collection of albums with an "Add to Cart" button that is non-functional. This feature will implement a complete shopping cart experience that persists across page sessions.

User Stories

As a user, I want to:

• Add albums to my shopping cart so I can purchase multiple albums at once
• See the number of items in my cart at a glance
• View the contents of my cart without leaving the current page
• Remove albums from my cart if I change my mind
• Have my cart persist across browser sessions

Implementation Details

1. State Management

• Create a composable (useCart.ts) or Pinia store for cart state management
• Store cart data in localStorage for persistence
• Track:
  • Cart items (array of albums)
  • Total item count
  • Total price

2. Cart Icon Component (CartIcon.vue)

• Location: Header, next to the LanguageSelector
• Display:
  • Shopping cart icon (🛒 or SVG)
  • Badge showing the number of items in cart
  • Highlight/animate when items are added
• Functionality:
  • Toggle cart drawer/modal on click

3. Cart Drawer/Modal Component (CartDrawer.vue)

• Display:
  • List of albums in cart with:
    • Album thumbnail
    • Title and artist name
    • Price per item
    • Remove button
  • Subtotal
  • Empty cart state with message
• Functionality:
  • Remove individual items from cart
  • Clear entire cart
  • Close drawer

4. AlbumCard Component Updates

• Update "Add to Cart" button to:
  • Call cart add function
  • Show visual feedback (animation, toast notification)
  • Display "Added to Cart" state temporarily
  • Prevent duplicate additions (optional: allow quantity)

5. Internationalization (i18n)

Add translations to existing locale files (en.json, fr.json, de.json):

{
  "cart": {
    "title": "Shopping Cart",
    "itemCount": "{count} item(s)",
    "empty": "Your cart is empty",
    "emptyMessage": "Start adding albums to your collection!",
    "subtotal": "Subtotal",
    "remove": "Remove",
    "clearCart": "Clear Cart",
    "addedToCart": "Added to cart!",
    "removedFromCart": "Removed from cart"
  }
}

6. File Structure

album-viewer/src/
├── components/
│   ├── CartIcon.vue       (new)
│   ├── CartDrawer.vue     (new)
│   ├── AlbumCard.vue      (update)
├── composables/
│   └── useCart.ts         (new)
├── types/
│   └── cart.ts            (new)
└── App.vue                (update header)

Technical Requirements

TypeScript Types (types/cart.ts)

export interface CartItem {
  id: number
  album: Album
  addedAt: Date
}

export interface Cart {
  items: CartItem[]
  count: number
  total: number
}

Core Functionalities

• addToCart(album: Album): void
• removeFromCart(albumId: number): void
• clearCart(): void
• isInCart(albumId: number): boolean
• getCartCount(): number
• getCartTotal(): number
• loadCartFromStorage(): void
• saveCartToStorage(): void

Styling Requirements

• Match existing design system (glass morphism, animations)
• Responsive design (mobile-friendly drawer)
• Smooth transitions and animations
• Accessible (ARIA labels, keyboard navigation)

Acceptance Criteria

• Cart icon is visible in the header next to the language selector
• Cart icon displays a badge with the current number of items (e.g., "3")
• Badge is hidden when cart is empty
• Clicking "Add to Cart" button on AlbumCard adds the album to cart
• Visual feedback (toast/animation) is shown when album is added
• Cart count updates immediately when items are added
• Clicking cart icon opens the cart drawer/modal
• Cart drawer displays all added albums with their details
• Each cart item shows: thumbnail, title, artist, price, and remove button
• Clicking remove button removes the specific album from cart
• Cart subtotal is calculated and displayed correctly
• Empty cart state is shown when no items exist
• Cart drawer can be closed via close button, ESC key, or clicking outside
• Cart state persists after page refresh (localStorage)
• All cart-related text is internationalized (EN, FR, DE)
• Cart functionality works on mobile and desktop screens
• Duplicate albums can be added (or prevent duplicates with UI indication)
• TypeScript types are properly defined with no any types

Testing Checklist

• Add album to cart from album list
• Add multiple albums to cart
• Remove album from cart
• Clear entire cart
• Verify cart persists after page refresh
• Test on different screen sizes (mobile, tablet, desktop)
• Verify all translations (switch between EN/FR/DE)
• Keyboard navigation works
• Screen reader accessibility

Design Mockup/References

The cart should follow the existing design aesthetic:

• Glass morphism effect with backdrop blur
• Smooth animations (slide-in drawer from right)
• Color scheme consistent with current theme
• Icons from existing icon set or emoji

Priority

Medium-High - Enhances user experience and is a core e-commerce feature

---

Additional Notes:

• Consider adding quantity management in a future iteration
• Checkout functionality will be a separate issue
• Analytics tracking for cart events can be added later