---
title: "Добавление условного текста на пейвол"
description: "Используйте условный текст, чтобы менять списки функций в зависимости от выбранного пользователем продукта."
---

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

- [Создайте продукты](create-product) в дашборде Adapty.
- [Подключите Adapty к App Store и Google Play](integrate-payments).
## 1. Настройте макет экрана \{#1-set-up-the-screen-layout\}

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

Полный список свойств экрана см. в разделе [Экраны и слои — Настройки экрана](paywall-layout-and-products#screen-settings).

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

## 2. Добавьте кнопку закрытия \{#add-the-close-button\}

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

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

## 3. Добавьте заголовок и сгруппируйте его с кнопкой закрытия \{#add-the-title-and-pair-it-with-the-close-button\}

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

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

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

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

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

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

## 4. Добавьте список продуктов \{#4-add-the-product-list\}

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

Подробнее об управлении продуктами — в разделе [Настройка покупок](paywall-product-block).

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

## 5. Добавьте список возможностей для первого продукта \{#5-add-the-feature-list-for-the-first-product\}

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

Подробнее об условной видимости — в статье [Условная видимость](onboarding-element-visibility).

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

## 6. Добавьте список преимуществ для второго продукта \{#add-the-feature-list-for-the-second-product\}

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

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

## 7. Добавьте кнопку покупки \{#add-the-purchase-button\}

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

Подробнее о действии Purchase см. в разделе [Действия — Purchase](onboarding-actions#purchase).

Чтобы добавить и настроить кнопку покупки:
1. Нажмите **+** > **Buttons** и выберите пресет кнопки.
2. Выделив кнопку, откройте вкладку **Design** и поставьте курсор в поле **Content**. Нажмите на иконку переменной Variable icon, выберите `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. Добавьте ссылки в подвале \{#add-the-footer-links\}

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

Чтобы добавить ссылки в подвале:

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** без изменений — её действие уже настроено.

## Следующие шаги \{#next-steps\}

- [Сохраните и опубликуйте свой флоу](builder-save-publish).
- [Добавьте флоу в плейсмент](create-placement), чтобы начать показывать его пользователям.