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

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

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

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

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

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

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

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

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

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

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

Adding a product element to the canvas

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

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

Кнопка покупки запускает действие 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.
Действие восстановления покупок во вкладке Interactions

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

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

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

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

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

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

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

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