本教程介绍如何使用SDK方法在游戏内商店中显示以下商品：

• 虚拟物品
• 虚拟物品组
• 捆绑包
• 虚拟货币套餐

源代码

在GitHub上查看这些示例的源代码。

开始之前，请在发布商帐户中配置商品：

1. 配置虚拟物品和虚拟物品组。
2. 配置虚拟货币套餐。
3. 配置捆绑包。

示例中的逻辑与界面比您实际在应用程序中的要简单得多。演示项目提供了一种可能的游戏内商店商品目录实现方案。

创建目录页的小组件

1. 前往Content Browser并创建UI目录。
2. 在快捷菜单中，前往User Interface > Widget Blueprint。
3. 在小组件蓝图中，添加以下UI元素：

1. • 在商品和虚拟货币套餐显示之间切换的按钮
   • 商品组的显示区域
   • 商品列表的显示区域
   • 虚拟货币套餐列表的显示区域

下图为页面结构的示例。

4. 打开一个关卡蓝图：
   1. 在Content Browser中选择一个关卡。
   2. 在主菜单中，前往Blueprints > Open Level Blueprint。
5. 实现在关卡启动时显示小组件。在CreateWidget节点中，指定创建的小组件。

添加目录页的小组件事件处理

1. 在Hierarchy面板中，选择切换到商品列表的按钮。
2. 在Details面板中，单击On Clicked事件旁边的+图标。

3. 在Hierarchy面板中，选择切换到虚拟货币套餐列表的按钮。
4. 在Details面板中，单击On Clicked事件旁边的+图标。

5. 打开Graph视图。
6. 实现在列表间切换的逻辑。方法是按照下图所示添加节点。

实现虚拟物品组的显示

创建商品组的类

1. 前往Content Browser。在快捷菜单中，单击Blueprint Class。
2. 在All classes部分，选择Object，然后单击Select。
3. 用BP_ItemGroupData作为类名。
4. 打开已创建类的蓝图。
5. 在My Blueprint面板中，单击Add New，然后选择Variable。
6. 在Details面板中：

1. 1. 在Variable Name字段中指定GroupData。
   2. 在Variable Type字段中选择XsollaItemGroup。
   3. 勾选Instance Editable和Expose on Spawn复选框。

创建商品组的小组件

1. 前往Content Browser并创建UI目录。在快捷菜单中，前往User Interface > Widget Blueprint。
2. 在小组件蓝图中，添加商品组名称的元素。

下图为小组件结构的示例。

3. 打开Graph视图。
4. 单击Class settings。
5. 在Details面板中，前往Interfaces > Implemented interfaces。
6. 单击Add，然后选择UserObjectListEntry。此为标准UE界面，允许UI基元实现列表元素常规的行为。
7. 实现创建商品组的逻辑：

1. 1. 添加EventOnListItemObjectSet节点以创建列表元素并初始化小组件。
   2. 将来自包含组数据的对象的值传入组名称元素。方法是按照下图所示添加节点。

1. 3. 实现类别为All的所有商品的显示逻辑。方法是如下图所示编辑蓝图。

8. 实现高亮列表中被选中商品组的逻辑。方法是如下图所示添加节点。

向目录页添加商品组列表

1. 打开目录页小组件蓝图。
2. 向商品组显示区域添加List View元素。
3. 在Details面板中，在Entry Widget Class字段中选择一个之前为商品组创建的类。
4. 实现向组添加商品的逻辑：

1. 1. 打开Graph视图。
   2. 将与XsollaLoginSubsystem对象连接的UpdateItemGroups SDK方法调用与EventConstruct节点关联，并添加用户输入数据传递。
   3. 实现向组添加商品的逻辑。该动作应在处理成功更新虚拟物品组的本地缓存时进行。方法是按照下图所示添加节点。

5. 实现类别为All的所有商品的显示逻辑。方法是如下图所示编辑蓝图。

实现虚拟物品的显示

创建商品的类

1. 前往Content Browser。在快捷菜单中，单击Blueprint Class。
2. 在All classes部分，选择Object，然后单击Select。
3. 用BP_CatalogItemData作为类名。
4. 打开已创建类的蓝图。
5. 在My Blueprint面板中，单击Add New，然后选择Variable。
6. 在Details面板中：

1. 1. 在Variable Name字段中指定CatalogItem。
   2. 在Variable Type字段中选择StoreItem。
   3. 勾选Instance Editable和Expose on Spawn复选框。

创建商品的小组件

1. 前往Content Browser并创建一个UI目录，在快捷菜单中，前往User Interface > Widget Blueprint。
2. 在小组件蓝图中，添加以下UI元素：
   • 商品名称
   • 商品价格

