As a User I want to see the Product Detail page (PDP)

[LiliiK]

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 ’.

1. Below the PDP User see recommendations of 3 products with photos, called as ‘ Similar items ’.
2. 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 ’.
3. 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)

[NataliiaPalyg]

Product photo must have zoom in part of image when hovering on it. Example: