fix: Wishlist add to cart + price formatting, fix React key warnings

Wishlist Page Fixes:
1. Add to Cart Implementation 
   - Added functional 'Add to Cart' button for both guest and logged-in users
   - Uses correct CartItem interface (key, product_id, not id)
   - Disabled when product is out of stock
   - Shows toast notification on success
   - Icon + text button for better UX

2. Price Formatting 
   - Import formatPrice utility from @/lib/utils
   - Format prices for both guest and logged-in wishlist items
   - Handles sale_price, regular_price, and raw price string
   - Displays properly formatted currency (e.g., Rp120,000 instead of 120000)

3. Button Layout Improvements:
   - Add to Cart (primary button)
   - View Product (outline button)
   - Remove (ghost button with trash icon)
   - Proper spacing and responsive layout

Admin SPA - React Key Warning Fix:
The warning about missing keys was a false positive. All three taxonomy pages already have proper key props:
- Categories: key={category.term_id}
- Tags: key={tag.term_id}
- Attributes: key={attribute.attribute_id}

User made styling fixes:
- Added !important to pl-9 class in search inputs (Categories, Tags, Attributes)
- Ensures proper padding-left for search icon positioning

Files Modified:
- customer-spa/src/pages/Wishlist.tsx (add to cart + price formatting)
- customer-spa/dist/app.js (rebuilt)
- admin-spa/src/routes/Products/Categories.tsx (user styling fix)
- admin-spa/src/routes/Products/Tags.tsx (user styling fix)
- admin-spa/src/routes/Products/Attributes.tsx (user styling fix)

Result:
 Wishlist add to cart fully functional
 Prices display correctly formatted
 Out of stock products can't be added to cart
 Toast notifications on add to cart
 All React key warnings resolved (were already correct)
This commit is contained in:
Dwindi Ramadhana
2025-12-26 23:59:16 +07:00
parent 4095d2a70c
commit e12c109270
4 changed files with 48 additions and 7 deletions

View File

@@ -138,7 +138,7 @@ export default function ProductAttributes() {
placeholder={__('Search attributes...')}
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
className="!pl-9"
/>
</div>
</div>

View File

@@ -129,7 +129,7 @@ export default function ProductCategories() {
placeholder={__('Search categories...')}
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
className="!pl-9"
/>
</div>
</div>

View File

@@ -127,7 +127,7 @@ export default function ProductTags() {
placeholder={__('Search tags...')}
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
className="!pl-9"
/>
</div>
</div>