下图为小组件结构的示例。

3. 打开Graph视图。
4. 单击Class settings。
5. 在Details面板中，前往Interfaces > Implemented interfaces。
6. 单击Add，然后选择UserObjectListEntry。此为标准UE界面，允许UI基元实现列表元素常规的行为。
7. 实现创建商品组的逻辑：

1. 1. 添加EventOnListItemObjectSet节点以创建列表元素并初始化小组件。
   2. 将来自包含商品数据的对象的值传入商品名称和商品价格元素。方法是按照下图所示添加节点。

向目录页添加商品列表

1. 打开目录页小组件蓝图。
2. 向商品列表显示区域添加List View元素。
3. 在Details面板中，在Entry Widget Class字段中选择一个之前为商品创建的类。
4. 实现向组添加商品的逻辑：

1. 1. 打开Graph视图。
   2. 将与XsollaLoginSubsystem对象连接的UpdateVirtualItems SDK方法调用与EventConstruct节点关联，并添加用户输入数据传递。
   3. 实现向组添加商品的逻辑。该动作应在处理成功更新虚拟物品组的本地缓存时进行。方法是按照下图所示添加节点。

5. 实现向组中添加商品的逻辑。方法是如下图所示添加节点。

实现按组显示虚拟物品

1. 打开目录页小组件蓝图。
2. 在Hierarchy面板中，选择商品组列表。
3. 在Details面板中，单击On Item Clicked事件旁边的+图标。

4. 打开Graph视图。
5. 实现按组筛选商品的逻辑。方法是按照下图所示添加节点。

实现捆绑包的显示

在本指南中，捆绑包和虚拟物品在一个列表中显示。此外，我们还使用同一个小组件来显示单个捆绑包或物品。

在目录页上添加捆绑包列表

1. 打开目录页蓝图。
2. 打开Graph视图。
3. 完成向列表添加捆绑包的逻辑。如下图所示添加UpdateBundles SDK方法回调和UpdateVirtualItems方法回调。

完成商品小组件

1. 打开商品小组件蓝图。
2. 在商品名称旁边添加一个查看捆绑包内容的按钮。

下图为小组件结构的示例。

3. 打开Graph视图。
4. 为捆绑包内容查看按钮添加显示条件，完成创建商品的逻辑。如下图所示。

添加显示捆绑包内容的逻辑

1. 在商品小组件的蓝图中，打开Designer视图。
2. 在Hierarchy面板中，选择查看捆绑包内容的按钮。
3. 在Details面板中，单击On Clicked事件旁边的+图标。

4. 打开Graph视图。
5. 实现显示捆绑包内容（捆绑包中的商品列表和每个商品的数量）的逻辑。方法是按照下图所示添加节点。

实现虚拟货币套餐的显示

创建虚拟货币套餐的类

1. 前往Content Browser。在快捷菜单中，单击Blueprint Class。
2. 在All classes部分，选择Object，然后单击Select。
3. 用BP_VcPackItemData作为类名。
4. 打开已创建类的蓝图。
5. 在My Blueprint面板中，单击Add New，然后选择Variable。
6. 在Details面板中：

1. 1. 在Variable Name字段中指定PackItem。
   2. 在Variable Type字段中选择VirtualCurrencyPackage。
   3. 勾选Instance Editable和Expose on Spawn复选框。

创建虚拟货币套餐小组件

1. 前往Content Browser并创建一个UI目录，在快捷菜单中，前往User Interface > Widget Blueprint。
2. 在小组件蓝图中，添加以下UI元素：
   • 套餐名称
   • 套餐价格

下图为小组件结构的示例。

3. 打开Graph视图。
4. 单击Class settings。
5. 在Details面板中，前往Interfaces > Implemented interfaces。
6. 单击Add，然后选择UserObjectListEntry。此为标准UE界面，允许UI基元实现列表元素常规的行为。
7. 实现创建商品组的逻辑：

1. 1. 添加EventOnListItemObjectSet节点以创建列表元素并初始化小组件。
   2. 将来自包含套餐数据的对象的值传入显示名称和套餐价格的元素。方法是按照下图所示添加节点。

在目录页上添加虚拟货币套餐列表

1. 打开目录页小组件蓝图。
2. 向虚拟货币套餐列表显示区域添加List View元素。
3. 在Details面板中，在Entry Widget Class字段中选择一个之前为虚拟货币套餐创建的类。
4. 实现向列表添加套餐的逻辑：

