Para configurar compras en una pantalla, añade un botón de compra y configura su acción Purchase. La acción puede apuntar a un producto específico o al producto que el usuario seleccione en un elemento Products de la pantalla.

Añadir productos

Un elemento de producto es una tarjeta visual que muestra un producto en el canvas.

Para añadir un elemento de producto:

1. En el canvas, haz clic en + en la pantalla de destino.

2. Selecciona Products.

3. Elige un diseño predefinido: lista vertical, lista horizontal, carrusel de características, tarjetas de características, lista de banner o hoja inferior.

   

4. Selecciona cada tarjeta de producto y asígnale un producto en el desplegable del panel Design.

Añadir un botón de compra

Un botón de compra desencadena la acción Purchase cuando el usuario lo pulsa.

Para añadir un botón de compra:

1. En el lienzo, haz clic en + sobre la pantalla.
2. Selecciona Button y elige un preset de botón.
3. Con el botón seleccionado, abre la pestaña Interactions en el panel derecho.
4. Haz clic en Add trigger > On tap y luego en Add action.
5. Establece Action en Purchase y luego Product en una de estas opciones:
   • products.selectedProduct: Compra el producto que el usuario haya seleccionado en un elemento Products de la pantalla.
   • Un producto específico: Siempre compra ese producto, independientemente de cualquier selección en la pantalla.

Mostrar el precio en el botón

Para insertar el precio del producto seleccionado en la etiqueta del botón, usa una variable:

1. Con el botón seleccionado, abre la pestaña Design en el panel derecho.
2. En el campo Content, coloca el cursor donde deba aparecer el precio.
3. Haz clic en el icono de variable, selecciona products.selectedProduct y luego el atributo prod_price. La variable completa se resuelve como products.selectedProduct.prod_price.
4. Añade texto estático alrededor de la variable; por ejemplo, Subscribe for {prod_price}.

La etiqueta se actualiza a medida que el usuario selecciona diferentes productos.

Restaurar compras

Para que los usuarios puedan restaurar compras anteriores, añade un botón o enlace de restauración a la pantalla.

Para añadir un elemento de restaurar compras:

1. En el canvas, haz clic en + en la pantalla.
2. Selecciona Button, luego elige Links para un enlace de texto o cualquier otro tipo de botón para un botón con estilo.

3. Con el elemento seleccionado, abre la pestaña Interactions en el panel derecho y haz clic en Add trigger.
4. Selecciona On tap y haz clic en Add action.
5. En el menú desplegable Action, selecciona Restore purchases.

Mostrar elementos adicionales según el producto seleccionado

Si una pantalla tiene productos, puedes mostrar u ocultar otros elementos según el producto que seleccione el usuario.

Para configurar la visibilidad condicional:

1. En el elemento Products, selecciona una tarjeta de producto.
2. Abre la pestaña Interactions en el panel derecho y haz clic en Add trigger.

3. Selecciona On tap y haz clic en Add action.
4. En el desplegable Action, selecciona Show o Hide.
5. Selecciona el elemento que quieres mostrar u ocultar cuando se seleccione ese producto.

Revisar productos en el flow

El panel Products de la barra lateral izquierda relaciona los productos existentes con cada pantalla del flow.

Cada pantalla tiene dos secciones:

• Default — un producto preseleccionado cuando se carga la pantalla.
• Other — productos adicionales disponibles en la misma pantalla.