这是我们新系列"UI5ers buzz"的第二篇博文。上一篇博文链接如下。在每一篇文章中，我们都将展示SAPUI5的预览版以及刚刚发布或正在开发的全新功能。这次，云购全球，我们将向您展示我们丰富多彩的购物车演示应用程序。

准备好享受一流的购物体验了吗？看看我们改进的演示应用程序！您可以使用演示应用程序：

获取sap.ui.layout布局.BlockLayout和sap.m.LightBox控件以及"保存以备将来使用"功能请看一个完整购物体验的综合示例，以获取您的灵感

为什么不在第一页就开始购物体验呢？在旧版本的购物车演示应用程序中，我们没有合适的欢迎页面，您可以在下面的比较中看到这一点。我们新的欢迎页面包括新的部分，大数据，如促销商品、最近查看的商品和收藏夹，大数据前景，以使用户的购物体验愉快和有效。

区块布局是一个很好的控制。它由行和单元格组织，物联网解决方案，允许您在小区域中组织信息。您可以跨越标题的单元格，也可以跨越行，这样就可以完全控制页面的设计。所有SAPUI5控件都可以显示在单元格内，例如图像控件、图标控件、各种文本控件等等。例如，我们为每个产品添加了"添加到购物车"按钮，提示用户立即开始购物。

这是我们新的欢迎页面与早期版本相比的样子：

我们作为示例使用的产品非常过时，我们不想让用户觉得他们是在旅行回来时间。所以我们更新了产品图片，增加了产品数量，创造了更真实的购物场景。此外，我们使用sap.m.LightBox在单击时显示更大的产品图片。

这是灯箱的外观（只要灯箱打开，背景就会变黑）：

如果没有真正的后端系统，刷新页面可能会导致购物车中的物品丢失。在我们的演示场景中就是这样的——而且非常烦人！为了防止这种情况发生，我们在购物车演示应用程序中添加了本地存储功能。它是使用jQuery.sap.storage，它扩展了购物车的JSON模型。如果产品被添加到购物车中，它们将被保存到本地存储中。你可以查看这篇关于实现选项的博客文章。

如果你点击购物车中某个产品的"保存以备将来使用"，它将出现在购物篮下方的一个单独区域：

通过从我们的演示工具包页面下载演示应用程序来获取代码。只需点击下载按钮并选择购物车演示应用程序。

我们UI5ers Buzz博客系列的下一篇文章将介绍我们的salted Shop Administrator演示应用程序。查看更多关于区块布局的技术见解和细节。

我们做得怎么样？请在此留言或在slack频道与我们联系。

，数据库大数据