[Feat] enhancing wishlist page to accomodate backend fetched data and heart button on product cards

[ShivanshPlays]

Description

Description

Enhance the frontend to allow users to add products to their wishlist using a heart button on product cards and modify the dedicated wishlist page.

Tasks

1. Add Heart Button on Products:

   • Add a heart icon on each product card.
   • On click:
     • If the user is authenticated, update the user's wishlist via backend actions.
     • If unauthenticated, redirect to the login/authentication page.

2. Wishlist Page:

   • On this page, fetch the authenticated user’s wishlisted products using the GET backend action.
   • Display all wishlisted products in a grid/list view.

3. UI/UX Improvements:

   • Add loading states while fetching data.
   • Provide visual feedback (e.g., color change or animation) when adding/removing products from the wishlist.

Acceptance Criteria

• Heart icon should correctly update the wishlist for authenticated users.
• Clicking the heart button as a guest redirects to the login page.
• The wishlist page displays all wishlisted products after login.
• Proper loading and error states are handled on the frontend.

Screenshots

No response

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[github-actions[bot]]

Hello ShivanshPlays! Thanks for opening an issue in Ezyshop! 🚀

• We'll get back to you as soon as possible.

• Hope you star our Repo.

• Join our Discord Server to collaborate and discuss further.