The application should fetch and display the price 💲 for each product from the chosen API on the Detailed Product page. If the product is on sale, both the original price and the sale price should be displayed. The sale price should be clearly distinguished as the current price of the product.
- Fetch Product Price: Fetch the price details of the product from the chosen API. This might involve using the
GET /{projectKey}/products/{ID}orGET /{projectKey}/products/key={key}endpoints for the commercetools API, which should include product price information. - Display Price: Display the price of the product on the Detailed Product page. Make sure the price is formatted correctly and easy to read.
- Display Sale Price: If the product is on sale, fetch the sale price from the API and display it alongside the original price. Make sure it's clear which price is the current price and which price is the original price before the sale.
- Sale Price Highlight: When a product is on sale, the sale price could be highlighted in a bright color 🌈 to draw attention. The original price might be crossed out next to it to make clear that it's no longer the current price.
- Price Formatting: Both prices should be displayed with the appropriate currency symbol and two decimal places, regardless of whether the price ends in .00.
- The application successfully fetches and displays the price for each product from the chosen API.
- If the product is on sale, both the original price and the sale price are displayed. The sale price is clearly distinguished as the current price of the product.