Product Detail page (PDP) consist of:
• Name of the product
• Photo of the product
• Short description
• Available ‘ Color ’
• Available ‘ Pattern ’
• Sizes (S, M, L) (if the product has different sizes)
• Wishlist user sees as ‘Heart’ icon
• Buttons: ‘ Add to cart ’, ‘ Buy now ’.
Below the PDP User see recommendations of 3 products with photos, called as ‘ Similar items ’.
Below the ‘ Similar items ’ User see ‘ Feedbacks ’, which consist of:
The product rating is described as 5 Stars;
2 edit boxes: ‘ Name ‘, ‘ Email ‘. Required fields;
' Name ' :
Allowed number of characters: from 2 to 30.
Allowed characters: alphabetic characters, hyphen(-), apostrophe (') , space.
If User enters less than 2 or more than 30 symbols, error message “Field should contain from 2 to 30 characters” is displayed.
' Email ' :
Allowed email mask: example@mail.com
Allowed characters: letters, numbers, dot ( . ), underscore ( ), dash ( — ), hyphen ( - ), at sign ( @ ).
Allowed number of characters: from 8 to 60.
There must be at least 2 allowed characters: letter, number, dot ( . ), underscore ( ), hyphen ( - ), dash ( — ) before at sign ( @ ).
Value with 2 dot symbols set near each other is invalid.
Edit box with text: ‘ Share your thoughts with others* ‘. Is required field;
Button ‘ Leave feedback ’.
Below the ‘ Feedbacks ‘ field User sees all feedbacks with: users name, feedback and date. (Mockup_1_PDP)
Acceptance criteria:
1.PDP with blue frame.
2.Buttons ‘ Add to cart ‘, ‘ Buy now ‘ are disable by default. When user chooses ‘ Color ‘, ‘ Pattern ‘, Size buttons become active.
3.When user in the form of ‘ Feedbacks ‘ does'nt fill in all the fields, an error is displayed above the button ' Leave feedback ': ' All fields must be filled ' (Mockup_2_Error message).
4.‘ Feedbacks ‘ : when the user rates the product by clicking on 1-5 stars, the color of the selected stars turns yellow. (Mockup_3_Rating Stars)
5.The ‘ Heart ‘ icon is black by default. When user hovers (or click) on the ‘ Heart ‘ icon, the color become red. (Mockup_4_Red Heart icon)
6.Ukrainian localization according to Mockups: Mockup_5_PDP UA, Mockup_6_UA Error message
7.When user write more than 200 characters in the field ' Feedbacks ' error message appears: Maximum 200 symbols. (Mockup_7_Feedbacks_error message_EN Mockup_8_Feedbacks_error message_UA)
Product Detail page (PDP) consist of: • Name of the product • Photo of the product • Short description • Available ‘ Color ’ • Available ‘ Pattern ’ • Sizes (S, M, L) (if the product has different sizes) • Wishlist user sees as ‘Heart’ icon • Buttons: ‘ Add to cart ’, ‘ Buy now ’.
4.‘ Feedbacks ‘ : when the user rates the product by clicking on 1-5 stars, the color of the selected stars turns yellow. (Mockup_3_Rating Stars)
5.The ‘ Heart ‘ icon is black by default. When user hovers (or click) on the ‘ Heart ‘ icon, the color become red. (Mockup_4_Red Heart icon)
6.Ukrainian localization according to Mockups: Mockup_5_PDP UA, Mockup_6_UA Error message
7.When user write more than 200 characters in the field ' Feedbacks ' error message appears: Maximum 200 symbols. (Mockup_7_Feedbacks_error message_EN Mockup_8_Feedbacks_error message_UA)
![Mockup_8_Feedbacks_error message_UA](https://user-images.githubusercontent.com/65678768/88017404-42ed3f00-cb2e-11ea-880a-e9b1d36c6cb0.png)