Этот шаблон использует условную видимость, чтобы показывать разные списки функций для разных тарифов. На экране отображаются два продукта — например, Pro и Pro+ — и в зависимости от того, какой продукт выбрал пользователь, показывается соответствующий список. Один из продуктов помечен как дефолтный, поэтому его список функций виден при первой загрузке экрана.

Перед началом работы

• Создайте продукты в дашборде Adapty.
• Подключите Adapty к App Store и Google Play.

1. Настройте макет экрана

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

Полный список свойств экрана см. в разделе Экраны и слои — Настройки экрана.

Чтобы настроить экран:

1. Нажмите на пустую область холста, чтобы выделить экран.
2. В разделе System UI отключите Safe area, чтобы фон растянулся до краёв экрана.
3. В разделе Fill выберите тип фона и настройте его. В этом примере используется Image , но с однородным цветом или градиентом всё работает так же.
4. В разделе Layout установите направление Vertical и настройте отступы и выравнивание, чтобы элементы располагались сверху вниз, а контент заполнял оставшееся пространство.

2. Добавьте кнопку закрытия

Кнопка закрытия скрывает пейвол. Пресет Close уже преднастроен — настраивать действие не нужно.

1. На холсте нажмите +.
2. Выберите Buttons > Close.

3. Добавьте заголовок и разместите его рядом с кнопкой закрытия

Заголовок располагается рядом с кнопкой закрытия в верхней части экрана. Чтобы выровнять их по горизонтали, оберните оба элемента в горизонтальный контейнер.

Чтобы добавить заголовок:

1. Нажмите + > Text > H1.
2. Выделив H1, откройте вкладку Design и введите текст в поле Content.

Чтобы сгруппировать заголовок с кнопкой закрытия:

1. На панели Layers нажмите меню с тремя точками на слое кнопки закрытия и выберите Wrap > Wrap in Horizontal Container.

2. Перетащите слой H1 в новый горизонтальный контейнер.

Чтобы выровнять два элемента:

1. Отрегулируйте размер кнопки закрытия и размер шрифта H1 так, чтобы они комфортно располагались на одной строке.
2. Выделив горизонтальный контейнер, задайте выравнивание и распределение в правой панели, чтобы элементы выстроились корректно.

4. Добавьте список продуктов

Добавьте продукты, между которыми пользователь может выбирать. Отметьте один из них как выбранный по умолчанию, чтобы экран сразу отображался в осмысленном состоянии.

Подробнее об управлении продуктами — в разделе Настройка покупок.

Чтобы добавить и настроить продукты:

1. Нажмите + > Products и выберите макет. Для этого шаблона хорошо подойдёт Vertical List.
2. Выберите каждую карточку продукта на холсте и укажите продукт в выпадающем списке на вкладке Design.
3. Выберите карточку, которая должна быть выбрана по умолчанию — например, Pro+ — и включите Set as default product на вкладке Design.

5. Добавьте список функций для первого продукта

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

Подробнее об условной видимости см. в разделе Условная видимость.

Чтобы добавить и настроить список функций:

1. Нажмите + > List и выберите пресет компактного списка. Icon List хорошо подходит для пейволов.
2. Выделив каждую строку, отредактируйте заголовок в поле Content, чтобы описать характеристики первого продукта.
3. Не снимая выделение со списка, откройте вкладку Design. В разделе Visibility выберите Conditional .
4. Настройте условие так, чтобы список отображался только тогда, когда первый продукт является выбранным в данный момент. Сопоставьте с переменной products.selectedProduct.prod_title. В поле Value нажмите иконку переменной {}, выберите карточку первого продукта, затем её атрибут prod_title — сравнение будет разрешено в заголовок этого продукта.

6. Добавьте список преимуществ для второго продукта

Повторите тот же подход для второго продукта. Два списка являются взаимоисключающими — в любой момент виден только один, в зависимости от того, какой продукт выбран.

Чтобы добавить второй список преимуществ:

1. Нажмите + > List и выберите тот же компактный пресет для единообразия оформления.
2. Отредактируйте каждую строку, чтобы описать функции второго продукта.
3. В разделе Visibility выберите Conditional и настройте то же условие, что и в шаге 5, но укажите в picker переменной Value prod_title карточки второго продукта.

7. Добавьте кнопку покупки

Кнопка покупки запускает встроенную покупку выбранного пользователем продукта. Надпись на кнопке отображает цену выбранного продукта и обновляется при переключении между тарифами.

Подробнее о действии Purchase см. в разделе Действия — Purchase.

Чтобы добавить и настроить кнопку покупки:

1. Нажмите + > Buttons и выберите пресет кнопки.
2. Выделив кнопку, откройте вкладку Design и поставьте курсор в поле Content. Нажмите на иконку переменной , выберите products.selectedProduct, затем атрибут prod_price — итоговая переменная примет вид products.selectedProduct.prod_price. Оберните её остальным текстом метки, например: Subscribe for {prod_price}.

3. Перейдите на вкладку Interactions и нажмите Add trigger > On tap > Add action.
4. Установите Action на Purchase и Product на products.selectedProduct.

8. Добавьте ссылки в футер

Условия использования, политика конфиденциальности и восстановление покупок располагаются под основным контентом.

Чтобы добавить ссылки в футер:

1. Нажмите + > Buttons > Links. В конец дерева слоёв добавится строка с кнопками Restore Purchases, Terms of Use и Privacy Policy.
2. В панели Layers выберите кнопку Terms of Use. Откройте вкладку Interactions и вставьте ссылку на условия использования в поле Open URL.
3. Повторите то же самое для кнопки Privacy Policy, указав ссылку на политику конфиденциальности.
4. Кнопку Restore Purchases оставьте как есть — её действие уже настроено заранее.

Следующие шаги

• Сохраните и опубликуйте свой флоу.
• Добавьте флоу в плейсмент, чтобы начать показывать его пользователям.