Skip to content

feat: implement slide-out cart drawer - #163

Open
Daksh7785 wants to merge 2 commits into
chinmay1126:mainfrom
Daksh7785:feature/cart-slideout-drawer
Open

feat: implement slide-out cart drawer#163
Daksh7785 wants to merge 2 commits into
chinmay1126:mainfrom
Daksh7785:feature/cart-slideout-drawer

Conversation

@Daksh7785

Copy link
Copy Markdown
Contributor

resolves #162

Summary

Currently, clicking "Add to Cart" only updates a tiny counter in the Navbar. Users had no quick way to review the contents of their cart without navigating to a separate page, creating unnecessary friction during the shopping experience.


Root Cause

The frontend state exclusively tracked book objects pushed to an array and did not support granular quantity management, and there was no intermediate UI (like a drawer) to visualize this state to the user without hard-routing.


Solution

  • Extracted a slide-out CartDrawer component from the main layout.
  • Rewrote the global cart logic in App.jsx to group duplicate items and implement a quantity tracker.
  • Supported decrement, increment, and strict removal logic.
  • Built an overlay mechanism that traps body scroll and gracefully dismisses via mouse click, explicit button presses, or Keyboard Escape events.

Files Changed

  • bookshelf-frontend/src/App.jsx: State management augmented to handle array maps for quantity logic. Injected <CartDrawer />.
  • bookshelf-frontend/src/components/CartDrawer.jsx (NEW): Core layout for the cart UI, rendering dynamic lists of books and calculating totals.
  • bookshelf-frontend/src/components/CartDrawer.css (NEW): Standard UI layout matching established theme tokens.

Testing

  • Build passed
  • Lint passed
  • Tests passed
  • Manual verification completed (Verified cart groupings, dynamic subtotal checks, and Escape key dismissal logic).

Impact

  • Breaking changes: No
  • Performance impact: Lightweight conditional rendering via React.
  • Security impact: None.
  • Compatibility: Handled with scalable CSS flexbox properties suitable for mobile viewports.

Checklist

  • Issue solved
  • Build passes
  • Tests pass
  • Lint passes
  • No unrelated changes
  • Ready for review

@vercel

vercel Bot commented Jul 29, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the CHINMAY Team on Vercel.

A member of the Team first needs to authorize it.

@netlify

netlify Bot commented Jul 29, 2026

Copy link
Copy Markdown

Deploy Preview for book-shelf1126 failed.

Name Link
🔨 Latest commit 7797c74
🔍 Latest deploy log https://app.netlify.com/projects/book-shelf1126/deploys/6a6a3b914a83b00008d15b1c

@github-actions

Copy link
Copy Markdown

🎉 Thank you for opening this Pull Request!

We appreciate your contribution and effort toward improving this project.

A maintainer will review your PR soon.

Please ensure:
✅ Code follows project guidelines
✅ Changes are properly tested
✅ No sensitive data or API keys are exposed

Thank you for contributing to the community.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: Shopping cart slide-out drawer

1 participant