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