Challenge Overview
Project Overview:
Welcome to the Diageo Direct Cart Pages Responsive HTML5 Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application for cart pages based on provided storyboards using AngularJS framework and Bootstrap. The existing prototype assets can be used in this new prototype implementations.
NOTE: This application will use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML code.
IMPORTART: As per the project schedules the review timelines are very close. Reviewers please note the review timelines for further reference. Please request us if you need additional time for review in case we get more number of submissions.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop a Responsive HTML5 prototype for cart pages based on the provided storyboard designs and wireframe functionality. You need to follow existing old prototype responsiveness, animations, layout design and assets to make reuse on this new prototype. Your prototype must work properly in all the required browsers.
Required Pages:
Below are the required pages for this prototype challenge, please refer provided wireframe and storyboard designs - (here Cart pages are only in scope). The pages should be responsive to show correctly on both desktop and mobile browsers.
You could use program pages "Prototype.zip" to add new pages for this challenge. You could add new HTML pages, add new style codes at bottom of css files with "Cart" section, similarly you could add new JavaScript files for cart pages - please document all these changes in your submission, so that the new code/file changes will be evaluated during review phase.
You need to make sure the "Shipping Addresses" cells count can support at max 10,000 cells per page and it should not have any performance issues on page load.
1. Order Cart Page:
- Click on "Review Cart" button on program pages, navigate user to the cart page.
- Ability to continue to shopping.
- View a Matrix of Shipping Addresses & Items where you can enter quantities - (load cells data from sample JSON data).
- Frozen Item Row Headers (first column of every row).
- Freeze Shipping Address Column Headers - (Handled by correct HTML & CSS, Optimize horizontal scolling for large HTML tables so it performs well).
- List items top to bottom.
- Grouped by collapsible program headers and ordered by Program, item name alpha descending.
- View items details - (Item number, Item name, Price per unit, Pack-out qty, Item image).
- Remove individual item.
- Summary section:
- Summarize a Quantity Sub Total per item.
- Summarize a Price Sub Total per item.
- Summarize a Quantity Sub Total per program.
- Summarize a Price Sub Total per program.
- Add individual shipping address.
- List shipping address left to right.
- Grouped by Account and sorted Account, Address name Alpha descending.
- View shipping address name.
- View shipping address details on hover - (Attention, Street, City, State, Zip).
- Remove individual shipping address.
- Summarize a Quantity Sub Total per shipping address.
- Summarize a Shipping Sub Total per shipping address.
- Summarize a Price Sub Total per shipping address.
- Summarize a Shipping Sub Total for the cart.
- Summarize a Price Sub Total for the cart.
- Summarize a Grand Total for the cart.
- Validations:
- Validate that items are ordered in multiples of the pack-out quantity - (highlight cell w/ red border).
- Validate that the cart does not contain more than {configurable #} cells - (Limit to know where our user experience severely drops).
- Saving:
- Ability to Save Quantities Modifications made to the cart should be auto-saved to Salesforce upon exiting a cell or executing an action such as removing a column, only non-zero items should be updated on SFDC. (updating a quantity, adding an item, adding an address, removing an item, removing an address).
- Changes made on the cart should be synchronized to salesforce asynchronously, allowing for the ability to edit the cart while being offline or when having connectivity issues.
- The cart should warn users of connection and or session issues.
- The cart should warn users to un-saved changes/ un-submitted changes.
- Submit:
- Submit button is visible only if there are un-submitted changes on the cart.
- Submission will ensure all remaining/queued insert/update/deletes to cart items are complete, all validation rules are passed and then update the cart status from saved to submitted. It will then perform the necessary budget overage calculations to notify submitter & any budgeters of any overages.
- Reset:
- A reset button will allow a user to take the cart to the initial state, no cart items and default shipping addresses only.
2. Cart Fullscreen:
- Ability to expand cart to full screen mode - refer screen (07-POS-Order-Cart-Fullscreen).
- This navigation will hide header/sidebar sections and resize the main Cart section.
Specific HTML/CSS/JavaScript Requirements:
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
- HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent")
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Font Requirements:
Refer existing prototype for the font family.
JavaScript Requirements:
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. We would like to use following JavaScript libraries:
Browsers Requirements:
- IE 9+ Browsers on PC - (should be functional on IE 8 version)
- Google Chrome 27+ Browser on MAC and PC
- Latest Safari Browser on MAC and PC
- Latest Firefox Browser on MAC and PC
- Latest iPad, iPhone Mobile Browsers on current iOS
Documentation Provided:
Attached documents: Prototype.zip, Storyboard.zip, Wireframe.zip, Old Prototype.zip
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.