English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

Настройка покупок

Чтобы настроить покупки на экране, добавьте кнопку покупки и настройте для неё действие Purchase. Действие может быть привязано к конкретному продукту или к тому продукту, который пользователь выбирает в элементе Products на экране.

Переформулируйте ценообразование одним предложением.

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

Explore the AI Editor

Добавление продуктов

Элемент продукта — это визуальная карточка, отображающая продукт на холсте.

Чтобы добавить элемент продукта:

  1. На холсте нажмите + на нужном экране.

  2. Выберите Products.

  3. Выберите пресет раскладки: вертикальный список, горизонтальный список, карусель функций, карточки функций, список баннеров или нижний лист.

    Добавление элемента продукта на холст

  4. Выберите каждую карточку продукта и назначьте ей продукт в выпадающем списке на панели Design.

Important

Элемент продукта без привязанного продукта блокирует предпросмотр и публикацию. Привяжите продукт или удалите элемент.

Adding a product element to the canvas
  1. (Необязательно) Чтобы применить оффер при покупке с этой карточки, выберите его из выпадающего списка офферов. См. Добавить оффер во флоу.

Чтобы показать на карточке зачёркнутую базовую цену, добавьте внутрь элемент Старая цена.

Note

Вы также можете привязать действие Purchase напрямую к взаимодействию On tap карточки продукта. Тогда нажатие на карточку сразу инициирует покупку — отдельная кнопка покупки не нужна.

Important

Если вы удалите группу продуктов и заменёте её новой, убедитесь, что все действия и переменные ссылаются на новую группу. Ссылки, оставшиеся на удалённую группу, блокируют предпросмотр и публикацию.

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

Кнопка покупки запускает действие Purchase при нажатии.

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

  1. На холсте нажмите + на экране.
  2. Выберите Button и укажите пресет кнопки.
  3. Выделив кнопку, откройте вкладку Interactions в правой панели.
  4. Нажмите Add trigger > On tap, затем нажмите Add action.
  5. Установите Action в значение Purchase, затем задайте Product как одно из:
    • products.selectedProduct: покупает продукт, который пользователь выбрал в элементе Products на экране.
    • Конкретный продукт: всегда покупает именно этот продукт, независимо от выбора на экране.
Добавление кнопки покупки на холст

Отображение цены на кнопке

Чтобы вставить цену выбранного продукта в подпись кнопки, используйте переменную:

  1. Выделите кнопку и откройте вкладку Design на правой панели.
  2. В поле Content установите курсор в то место, где должна отображаться цена.
  3. Нажмите на иконку переменной, выберите products.selectedProduct, затем атрибут prod_price. Полная переменная принимает вид products.selectedProduct.prod_price.
  4. Добавьте статический текст вокруг переменной — например, Subscribe for {prod_price}.

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

Кнопка покупки с переменной цены выбранного продукта в подписи

Восстановление покупок

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

Чтобы добавить элемент восстановления покупок:

  1. На холсте нажмите + на экране.
  2. Выберите Button, затем выберите Links для текстовой ссылки или любой другой тип кнопки для стилизованной кнопки.
Добавление кнопки восстановления на холст
  1. Выделив элемент, откройте вкладку Interactions на правой панели и нажмите Add trigger.
  2. Выберите On tap и нажмите Add action.
  3. В выпадающем списке Action выберите Restore purchases.
Restore purchases action in the Interactions tab

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

Отображение дополнительных элементов в зависимости от выбранного продукта

Если на экране есть продукты, можно показывать или скрывать другие элементы в зависимости от того, какой продукт выбирает пользователь.

Чтобы настроить условную видимость:

  1. В элементе Products выберите карточку продукта.
  2. Откройте вкладку Interactions на правой панели и нажмите Add trigger.
Добавление триггера к карточке продукта
  1. Выберите On tap и нажмите Add action.
  2. В выпадающем меню Action выберите Show или Hide.
  3. Выберите элемент, который нужно показать или скрыть при выборе этого продукта.
Действие Show/Hide на вкладке Interactions

Изменение выбранного продукта из другого элемента

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

Чтобы настроить действие:

  1. Выберите элемент, который будет менять выбор — кнопку, переключатель или любой другой элемент.
  2. Откройте вкладку Interactions в правой панели и нажмите Add trigger.
  3. Выберите триггер и нажмите Add action.
  4. В выпадающем списке Action выберите Select product.
  5. В поле Product укажите карточку продукта, которую должно выбирать это действие.
Select product action in the Edit action window with the Product picker listing product cards

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

Обзор продуктов во флоу

Панель Products в левом сайдбаре связывает существующие продукты с каждым экраном флоу.

У каждого экрана есть два раздела:

  • Default — один продукт, выбранный по умолчанию при загрузке экрана.
  • Other — дополнительные продукты, доступные на том же экране.
Панель Products во Flow Builder