Skip to content

[FIX] Persist cart state to localStorage on page refresh#274

Open
Siddh2024 wants to merge 1 commit into
rdodiya:gssoc_developfrom
Siddh2024:fix/268-cart-persistence
Open

[FIX] Persist cart state to localStorage on page refresh#274
Siddh2024 wants to merge 1 commit into
rdodiya:gssoc_developfrom
Siddh2024:fix/268-cart-persistence

Conversation

@Siddh2024

Copy link
Copy Markdown
Contributor

Description

Fixes #268

The cart state was previously held only in memory and lost on page refresh. This PR adds localStorage persistence so cart items survive page reloads.

Changes Made

CartContext (src/context/CartContext.jsx)

  • Created CartContext with localStorage persistence using 'restrohub-cart' key
  • Provides addItem, removeItem, updateQuantity, clearCart operations
  • Exposes itemCount and totalAmount derived values
  • Auto-saves to localStorage on every state change
  • On mount, restores cart from localStorage
  • Uses useRef hydration guard to prevent SSR issues

CartDrawer (src/components/customer/CartDrawer.jsx)

  • Slide-in drawer showing cart items with name, price, quantity controls
  • Quantity increment/decrement and remove buttons per item
  • Clear cart and total display
  • Empty state with helpful message
  • Overlay backdrop closes drawer on click

Navigation & MenuSection Updates

  • Added cart button with SVG icon and item count badge to Navigation
  • Added "Add to Cart" button on each menu item in MenuSection
  • Wrapped CustomerLayout with CartProvider

Testing

  1. Open restaurant menu page
  2. Add items to cart via "Add to Cart" buttons
  3. Open cart drawer via cart button in navigation
  4. Verify items, quantities, total display correctly
  5. Refresh the page - cart items should persist from localStorage
  6. Clear cart - items should be removed from localStorage

…rdodiya#268)

- Created CartContext with localStorage persistence for cart items
- CartProvider wraps CustomerLayout so cart is available on all customer pages
- Added CartDrawer component with item list, quantity controls, remove, and clear
- Added cart button with badge in Navigation showing item count
- Added "Add to Cart" buttons on menu items in MenuSection
- Cart state auto-saves to localStorage on every change
- On page load, cart is restored from localStorage
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UX] Cart state not preserved on page refresh

1 participant