UI5ers Buzz #01: Spiced-up Shopping Experience in our Demo App

This is the second blog post in our new series “UI5ers buzz”. Previous blog post is linked below. With each post we will show a preview of things to come in SAPUI5 and brand new features that have just been released or are in the making. This time we’ll show you our spiced-up shopping cart demo app.

Ready for a first-rate shopping experience? Take a look at our revamped demo app! You can use the demo app to:

• Get code samples for the sap.ui.layout.BlockLayout and sap.m.LightBox controls and also the “Save for later” functionality
• See a comprehensive example of a complete shopping experience—for your inspiration

Why not kick-start the shopping experience right on the first page? We didn’t have a proper welcome page in the old version of our shopping cart demo app, as you can see in the comparison below. Our new Welcome page includes new sections such as Promoted Items, Recently Viewed Items, and Favorites, to make the user’s shopping experience pleasant and effective.

The block layout is an excellent control for this. It’s organized by rows and cells allowing you to structure information in small areas. You can span cells for headings, and rows can also be spanned, giving you full control of the design of your page. All SAPUI5 controls can be shown inside the cells, such as image controls, icon controls, different sorts of text controls, and more. As an example, we added “add to shopping cart” buttons for each product, prompting the user to start shopping right away.

This is what our new Welcome page looks like in comparison to the earlier version:

The products that we were using as examples  were quite outdated and we didn’t want our users to feel like they were traveling back in time. So we updated the product pictures and increased the number of products to create a more realistic shopping scenario. In addition, we used the sap.m.LightBox to display a larger product picture when clicked.

This is what the light box looks like (background blacked out as long as the light box is open):

Refreshing the page can cause a loss of items in the shopping cart if you do not have a real back-end system in place. This was the case in our demo scenario – and it was very annoying! To keep this from happening, we added local storage functionality to our shopping cart demo app. It has been implemented using jQuery.sap.storage, which extends the JSON model of the shopping cart. If products are added to the shopping cart, they are saved to the local storage. You can check out this blog post on implementation options.

If you click Save for later  for one of the products in the cart, it will appear in a separate area below the basket:

Get the code by downloading the demo app from our Demo Kit page. Just click the download button and select the Shopping Cart demo app.

The next post in our UI5ers Buzz blog series will cover our salted Shop Administrator demo app. Check it out for more technical insights and details about the block layout.

How are we doing? Leave a comment here or get in touch with us in the slack channel.

Previous post: UI5ers Buzz #00

Next post: UI5ers Buzz #02

Cheers,

Annette

Annette is a UI5 developer at SAP who loves to be creative and produce sophisticated Web front ends. Always in pursuit of the optimal user experience, she’s supporting UI5 communities, happy to share success and grateful for learning something new every day.