Шаг 2. Добавление данных на страницу пейвола

После того как вы получили все необходимые данные о продукте, самое время привязать их к красивому пейволу, который вы оформили в FlutterFlow. В этом примере мы привяжем название продукта и его цену.

Шаг 2.1. Добавление названия продукта на страницу пейвола

  1. Дважды кликните по тексту продукта на странице пейвола. В окне Set from Variable найдите переменную getPaywallProductResult и выберите её.
ff-paywall-text.webp
  1. Заполните поля следующим образом:
  • 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
ff-product.webp
  1. Нажмите Confirm, чтобы сохранить изменения.

Шаг 2.2. Добавление текста с ценой на страницу пейвола

Повторите шаги из раздела 2.1 для текста с ценой, как показано ниже:

  1. Дважды кликните по тексту цены на странице пейвола. В окне Set from Variable найдите переменную getPaywallProductResult и выберите её.
ff-price.webp
  1. Заполните поля следующим образом:
  • 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
  1. Нажмите кнопку Confirm, чтобы сохранить изменения.

Добавление цены в местной валюте на страницу пейвола

  1. Дважды кликните по цене на странице пейвола. В окне Set from Variable найдите переменную getPaywallProductResult и выберите её.

  2. Заполните поля следующим образом:

  • 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
  1. Нажмите Confirm, чтобы сохранить изменения.

Вуаля! Теперь при запуске приложения данные продукта из пейвола Adapty будут отображаться прямо на странице вашего пейвола! Пора дать пользователям возможность купить этот продукт.