Two Angular templates for adding product to a cart

Consider a product that has 3 variants (for example: Length, Width, Color).

We'd need two different pages designed for adding items to a cart.

FIRST TEMPLATE: MULTI-SELECT (see image #1)

A twist on traditional product selection (similar to making variant choices using 3 combo boxes and entering quantities into a textbox), but we'd want it to be more dynamic.

For example, the customer would choose BLUE as a color, 32 as a length, and then 29 as a width. They'd then enter a quantity to have the item as selected added to the cart. It would be similar to, and heavily inspired by, the Angular.js app used here: [login to view URL]

The customer would be able to change the order that the 3 dimensions would appear in (using a <-> button, animating the columns swapping position).

SECOND TEMPLATE: GRID VIEW (see image #2)

A product page to allow customers to enter quantities in a 2-dimension grid, choosing the 3rd dimension from a drop down or list.

For example, choose the color BLUE, and then enter multiple quantities in a LENGTH x WIDTH grid.

Alternatively, the customer could choose to enter quantities by selecting LENGTH as the main dimension, and enter quantities in a COLOR x WIDTH grid.

The cells in the grid to enter quantities would be color coded based on the availability of the selection (IN STOCK, SPECIAL ORDER, UNAVAILABLE)

Because this is more complex, it would require exception handling and realtime customer interaction (if, for example, the customer changed the primary dimension TYPE or VALUE, it would prompt the customer whether to add the current quantities or discard).

The deliverable will include 2 working templates using sample data mocked in javascript which will behave as described, allowing selections to be added a mocked API.

AngularJS Graphic Design HTML JavaScript Website Design

Project ID: #9375206

About the project