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

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

• Создайте экран пейвола с продуктами — например, следуя гайду Создание базового экрана пейвола. В этом рецепте предполагается, что пейвол предлагает годовой и месячный продукт.

1. Добавьте строки с ценами

Карточка годовой подписки начинается с одной строки цены — переменная prod_price продукта, за которой следует /year, что отображается, например, как $29.99/year. Добавьте вторую строку выше — с ценой за месяц.

1. На панели Layers выберите текст с ценой внутри карточки годового продукта. Он уже находится в вертикальном контейнере карточки, поэтому копия разместится под ним.
2. Нажмите меню с тремя точками на слое и выберите Duplicate. Копия появится под оригиналом. На следующем шаге верхний текст станет строкой с месячной ценой, нижний — оставит годовую.

2. Разделите строку с ценой за месяц на два элемента

Строка с ценой за месяц содержит два текстовых элемента: зачёркнутую цену месячного плана и цену годового плана в пересчёте на месяц.

1. Выберите верхний текстовый элемент, нажмите на его меню с тремя точками и выберите Wrap > Wrap in Horizontal Container.

2. Нажмите на меню с тремя точками на текстовом слое внутри нового контейнера и выберите Duplicate.

   

3. Выберите первый текстовый элемент и очистите его поле Content. Нажмите на иконку переменной , выберите ежемесячный продукт, затем его атрибут prod_price_per_month. Введите /month после переменной.

4. На вкладке Design в разделе Typography установите Decoration в значение Strikethrough (см. Стилизация элементов — Decoration).

5. Выберите второй текстовый элемент и замените его содержимое аналогичным образом, но выберите атрибут prod_price_per_month годового продукта. Введите /month после переменной.

3. Приглушите цену годовой подписки

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

1. На канвасе выберите нижний текстовый элемент — цену годовой подписки.
2. В панели инструментов над элементом откройте выпадающий список стилей текста и выберите более скромный стиль — например, Caption. Или выберите другой стиль в разделе Typography на вкладке Design.

4. Добавьте значок скидки

Значок выделяет размер экономии рядом с ценами.

1. Нажмите + > Badge.
2. На панели Layers перетащите значок внутрь годового продукта — между вертикальным контейнером с ценами и радиокнопкой.
3. Выберите текстовый слой значка и отредактируйте поле Content — например, Save 75%.

Переменной для процента скидки нет — рассчитайте её из своих цен и введите как статичный текст.

Теперь карточка годового плана сравнивает цену с месячным: зачёркнутая цена месячного плана, эффективная ежемесячная цена годового плана и значок скидки — всё в одной строке, а полная годовая цена — ниже.

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

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