Two web pages (front-end API calls for data)
Budget: $30 – $250 USD
Hello,
I have an existing site and we are redesigning two pages; 1. product listing page, 2. product detail page.
See requirements below.
Requirements
DESKTOP ONLY - NO MOBILE WEB
This page is built by making a few API calls to see which items are available and which are links to other websites. The purpose is so that the user can click the actionable buttons based on the availability of the item on Shopaura or a partner site.
0. The ‘Sell on Aura’ link on the top-right corner should go to https://join.shopaura.app/
* Disregard the Login link. There is no login necessary for now.
1. The item list page should have the following features:
a. The header will show toggles between ‘All’, ‘’Available’, and Upcoming’. All of these values will be returned by the initial API call. When toggling between tabs, if there is latency, we should show the attached loader animated gif on the center of the page.
b. The top-left corner of each item picture will show the date that the item becomes or became available (returned by the initial API call).
c. Under each picture will be the brand name and item name returned by the API call.
d. There are 3 actionable buttons under each item depending on the source of the item or the status of the item (if it’s sold out). These buttons show up when a user hovers over an item image.
1. Notify me - If the user clicks this, there will be a popup that allows them to enter their phone number. If someone enters a phone number, you will call an API endpoint which will store the phone number in the database. After the user enters a phone number and clicks submit, there will be a check mark below that item. See screenshot. There is an animated gif (attached) that should be used. It should animate one time, then be a static black checkmark.
2. The ‘Buy’ button will call an API endpoint to the destination URL and will redirect the user to the appropriate URL.
3. The ‘Add to bag’ button will automatically add the item to the user’s shopping bag and will take them to the checkout screen.
4. The ‘Sold out’ label will show up if the item is marked as ‘Sold out’ in the database upon page load.
5. As the user scrolls down viewing products, they should see the "skeleton loader" while the page is loading. See https://www.freakyjolly.com/angular-skeleton-loader-gray-animation-effect-like-facebook-on-list-images-etc/
2. If the user clicks on an item image, they will be taken to the Product Detail page. The contents of this page will be pulled by making an existing API call. You will receive Product name, product image, product description, price, size, and color. See screenshot.
I've attached both screenshots as well as the XD file.
I have an existing site and we are redesigning two pages; 1. product listing page, 2. product detail page.
See requirements below.
Requirements
DESKTOP ONLY - NO MOBILE WEB
This page is built by making a few API calls to see which items are available and which are links to other websites. The purpose is so that the user can click the actionable buttons based on the availability of the item on Shopaura or a partner site.
0. The ‘Sell on Aura’ link on the top-right corner should go to https://join.shopaura.app/
* Disregard the Login link. There is no login necessary for now.
1. The item list page should have the following features:
a. The header will show toggles between ‘All’, ‘’Available’, and Upcoming’. All of these values will be returned by the initial API call. When toggling between tabs, if there is latency, we should show the attached loader animated gif on the center of the page.
b. The top-left corner of each item picture will show the date that the item becomes or became available (returned by the initial API call).
c. Under each picture will be the brand name and item name returned by the API call.
d. There are 3 actionable buttons under each item depending on the source of the item or the status of the item (if it’s sold out). These buttons show up when a user hovers over an item image.
1. Notify me - If the user clicks this, there will be a popup that allows them to enter their phone number. If someone enters a phone number, you will call an API endpoint which will store the phone number in the database. After the user enters a phone number and clicks submit, there will be a check mark below that item. See screenshot. There is an animated gif (attached) that should be used. It should animate one time, then be a static black checkmark.
2. The ‘Buy’ button will call an API endpoint to the destination URL and will redirect the user to the appropriate URL.
3. The ‘Add to bag’ button will automatically add the item to the user’s shopping bag and will take them to the checkout screen.
4. The ‘Sold out’ label will show up if the item is marked as ‘Sold out’ in the database upon page load.
5. As the user scrolls down viewing products, they should see the "skeleton loader" while the page is loading. See https://www.freakyjolly.com/angular-skeleton-loader-gray-animation-effect-like-facebook-on-list-images-etc/
2. If the user clicks on an item image, they will be taken to the Product Detail page. The contents of this page will be pulled by making an existing API call. You will receive Product name, product image, product description, price, size, and color. See screenshot.
I've attached both screenshots as well as the XD file.