1. 1. 打开Graph视图。
   2. 将与XsollaStoreSubsystem对象连接的UpdateVirtualCurrencyPackage方法调用与EventConstruct节点关联，并添加用户输入数据传递。
   3. 实现向列表添加套餐的逻辑。该动作应在处理成功更新虚拟货币套餐的本地缓存时进行。方法是按照下图所示添加节点。

本说明主要介绍如何使用SDK方法实现以真实货币计价的形式销售虚拟物品。

开始之前，需实现在目录中显示虚拟物品。下方示例中我们描述了如何实现虚拟物品的购买。其他商品类型的配置与此类似。

示例中的逻辑与界面比您在应用程序中的简单得多。演示项目提供了一种以真实货币计价的形式销售商品以及显示商品目录的可能方案。

源代码

在GitHub上查看这些示例的源代码。

完成目录页小组件

1. 打开目录页小组件。
2. 打开Graph视图。
3. 要在浏览器中打开支付页面：
   1. 实现支付令牌的接收：
      1. 添加InitiatePurchase节点，将与XsollaStoreSubsystem对象关联的FetchPaymenToken SDK方法调用连接至添加的节点。
      2. 向FetchPaymenToken方法传入所购商品的SKU以及用户授权令牌。

1. 2. 调用关联至XsollaStoreSubsystem对象的LaunchPaymentConsole SDK方法，并向其传入支付令牌。

打开支付页面的实现示例：

4. 实现关闭浏览器窗口后检查购买状态：
   1. 要跟踪浏览器关闭事件，请订阅BrowserClosed事件。
   2. 要检查购买状态，请调用CheckOrder SDK方法，并向其传入授权令牌和订单号。

购买状态检查的实现示例：

强化商品数据类

1. 打开BP_CatalogItemData蓝图。
2. 在My Blueprint面板中，单击Add New并选择Variable。
3. 在Details面板中：

1. 1. 在Variable Name字段中指定CatalogWidget。
   2. 在Variable Type字段中，选择W_StoreCatalog。
   3. 勾选Instance Editable和Expose on Spawn复选框。

结果是，列表中的每个元素将包含指向父级小组件的链接并可以调用其方法。

完成向目录页添加商品列表

1. 打开目录页小组件的蓝图。
2. 打开Graph视图。
3. 如下图所示完成填充商品列表的逻辑。

完成商品的小组件

1. 打开商品的小组件蓝图。
2. 添加一个商品购买按钮。

下图为小组件结构的示例。

3. 在Hierarchy面板中，选择一个商品购买按钮。
4. 在Details面板中，单击On Clicked事件旁边的+图标。

5. 打开Graph视图。
6. 实现点击商品购买按钮的逻辑。方法是按照下图所示添加节点。

结果是，点击商品购买按钮后，将根据目录页小组件中实现的逻辑在浏览器中打开一个支付页面。

本说明主要介绍如何使用SDK方法实现以虚拟货币计价的形式销售虚拟物品。

开始之前，需实现在目录中显示虚拟物品。

注：

下方示例中我们描述了如何实现虚拟物品的购买。其他商品类型的配置与此类似。

源代码

在GitHub上查看这些示例的源代码。

示例中的逻辑与界面比您在应用程序中的简单得多。演示项目提供了一种以真实货币计价的形式销售商品以及显示商品目录的可能方案。

要实现以虚拟货币计价的形式销售虚拟物品：

1. 向目录页小组件添加商品购买逻辑。
2. 向商品类添加发起商品购买逻辑的机制。
3. 完善向目录页添加商品列表。
4. 向小组件添加商品购买按钮。
5. 向小组件添加用虚拟货币购买商品的逻辑：
   1. 打开商品小组件的蓝图。
   2. 前往Graph视图。
   3. 如下所示添加节点。

结果是小组件中将显示为商品指定的虚拟货币价格。如果商品有多种虚拟货币价格，则列表中的第一种虚拟货币将用于显示和购买。

本教程介绍如何使用SDK方法显示用户物品库中的商品。

示例中的逻辑与界面比您实际在应用程序中的要简单得多。演示项目提供了一种可能的游戏内商店商品目录实现方案。

源代码

在GitHub上查看这些示例的源代码。

创建物品库页面的小组件

1. 前往Content Browser并创建UI目录。
2. 在快捷菜单中，前往User Interface > Widget Blueprint。
3. 在小组件蓝图中，添加商品列表的显示区域。

下图为物品库结构的示例。

4. 打开一个关卡蓝图：
   1. 在Content Browser中选择一个关卡。
   2. 在主菜单中，前往Blueprints > Open Level Blueprint。
5. 实现在关卡启动时显示小组件。在CreateWidget节点中，指定创建的小组件。

创建商品的类

