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
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.
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.
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
Displaying Prices: Display the original price and the discounted price clearly on the product card. Ensure both prices are easily visible and understandable π.
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.
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
[x] Both the original price and the discounted price are clearly displayed for discounted products.
[x] The discounted price is visually distinct and clearly indicates that it is the current price the customer needs to pay.
[x] If the original price is displayed, it should be marked in a way that clearly communicates that it is not the current price (e.g., strikethrough).
π 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
π‘ Visual Implementation Ideas
β Acceptance Criteria
π Useful Links and Resources