## 🎯 Cart & Wishlist - Quick Test Guide

### Visual Flow

```
┌─────────────────────────────────────────────────────────┐
│                    SHOP PAGE                             │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │   Product 1   │  │   Product 2   │  │   Product 3   │  │
│  │  [Image]      │  │  [Image]      │  │  [Image]      │  │
│  │  $29.99       │  │  $39.99       │  │  $49.99       │  │
│  │  ❤️ [🛒 Cart] │  │  ❤️ [🛒 Cart] │  │  ❤️ [🛒 Cart] │  │
│  └──────────────┘  └──────────────┘  └──────────────┘  │
└─────────────────────────────────────────────────────────┘
                            ↓
                    CLICK "Add to Cart"
                            ↓
┌─────────────────────────────────────────────────────────┐
│  ✅ Product 1 added to cart                              │  ← Toast Notification
└─────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────┐
│  Navigation Bar:  [🛒 ③]  [❤️ ①]                        │  ← Badges Updated
└─────────────────────────────────────────────────────────┘
                            ↓
                    CLICK Cart Icon 🛒
                            ↓
┌─────────────────────────────────────────────────────────┐
│  Shopping Cart                                     [X]   │
│  ───────────────────────────────────────────────────    │
│  │ [Image] Product 1      │ [-] 2 [+]  │ $59.98 │ [X]  │
│  │ [Image] Product 2      │ [-] 1 [+]  │ $39.99 │ [X]  │
│  ───────────────────────────────────────────────────    │
│                                    Total: $99.97         │
│  [Continue Shopping]  [Proceed to Checkout]             │
└─────────────────────────────────────────────────────────┘
```

## 🧪 Test Checklist

### Shop Page Tests

- [ ] Page loads without errors
- [ ] Console shows: `[ShopSystem] Ready!`
- [ ] Products display correctly
- [ ] Cart icon shows badge "0"
- [ ] Wishlist icon shows badge "0"

### Add to Cart Tests

- [ ] Click "Add to Cart" on any product
- [ ] Green notification appears
- [ ] Cart badge updates to "1"
- [ ] Click same product again → badge becomes "2"
- [ ] Click different product → badge increases

### Cart Dropdown Tests

- [ ] Click cart icon in navbar
- [ ] Dropdown slides out from right
- [ ] See product image (small thumbnail)
- [ ] See product name
- [ ] See price
- [ ] See quantity with +/- buttons
- [ ] See subtotal
- [ ] See total at bottom
- [ ] Click "-" button → quantity decreases
- [ ] Click "+" button → quantity increases
- [ ] Click "X" button → item removed
- [ ] Cart badge updates when quantity changes

### Add to Wishlist Tests

- [ ] Click heart ❤️ icon on any product
- [ ] Green notification appears
- [ ] Wishlist badge updates to "1"
- [ ] Click same product again → "Already in wishlist" message
- [ ] Click different product → badge increases

### Wishlist Dropdown Tests

- [ ] Click wishlist icon in navbar
- [ ] Dropdown slides out from right
- [ ] See product image
- [ ] See product name
- [ ] See price
- [ ] See "Add to Cart" button
- [ ] Click "Add to Cart" → item added to cart
- [ ] Cart badge increases
- [ ] Click "X" button → item removed from wishlist
- [ ] Wishlist badge updates

### Persistence Tests

- [ ] Add items to cart
- [ ] Add items to wishlist
- [ ] Note the badge numbers
- [ ] Press F5 (refresh page)
- [ ] Badges show same numbers
- [ ] Click cart icon → items still there
- [ ] Click wishlist icon → items still there

### Product Page Tests

- [ ] Navigate to any product detail page
- [ ] Click "Add to Cart" button
- [ ] Notification appears
- [ ] Cart badge updates
- [ ] Click "Add to Wishlist" button
- [ ] Notification appears
- [ ] Wishlist badge updates

### Mobile Tests (Optional)

- [ ] Resize browser to mobile width
- [ ] Cart icon still visible
- [ ] Wishlist icon still visible
- [ ] Click icons → dropdowns work
- [ ] Items display correctly on narrow screen

### Edge Cases

- [ ] Add 10+ of same item (quantity shows correctly)
- [ ] Add item to wishlist → add to cart → still in wishlist
- [ ] Remove last item from cart → shows "Cart is empty"
- [ ] Remove last item from wishlist → shows "Wishlist is empty"
- [ ] Click outside dropdown → closes automatically

## 🐛 Common Issues & Solutions

### Issue: Nothing happens when clicking buttons

**Solution**:

1. Open Console (F12)
2. Look for red error messages
3. Type `window.ShopSystem` and press Enter
4. Should show object, not `undefined`

### Issue: Badges don't update

**Solution**:

1. Check console for errors
2. Hard refresh: Ctrl+Shift+R
3. Clear localStorage: `localStorage.clear()` in console

### Issue: Images not showing

**Solution**:

1. Right-click broken image → Inspect
2. Check `src` attribute
3. Verify URL is correct
4. Check Network tab for 404 errors

### Issue: Dropdowns don't open

**Solution**:

1. Check console errors
2. Verify HTML has `id="cartPanel"` and `id="wishlistPanel"`
3. Check CSS - dropdown might be hidden

### Issue: Items disappear on refresh

**Solution**:

1. Open DevTools → Application tab
2. Check Local Storage
3. Look for `skyart_cart` and `skyart_wishlist`
4. If not there, localStorage might be disabled
5. Check browser privacy settings

## 📋 Verification Checklist

Before reporting success, verify:

- ✅ All tests pass
- ✅ No console errors
- ✅ Badges update correctly
- ✅ Dropdowns display items with images
- ✅ Quantity controls work
- ✅ Remove buttons work
- ✅ Items persist after refresh
- ✅ Notifications appear and auto-dismiss
- ✅ Both shop page and product page work
- ✅ Mobile responsive (if testing mobile)

## 🎨 What You Should See

### Empty State

```
Cart Dropdown:
┌─────────────────────┐
│  Shopping Cart  [X] │
├─────────────────────┤
│   🛒                │
│   Your cart is      │
│   empty             │
├─────────────────────┤
│ [Continue Shopping] │
└─────────────────────┘
```

### With Items

```
Cart Dropdown:
┌─────────────────────────────┐
│  Shopping Cart         [X]  │
├─────────────────────────────┤
│ [Img] Product Name          │
│       $29.99                │
│       [-] 2 [+]             │
│       Subtotal: $59.98  [X] │
├─────────────────────────────┤
│ Total: $59.98               │
│ [Continue Shopping]         │
│ [Proceed to Checkout]       │
└─────────────────────────────┘
```

## 🚀 Success Criteria

Your cart and wishlist system is working perfectly when:

1. **Buttons respond instantly** (no delays)
2. **Notifications appear** after every action
3. **Badges show correct counts** at all times
4. **Dropdowns display items** with images
5. **Quantity controls work** smoothly
6. **Items persist** across page refreshes
7. **No errors** in browser console
8. **Works on all pages** (shop, product, home)

---

**Ready to test?**

1. Open <http://localhost:5000/shop>
2. Follow the test checklist above
3. Report any issues you find!
