Configurar compras

Tu flow puede mostrar los productos disponibles y activar compras in-app:

1. Añade los productos de la store al Adapty Dashboard. Conecta productos de la store existentes o crea nuevos en Adapty y publícalos en las stores.
2. Selecciona productos desde tu Dashboard y añádelos a una pantalla del flow. Las tarjetas, variables y acciones de esa pantalla podrán usarlos.
3. (Opcional) Configura un grupo de tarjetas de producto para presentar varias opciones de compra.
4. Añade una acción Purchase a un botón y configúrala. El destino de la acción puede ser un producto específico o el producto seleccionado por el usuario.
5. Más adelante, usa el panel Products para añadir, cambiar o eliminar productos en el flow. Los usuarios verán el cambio cuando publiques el flow, sin necesidad de actualizar la app.

Añadir productos a una pantalla

Cada pantalla tiene su propia lista de productos. Una tarjeta, una variable o una acción solo puede usar un producto de esa lista. El panel Products muestra la lista de cada pantalla del flow.

Puedes añadir productos desde el panel Products, o seleccionarlos al configurar un elemento. Ambas opciones añaden el producto a la lista de la pantalla.

Añadir productos en el panel de Productos

El panel añade un producto a la lista de la pantalla. Cualquier elemento de la pantalla puede usarlo: una tarjeta de producto, una variable de texto o una acción. Una variable de texto, por ejemplo, puede mostrar el precio de un producto que no tiene tarjeta.

Para añadir un producto a una pantalla:

1. En el panel lateral izquierdo, abre el panel Products y haz clic en +.
2. Screen muestra la pantalla actual. Para añadir el producto a una pantalla diferente, selecciónala aquí.
3. En Product, selecciona un producto de tu Dashboard.
4. (Opcional) En Offer, selecciona la oferta con la que vender el producto. Consulta Añadir oferta a un flow.
5. Haz clic en Add product.

El panel Products muestra los productos que añadiste, agrupados por pantalla. Una oferta que selecciones aquí aparecerá preseleccionada en cada tarjeta que use ese producto. Nada cambia en el flow hasta que asignes el producto a un elemento o lo uses en una acción.

Añadir productos al configurar un elemento

Cuando seleccionas un producto en un elemento, el builder lo añade a la lista de la pantalla. Esto ocurre cuando:

• Asignas un producto a una tarjeta de producto.
• Insertas una variable de producto en un elemento de texto.
• Estableces el Product de una acción Purchase.

Cada desplegable muestra primero los productos ya añadidos a esta pantalla, seguidos del resto de tu catálogo. Un producto seleccionado con una oferta diferente genera su propia entrada: el panel y los desplegables muestran una entrada por par producto/oferta.

Para configurar los propios elementos, continúa con Añadir tarjetas de producto y Activar una compra.

Añadir tarjetas de producto

Para ofrecer a los usuarios una selección de productos, añade un elemento Products. Viene como un conjunto de tres tarjetas de producto en un diseño predefinido. Las tarjetas forman un grupo de productos: el usuario selecciona una y, a continuación, una acción Purchase puede comprar el producto seleccionado.

El conjunto es la única forma de obtener tarjetas de producto o un grupo de productos. Para terminar con más o menos tarjetas, duplica o elimina algunas después de añadir el conjunto.

Añade un grupo de productos

1. Abre el panel Add element.

2. Selecciona la categoría Products.

3. Elige un diseño predefinido: Vertical List, Horizontal List, Feature Carousel, Feature Cards o Banner List.

   

Configurar una tarjeta de producto

Para cada tarjeta del grupo:

1. Selecciona la tarjeta. En la pestaña Design, dentro de Product, asígnale un producto. Los productos ya añadidos a esta pantalla aparecen en la sección Added, seguidos del resto de tu catálogo.
2. Confirma la oferta activa. Si anteriormente vinculaste el producto con una oferta, esa oferta aparece automáticamente. Puedes seleccionar una oferta diferente de forma manual, pero el producto aparecerá duplicado en el panel Products.
3. Para preseleccionar esta tarjeta al abrir la pantalla, selecciona Set as default.

4. (Opcional) Para mostrar a los usuarios qué plan está seleccionado, dale estilo a los estados Selected de las tarjetas.

Termina de configurar la tarjeta con cuatro funciones opcionales:

• Precio dinámico: Sustituye el precio de marcador de posición por la variable de precio del producto. La tarjeta mostrará entonces el precio de la store en la moneda del usuario.
• Términos de la oferta: Para detallar la oferta, usa variables de oferta en el texto de la tarjeta: offer_price, offer_billing_period y offer_full_duration.
• Insignia: Coloca una insignia que destaque un plan concreto.
• Precio de referencia: Un elemento Old Price dentro de la tarjeta muestra el precio real multiplicado por un factor que tú defines, tachado, de modo que el precio real se percibe como un descuento. La moneda y el formato siempre coinciden con el precio real, y el número se actualiza automáticamente ante cualquier cambio de precio.

Activar una compra

