Afficher différentes fonctionnalités par produit

Ce modèle utilise la visibilité conditionnelle pour mettre en évidence différentes listes de fonctionnalités selon les plans. L’écran affiche deux produits — par exemple Pro et Pro+ — et une liste de fonctionnalités différente apparaît selon le produit sélectionné par l’utilisateur. Un produit est défini par défaut, de sorte que sa liste de fonctionnalités est visible au premier chargement de l’écran.

Avant de commencer

• Créez des produits dans l’Adapty Dashboard.
• Connectez Adapty à l’App Store et Google Play.

1. Configurer la mise en page de l’écran

L’écran sert de conteneur pour tout ce que vous ajoutez. Dans cet exemple, l’arrière-plan est une image, mais une couleur unie ou un dégradé fonctionne de la même façon.

Pour la liste complète des propriétés d’écran, consultez Écrans et calques — Paramètres de l’écran.

Pour configurer l’écran :

1. Cliquez sur une zone vide du canevas pour sélectionner l’écran.
2. Sous System UI, désactivez Safe area pour que l’arrière-plan s’étende jusqu’aux bords de l’écran.
3. Sous Fill, choisissez un type d’arrière-plan et configurez-le. Cet exemple utilise une Image , mais une couleur unie ou un dégradé fonctionne de la même façon.
4. Sous Layout, définissez la direction sur Vertical et configurez l’espacement et l’alignement pour que les éléments s’empilent depuis le haut avec le contenu occupant l’espace restant.

2. Ajouter le bouton de fermeture

Le bouton de fermeture ferme le paywall. Le préréglage Close est préconfiguré — aucune configuration d’action n’est requise.

1. Sur le canevas, cliquez sur +.
2. Sélectionnez Buttons > Close.

3. Ajouter le titre et l’associer au bouton de fermeture

Le titre se place à côté du bouton de fermeture en haut de l’écran. Pour les aligner horizontalement, enveloppez-les tous les deux dans un conteneur horizontal.

Pour ajouter le titre :

1. Cliquez sur + > Text > H1.
2. Avec le H1 sélectionné, ouvrez l’onglet Design et modifiez le texte dans le champ Content.

Pour regrouper le titre avec le bouton de fermeture :

1. Dans le panneau Layers, cliquez sur le menu à trois points sur le calque du bouton de fermeture et choisissez Wrap > Wrap in Horizontal Container.

2. Faites glisser le calque H1 dans le nouveau conteneur horizontal.

Pour aligner les deux éléments :

1. Ajustez la taille du bouton de fermeture et la taille de police du H1 pour qu’ils tiennent confortablement sur la même ligne.
2. Avec le conteneur horizontal sélectionné, définissez l’alignement et la distribution dans le panneau de droite pour que les éléments s’alignent correctement.

4. Ajouter la liste de produits

Ajoutez les produits entre lesquels l’utilisateur peut choisir. Marquez-en un par défaut afin que l’écran ait un état cohérent dès le premier chargement.

Pour en savoir plus sur la gestion des produits, consultez Configurer les achats.

Pour ajouter et configurer des produits :

1. Cliquez sur + > Products et choisissez un modèle de mise en page. La liste verticale convient bien à ce modèle.
2. Sélectionnez chaque carte de produit sur le canevas et choisissez un produit dans le menu déroulant de l’onglet Design.
3. Sélectionnez la carte que vous souhaitez sélectionner par défaut — par exemple, Pro+ — et activez Set as default dans l’onglet Design.

5. Ajouter la liste de fonctionnalités du premier produit

La première liste de fonctionnalités décrit le produit par défaut. Elle n’est visible que lorsque l’utilisateur a sélectionné le premier produit.

Pour en savoir plus sur la visibilité conditionnelle, voir Visibilité conditionnelle.

Pour ajouter et configurer la liste de fonctionnalités :

1. Cliquez sur + > List et choisissez un preset de liste compacte. Icon List convient bien pour les paywalls.
2. Avec chaque ligne sélectionnée, modifiez le titre dans le champ Content pour décrire les fonctionnalités du premier produit.
3. La liste étant toujours sélectionnée, ouvrez l’onglet Design. Sous Visibility, sélectionnez Conditional .
4. Configurez la condition pour que la liste s’affiche uniquement lorsque le premier produit est celui actuellement sélectionné. Comparez avec la variable products.selectedProduct.prod_title. Pour la Value, cliquez sur l’icône de variable {}, sélectionnez la première carte produit, puis son attribut prod_title — la comparaison se résout sur le titre de ce produit.

6. Ajouter la liste de fonctionnalités pour le second produit

Répétez la même approche pour le second produit. Les deux listes sont mutuellement exclusives — une seule est visible à la fois, selon le produit sélectionné.

Pour ajouter la seconde liste de fonctionnalités :

1. Cliquez sur + > List et choisissez le même preset compact pour garder une cohérence visuelle.
2. Modifiez chaque ligne pour décrire les fonctionnalités du second produit.
3. Sous Visibility, sélectionnez Conditional et configurez la même condition qu’à l’étape 5, mais pointez le sélecteur de variable Value vers le prod_title de la seconde carte produit.

7. Ajouter le bouton d’achat

Le bouton d’achat lance l’achat intégré pour le produit sélectionné par l’utilisateur. Son libellé affiche le prix du produit sélectionné et se met à jour automatiquement lorsque l’utilisateur change de formule.

Pour en savoir plus sur l’action Achat, consultez Actions — Achat.

Pour ajouter et configurer le bouton d’achat :

1. Cliquez sur + > Buttons et choisissez un preset de bouton.
2. Une fois le bouton sélectionné, ouvrez l’onglet Design et placez le curseur dans le champ Content. Cliquez sur l’icône de variable , sélectionnez products.selectedProduct, puis l’attribut prod_price — la variable complète devient products.selectedProduct.prod_price. Entourez-la du reste du libellé — par exemple, Subscribe for {prod_price}.

3. Basculez sur l’onglet Interactions et cliquez sur Add trigger > On tap > Add action.
4. Définissez Action sur Purchase et Product sur products.selectedProduct.

8. Ajouter les liens du pied de page

Les conditions d’utilisation, la politique de confidentialité et la restauration des achats se trouvent sous le contenu principal.

Pour ajouter les liens du pied de page :

1. Cliquez sur + > Buttons > Links. Cela ajoute une ligne avec Restore Purchases, Terms of Use et Privacy Policy à la fin de l’arborescence des calques.
2. Dans le panneau Layers, sélectionnez le bouton Terms of Use. Ouvrez l’onglet Interactions et collez l’URL de vos conditions dans le champ Open URL.
3. Répétez l’opération pour le bouton Privacy Policy avec l’URL de votre politique de confidentialité.
4. Laissez le lien Restore Purchases tel quel. Son action est préconfigurée.

Prochaines étapes

• Enregistrer et publier votre flow.
• Ajouter le flow à un placement pour commencer à le montrer aux utilisateurs.