Create the front-end of a product (shopping cart) and payment page (HTML, CSS and JS) using the mockup/prototype provided in Figma.
[login to view URL]
In this interface the user can add products in the product list in the right side and see the products that are added in the left side.
OBS: All the products and parameters need to be with some value defined in variables that we can easily change and update the prices without broke the calcs of shopping cart.
Beyond the price of the product, all the products have some extra paraments that the user can select.
He can select/choose these extra parameters inside the chosen products (some sliders/options or checkbox) that influence directly in the total price of the shopping cart. It is necessary to create some formulas to update this to total price when the user change some parameters inside the products. The logic is simple, every unity of some parameter increases some value (example 0.01 ) but if more quantity the user increase, more discounts the user gets so the price per quantity is reduced. This logic needs to be easy to customize the ranges and the limits of discounts)
In the final of the page, close to the pay button, appears the total price that is the result of the value of all the products added and the value of the extra parameters that they have.
OBS: The mouse over in the “i” icons, open a pop-up with an embedded video that explain the functionality.
On the top of the page the users can switch the duration of the product subscriptions into 6 or 12 months. This gets all the monthly prices and multiply for the quantity of months that is chosen. In the 12 months subscriptions user get 5% of discount.
After the products and parameters has been chosen, the user finally can finish his shopping cart going to checkout step. In the checkout step, (payment step) we want that the interface list all the added products: the name of the item, quantity and parameters choose, item prices, discount, Tax (All products have 23% tax), and calc the total about all the products and the total prices too. OBS: The tax is calc after discount.
In the payment step, it is important that the user have an enjoyable experience with typing the cred card number. So, we want to avoid theirs mistakes doing some validations:
[login to view URL] will be only allowed to put numbers on the Credicard number field.
2. Limit the number of characters in Credicard number field.
3. in the credit card number field create auto space between a sequence of 4 numbers while the user is typing. See the example [login to view URL]
4. Create Feedback of error when the fields it's not filled (red) and if it's without the right format.
5. Validate and show what is the credit card supplier whiling the user is typing. See the example: [login to view URL]
6. On the name field: Limit the quantity of characters
7. On CVV field: the limit the quantity of characters .
8 In the month and year field (MM / YY): Create the validation to help the user to filed. Create auto space between the " / " while the user is typing.
9. Create the feedback if the Credicard is expired: feedback above the month and year filed.
10. Create feedback when the payment gateway returns error.
11. Active the PAY button when the fields of the cred card are filed and any of it are without error feedbacks.
The HTML5 and CSS3 part wants to be done using the best practices. With good names for the classes to be easy to maintain and the less lines of code as possible.
Grid system: CSS grid.