La acción Purchase inicia la compra de un producto en el store. Puedes asociarla a cualquier elemento del flow, aunque los botones y las tarjetas de producto son las opciones más habituales.

Añadir un botón de compra

Para añadir un botón de compra:

1. Abre el panel Add element.
2. Elige un preset de la categoría Button.
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 Product en una de las siguientes 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.

Iniciar una compra desde una tarjeta de producto

Una tarjeta de producto puede iniciar la compra directamente, sin necesidad de un botón separado. Para ello, añade la acción Purchase a cada tarjeta individualmente.

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

Los suscriptores existentes necesitan una forma de restaurar sus compras anteriores. Añade un botón con la acción Restore purchases:

• Usa el preset Links de la categoría Button. Incluye una fila de tres botones de texto: Restore (preconfigurado), Terms of use y Privacy policy.
  
• Añade la acción Restore purchases a otro botón.
  1. Selecciona el botón y abre la pestaña Interactions.
  2. Haz clic en Add trigger > On tap y luego en Add action.
  3. En el desplegable Action, selecciona Restore purchases.

La ausencia de un botón de restauración no impide la publicación, pero puede provocar el rechazo en la store. Usa el skill flow-audit para identificar los paywalls sin funcionalidad de restauración.

Cambiar el contenido de la pantalla según el producto seleccionado

Si una pantalla tiene tarjetas de producto, puedes mostrar u ocultar otros elementos según la tarjeta 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 menú desplegable Action, selecciona Show u Hide.

5. Selecciona el elemento que quieres mostrar u ocultar cuando se seleccione ese producto.

   

Cambiar el producto seleccionado desde otros elementos

Normalmente los usuarios cambian el producto seleccionado tocando una tarjeta. Sin embargo, otros elementos, como el botón de prueba, pueden usar la acción Select product para cambiar la selección en su lugar.

Para configurar la acción:

1. Selecciona el elemento que debe cambiar la selección: un botón, un toggle o cualquier otro elemento. La card que elijas tiene que estar en la misma pantalla.
2. Abre la pestaña Interactions del panel derecho y haz clic en Add trigger.
3. Selecciona el trigger y haz clic en Add action.
4. En el desplegable Action, selecciona Select product.
5. En Product, indica la product card que debe seleccionarse con esta acción.

Gestionar los productos del flow

El panel Products muestra todos los productos del flow, agrupados por pantalla.

• El número junto al nombre del producto indica cuántas veces aparece referenciado en esa pantalla: cada tarjeta, cada variable de producto en un elemento de texto y cada acción.
• El precio a la derecha es el precio base del producto. Si tiene una oferta asociada, se muestra el precio con y sin descuento.
• Los productos predeterminados aparecen en una sección aparte.

Para añadir una entrada, haz clic en + y sigue las instrucciones en Añadir productos en el panel de productos.

Acciones del producto

Abre el menú contextual de un producto para gestionarlo:

• Set as default: Pre-selecciona la tarjeta de este producto cuando se abre la pantalla, igual que la casilla Set as default en la tarjeta. Solo disponible para productos con exactamente una tarjeta de producto en la pantalla.
• Replace in N places: Reemplaza el producto en cada tarjeta, elemento de texto y acción que lo use en esta pantalla. El campo Offer se restablece. Si otras pantallas usan el mismo producto y oferta, el toast de confirmación ofrece repetir el cambio allí.
• Offer: Cambia la oferta para cada uso del producto en esta pantalla. Si el producto existe en otras pantallas, también puedes aplicar el cambio allí. Para previsualizar cómo se ve la pantalla para usuarios con distintos tipos de oferta, selecciona Preview as en el mismo submenú.
• Remove: Elimina el producto de la lista de la pantalla. Las tarjetas y las acciones Purchase que lo usaban pierden al instante su configuración de producto — reemplaza el producto antes de publicar. Las variables de texto y las condiciones conservan la referencia y muestran un icono de advertencia. Su tooltip indica This product is off this screen hasta que vuelvas a añadir el producto, reemplaces la referencia o elimines el texto.
• Missing: Un producto u oferta eliminado en tu Dashboard mantiene su entrada, marcada como Missing, con su recuento de usos. Solo Replace in N places y Remove siguen disponibles, y cada uso restante bloquea la publicación.

Solución de problemas de productos

Los siguientes problemas con productos y ofertas bloquean la publicación:

• Una tarjeta de producto o acción Purchase sin un producto vinculado. Vincula un producto o elimina la tarjeta/acción.
• Un producto u oferta que no está en tu Dashboard. Ocurre si añades un producto a un flow y luego lo eliminas de tu cuenta de Adapty. Busca la entrada Missing del producto en el panel Products y reemplaza todas las ocurrencias por un producto existente.
• Una variable de oferta usada con un producto que no tiene oferta. Define una oferta para el producto en el panel Products o elimina la variable.
• Una variable de texto o condición que sigue haciendo referencia a un producto que eliminaste en el panel Products. Vuelve a añadir el producto con + o cambia la referencia.

Puedes guardar el flow aunque el problema siga presente: itera hasta que la publicación sea exitosa.