We have a shopify website, which serves as an online food retailer business. Currently, we have a collection of products, each of which is a MealKit plan (veggie, meat, etc.) with a basic checkout process. We need to implement a "menu selection" step after the checkout is final. We will show a menu of food items for the checked out MealKit type, along with their photo, description, ingredients and allergy information. The expected functionalities from this form are:
1. (described in page 1 of attached pdf) Implementation of the User Interface, which includes:
a. A scrollable tabular menu, in which each cell shows a picture of the food as the top section and the bottom section including the food name and a counter, with a value >= 0 and increment and decrement buttons to control it.
b. A submission panel on the right hand side, which also shows the number of items left to choose (an example of how the food items counters and meals left should work is described in page 2 of attached pdf)
2. Actions on the form:
a. (page 3 of pdf) Hovering on each food item should increase the opacity of the image and should show "more details" text on the center of the image.
b. (page 4 of pdf) Clicking the image should create a gray layer over the original form and create an expanded food descriptor section. We need the same exact sketch as demonstrated in page 4 (e.g. name of the food appears no the bottom left corner of the image in white bold font, the food description, allergy info and ingredients appear on the section below the image, etc.)
c. (page 5 of pdf) Clicking submission, should validate the form and only record the results, if the form is valid.
3. Possible invalid forms:
a. (page 6 of pdf) If the sum of counts in the menu is HIGHER than the total orders, pop up an error and fall back to the previous values.
b. (page 7 of pdf) If sum of counts in the menu is LOWER than total orders, show an error and ask the user to continue the selection until Meals left are 0.
Conditions of the contract
- The freelancer will create a development store, and do all the work on that site. Upon review and approval of the site owner, the freelancer will first provide a detailed documentation on how to do the changes on the production store, along with the code. The changes will be made to the production store by the freelancer or by the site owner using the documents the freelancer has provided as seen fit by the site owner.
Bu iş için 16 freelancer ortalamada $187 teklif veriyor
Hello, I am a CA, based Graphics expert with 11+ years of practical expertise in Design field. I am very proficient in graphics and animation programs like After Effects, Adobe inDesign, Adobe Illustrator and Adobe Ph Daha Fazla