stardustmeg / greenshop

Greenshop
https://mad-wizards-greenshop.netlify.app/
MIT License
6 stars 1 forks source link

[sprint_3] πŸš€ Issue RSS-ECOMM-3_02: Display Prices with and Without Discount for Discounted Products (20 points) 🎯 #137

Closed stardustmeg closed 6 months ago

stardustmeg commented 6 months ago

πŸš€ Issue RSS-ECOMM-3_02: Display Prices with and Without Discount for Discounted Products (20 points) 🎯

πŸ–ŠοΈ Description

For discounted products πŸ’Έ, the application should display both the original and the discounted price πŸ’°. The discounted price, which is the current price the customer needs to pay, should be made visually distinct to highlight the discount and value for the customer πŸ‘€.

πŸ”§ Implementation Details

  1. Fetching Discounted Product Data: Make use of the commercetools API to fetch product data, which should include the original price and any available discounts. It may require fetching price data separately or in combination with product details.
  2. Parsing Product Price Data: Extract the necessary price and discount information from the fetched data πŸ’‘. This may include the original price, the discount amount or percentage, and the discounted price.
  3. Calculating Discounted Price: If the API does not provide the discounted price directly, calculate it from the original price and the discount amount or percentage πŸ”’.

πŸ’‘ Visual Implementation Ideas

  1. Displaying Prices: Display the original price and the discounted price clearly on the product card. Ensure both prices are easily visible and understandable πŸ‘“.
  2. Highlighting Discounted Price: Make the discounted price visually distinct, for example, by using a different color, font size, or a badge 🏷️. The goal is to draw attention to the discounted price and highlight the savings.
  3. Striking out the Original Price: Consider using a strikethrough for the original price to reinforce the idea that the discounted price is currently in effect 🚫.

βœ… Acceptance Criteria

πŸ”— Useful Links and Resources

  1. Commercetools API documentation
  2. Commercetools API endpoint for fetching product prices
  3. Product Discounts
stardustmeg commented 6 months ago

[sprint_3] πŸš€ Issue RSS-ECOMM-3_02: Display Prices with and Without Discount for Discounted Products (20 points) 🎯