245 lines
8.8 KiB
Markdown
245 lines
8.8 KiB
Markdown
|
## 🎯 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!
|