Updated: December 19, 2016

SAPUI5 Version 1.32

Shopping App

Intro

A collect app is used to browse and collect objects in order to apply a more complex action or a process to them. A typical example of this is the shopping app.

A shopping app enables users to browse through products, collect them in a shopping cart and to order them. In general, it consists of three parts:

• Product list (all products)
• Shopping cart
• Check out step(s)

Shopping app on desktop

Responsiveness

Shopping app on smartphone

Shopping app on tablet

The shopping (collect) app works well on any form factor. It inherits the responsive behavior from the full screen layout.

Behavior and Interaction

Product List (All Products)

The master screen contains a responsive table with all products and is usually a full-screen app. The header contains an indicator of how many products are in the shopping cart. This indicator also serves as navigation trigger to the shopping cart. The user can filter the items using the filter bar above the table.

Sort, group, and personalization is positioned in the table toolbar. The Personalize button allows the user to show/ hide or rearrange columns.
Any filters that are set and the personalization of the table can be saved with the variant management in the object header.

Product Detail Page

The detail screen contains the product details of a selected product.
The object header can contain following items:

Product name
Image
Price
Category
Subcategory
Information about manufacturer, supplier, and more
Status
A favorite icon marks objects as favorites.

Clicking or tapping on the image enlarges it. The user can also add a review to the product.

The user can send the product from the detail screen to the shopping cart via the Add to Cart button in the footer toolbar.

Product detail page on desktop

Add to Cart (Action)

The user has two possibilities to add a product to the cart:

Add a product directly on the product list.
Add a product on detail page.

A message toast confirms the success. If an error occurred, an error dialog will be shown.

Success message on desktop

Shopping Cart

Shows all collected products with quantity, unit price, and subtotal.

The users can change the quantity of the containing products or remove items from the cart.
Clicking or tapping the item triggers navigation to the product details page.

The back button in the header brings the users back to the last page.

The Go to Checkout button brings the users to the check out step(s).

Shopping cart on desktop

Checkout

The checkout consists of one or more steps that allow the user to order the product.

Usually, the users will need to enter delivery information. Other steps might be necessary as well, such as entering accounting information.
The screen also contains a list of the products that will be ordered.

Checkout on desktop

Page Flow

The shopping (collect) flow shows how a user navigates from a product list through the whole ordering process.