ステップ 2. ペイウォールページにデータを追加する
必要なプロダクトデータをすべて取得したら、FlutterFlow でデザインした美しいペイウォールにそのデータをマッピングしましょう。この例では、プロダクトのタイトルと価格をマッピングします。
ステップ 2.1. ペイウォールページにプロダクトタイトルを追加する
- ペイウォールページのプロダクトテキストをダブルクリックします。Set from Variable ウィンドウで
getPaywallProductResult変数を検索して選択します。
- 各フィールドを以下のように入力します：
- Available Options: Data Structured Field
- Select Field: value
- Available Options: Item at Index
- List Index Options: First
- Available Options: Data Structured Field
- Select Field: localizedTitle
- Default Variable Value: null
- UI Builder Display Value: 任意の値。この例では
product.title
- Confirm をクリックして変更を保存します。
ステップ 2.2. ペイウォールページに価格テキストを追加する
ステップ 2.1 と同じ手順を、以下のように価格テキストに対しても繰り返します：
- ペイウォールページの価格テキストをダブルクリックします。Set from Variable ウィンドウで
getPaywallProductResult変数を検索して選択します。
- 各フィールドを以下のように入力します：
- Available Options: Data Structured Field
- Select Field: value
- Available Options: Item at Index
- List Index Options: First
- Available Options: Data Structured Field
- Select Field: price
- Default Variable Value: null
- UI Builder Display Value: 任意の値。この例では
product.price
- Confirm ボタンをクリックして変更を保存します。
ペイウォールページに現地通貨の価格を追加する
-
ペイウォールページの価格をダブルクリックします。Set from Variable ウィンドウで
getPaywallProductResult変数を検索して選択します。 -
各フィールドを以下のように入力します：
- Available Options: Data Structured Field
- Select Field: value
- Available Options: Item at Index
- List Index Options: First
- Available Options: Data Structured Field
- Select Field: price
- Available Options: Data Structured Field
- Select Field: amount
- Available Options: Decimal
- Decimal Type: Automatic
- Default Variable Value: null
- UI Builder Display Value: 任意の値。この例では
price.amount
- Confirm をクリックして変更を保存します。
これで完了です！アプリを起動すると、Adapty ペイウォールのプロダクトデータがペイウォールページに表示されるようになります！ 次はユーザーがプロダクトを購入できるようにするステップに進みましょう。