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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Conditional.
4. Настройте условие так, чтобы список отображался только тогда, когда первый продукт является выбранным в данный момент. Сопоставьте с переменной products.selectedProduct.prod_title. В поле Value нажмите иконку переменной {}, выберите карточку первого продукта, затем её атрибут prod_title — сравнение будет разрешено в заголовок этого продукта.

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

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

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

1. Нажмите + > List и выберите тот же компактный пресет для единообразия оформления.
2. Отредактируйте каждую строку, чтобы описать функции второго продукта.
3. В разделе Visibility выберите Conditional 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. Выберите ссылку Terms of Use, откройте вкладку Interactions и вставьте URL ваших условий использования в поле Open URL.
3. Повторите то же самое для ссылки Privacy Policy, указав URL политики конфиденциальности.
4. Оставьте ссылку Restore Purchases без изменений — её действие уже настроено.

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

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