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

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

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

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

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

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

  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