Put it all together - In-Game Store Essentials - (Unreal Engine module)

Last updated on June 23, 2025

Connect the UI to show categories and store items

1. Open the ShopWidget_Starter CPP file, navigate to the NativeOnActivated() function, and add the following highlighted lines. This will call the GetOrQueryCategoriesByRootPath() function, which you implemented in the previous step, as soon as the widget is activated.

   void UShopWidget_Starter::NativeOnActivated()
   {
   // ...
   	// Reset UI.
   	SwitchContent(EAccelByteWarsWidgetSwitcherState::Loading);
   
   	StoreSubsystem->GetOrQueryCategoriesByRootPath(
   		GetOwningPlayer(),
   		RootPath,
   		FOnGetOrQueryCategories::CreateUObject(this, &ThisClass::OnGetOrQueryCategoriesComplete));
   // ...
   	OnActivatedMulticastDelegate.Broadcast(GetOwningPlayer());
   }

2. Go to SwitchCategory() function and replace its implementation with the code below. This change ensures that store items are retrieved immediately after receiving the store categories or when a player selects a category.

   void UShopWidget_Starter::SwitchCategory(FName Id)
   {
   	Tv_ContentOuter->ClearListItems();
   	StoreSubsystem->GetOrQueryOffersByCategory(
   		GetOwningPlayer(),
   		Id.ToString(),
   		FOnGetOrQueryOffersByCategory::CreateUObject(this, &ThisClass::OnGetOrQueryOffersComplete));
   }

3. Navigate to the OnRefreshButtonClicked() function and replace the current code with the snippet below. s mentioned earlier, this function behaves similarly to the GetOrQueryCategoriesByRootPath() function call in the step 1, but it also stores the active tab and re-selects it after retrieving the data.

   void UShopWidget_Starter::OnRefreshButtonClicked()
   {
   	OnRefreshButtonClickedDelegates.Broadcast();
   
   	SwitchContent(EAccelByteWarsWidgetSwitcherState::Loading);
   
   	Tv_ContentOuter->ClearListItems();	
   	Tl_ItemCategory->SetVisibility(ESlateVisibility::Hidden);
   
   	// Refresh store item.
   	StoreSubsystem->GetOrQueryCategoriesByRootPath(
   		GetOwningPlayer(),
   		RootPath,
   		FOnGetOrQueryCategories::CreateUObject(this, &ThisClass::OnRefreshCategoriesComplete),
   		true);
   	
   	// Refresh balance.
   	UAccelByteWarsActivatableWidget* BalanceWidget = GetBalanceWidget();
   	if(BalanceWidget != nullptr)
   	{
   		BalanceWidget->DeactivateWidget();
   		BalanceWidget->ActivateWidget();
   	}
   }

4. Go to OnRefreshCategoriesComplete() function and replace its implementation with the code below. This function re-selects the previously active category tab and retrieves the corresponding store items.

   void UShopWidget_Starter::OnRefreshCategoriesComplete(TArray<FOnlineStoreCategory> Categories)
   {
   	FName LastSelectedTab = Tl_ItemCategory->GetSelectedTabId();
   	Tl_ItemCategory->SetVisibility(ESlateVisibility::Visible);
   	
   	// Temporary unbind, as it will automatically select first tab when rebuild tab list, while we want to keep the previous tab selection. 
   	Tl_ItemCategory->OnTabSelected.RemoveDynamic(this, &ThisClass::SwitchCategory);
   	
   	OnGetOrQueryCategoriesComplete(Categories);
   
   	// Reselect tab if exist, otherwise select all item tab.
   	const bool bLastSelectedTabExist = Categories.ContainsByPredicate([&LastSelectedTab](FOnlineStoreCategory& Category)
   	{
   		return Category.SubCategories.IsEmpty() && Category.Id.Equals(LastSelectedTab.ToString());
   	});
   	const FName TabSelectionTarget = bLastSelectedTabExist ? LastSelectedTab : FName(RootPath);
   	Tl_ItemCategory->SelectTabByID(TabSelectionTarget);
   	StoreSubsystem->GetOrQueryOffersByCategory(
   		GetOwningPlayer(),
   		TabSelectionTarget.ToString(),
   		FOnGetOrQueryOffersByCategory::CreateUObject(this, &ThisClass::OnGetOrQueryOffersComplete),
   		true);
   
   	// Re-add after manually select and switch category, because re-add before it will be unstable.	
   	if(IsActivated())
   	{
   		Tl_ItemCategory->OnTabSelected.AddDynamic(this, &ThisClass::SwitchCategory);
   	}
   }

5. Build the project and open it with the Unreal Editor once it's done.

6. Open the file listed below in Editor and set the RootPath for each widget blueprint. In Byte Wars case, the Item Shop should show all items under the /ingamestore/item category and the Currency Shop should show all items under the /ingamestore/currency category.

   • Content/TutorialModules/Monetization/InGameStoreEssentials/UI/W_ItemShop_Starter.uasset: set RootPath to /ingamestore/item
   • Content/TutorialModules/Monetization/InGameStoreEssentials/UI/W_CurrencyShop_Starter.uasset: set RootPath to /ingamestore/currency

Resources

• The files used in this tutorial section are available in the Byte Wars GitHub repository.
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Monetization/InGameStoreEssentials/UI/ShopWidget_Starter.cpp
  • AccelByteWars/Content/TutorialModules/Monetization/InGameStoreEssentials/UI/W_CurrencyShop_Starter.uasset
  • AccelByteWars/Content/TutorialModules/Monetization/InGameStoreEssentials/UI/W_ItemShop_Starter.uasset