1. 前往Content Browser。在快捷菜单中，单击Blueprint Class。
2. 在All classes部分，选择Object，然后单击Select。
3. 用BP_UserInventoryItemData作为类名。
4. 打开已创建类的蓝图。
5. 在My Blueprint面板中，单击Add New，然后选择Variable。
6. 在Details面板中：

1. 1. 在Variable Name字段中指定UserInventoryItem。
   2. 在Variable Type字段中选择InventoryItem。
   3. 勾选Instance Editable和Expose on Spawn复选框。

创建商品的小组件

1. 前往Content Browser并创建一个UI目录，在快捷菜单中，前往User Interface > Widget Blueprint。
2. 在小组件蓝图中，添加以下UI元素：
   • 商品名称
   • 商品特征：
     • 对于订阅 — 订阅状态（活动或到期）
     • 对于消耗品 — 商品数量
     • 对于非消耗品 — 不显示任何特征

下图为小组件结构的示例。

3. 打开Graph视图。
4. 单击Class settings。
5. 在Details面板中，前往Interfaces > Implemented interfaces。
6. 单击Add，然后选择UserObjectListEntry。此为标准UE界面，允许UI基元实现列表元素常规的行为。
7. 实现创建商品的逻辑：

1. 1. 添加OnListItemObjectSet节点以创建列表元素并初始化小组件。
   2. 将来自包含商品数据的对象的值传入商品名称元素。方法是按照下图所示添加节点。

1. 3. 通过根据商品类型将商品数据传入商品特征元素，实现定义商品类型。方法是如下图所示添加节点。

1. 4. 添加定义订阅到期时间的逻辑。方法是如下图所示添加节点。

向物品库页面添加商品列表

1. 打开物品库页面小组件蓝图。
2. 向商品列表显示区域添加List View元素。
3. 在Details面板中，在Entry Widget Class字段中选择一个之前为商品组创建的类。
4. 实现向组添加商品的逻辑：

1. 1. 打开Graph视图。
   2. 将与XsollaInventorySubsystem对象连接的UpdateInventory和UpdateSubscriptions连续SDK方法调用与EventConstruct节点关联，如下图所示：

1. 3. 实现填充商品列表的逻辑。方法是如下图所示添加节点。

本教程介绍如何使用SDK方法在应用中显示虚拟货币的余额。

在示例中，我们显示了用户物品库中的虚拟货币及其余额。因此，开始之前应先实现用户物品库中商品的显示。

示例中的逻辑与界面比您实际在应用程序中的要简单得多。演示项目提供了一种可能的游戏内商店商品目录实现方案。

源代码

在GitHub上查看这些示例的源代码。

创建余额显示类

1. 前往Content Browser。在快捷菜单中，单击Blueprint Class。
2. 在All classes部分，选择Object，然后单击Select。
3. 用BP_VcBalanceItemData作为类名。
4. 打开已创建类的蓝图。
5. 在My Blueprint面板中，单击Add New，然后选择Variable。
6. 在Details面板中：

1. 1. 在Variable Name字段中指定VcBalanceItem。
   2. 在Variable Type字段中选择VirtualCurrencyBalance。
   3. 勾选Instance Editable和Expose on Spawn复选框。

创建显示余额的小组件

1. 前往Content Browser并创建一个UI目录，在快捷菜单中，前往User Interface > Widget Blueprint。
2. 在小组件蓝图中，添加以下UI元素：
   • 虚拟货币名称
   • 虚拟货币数量

下图为小组件结构的示例。

3. 打开Graph视图。
4. 单击Class settings。
5. 在Details面板中，前往Interfaces > Implemented interfaces。
6. 单击Add，然后选择UserObjectListEntry。此为标准UE界面，允许UI基元实现列表元素常规的行为。
7. 实现向列表添加虚拟货币的逻辑：

1. 1. 添加EventOnListItemObjectSet节点以创建列表元素并初始化小组件。
   2. 将来自包含虚拟货币数据的对象的值传入虚拟货币名称和虚拟货币数量元素。方法是按照下图所示添加节点。

完成显示物品库的小组件

1. 打开物品库页面小组件蓝图。
2. 向虚拟货币列表显示区域添加List View元素。
3. 在Details面板中，在Entry Widget Class字段中选择一个之前为余额显示创建的类。
4. 实现填充虚拟货币列表的逻辑：

1. 1. 打开Graph视图。
   2. 将与XsollaInventorySubsystem对象连接的UpdateVirtualCurrencyBalance方法调用与EventConstruct节点关联。
   3. 实现填充虚拟货币列表的逻辑。该动作应在处理成功更新虚拟货币余额的本地缓存时进行。方法是按照下图所示添加节点。