## ๐ŸŽฏ 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 2. Follow the test checklist above 3. Report any issues you find!