Les remplacements sont une fonctionnalité puissante dans Framer qui vous permet de modifier et de contrôler les composants en temps réel. Dans cet article de blog, nous allons explorer comment utiliser les remplacements pour créer des cartes de tarification synchronisées qui mettent à jour le prix et l'état basculé chaque fois que vous activez l'une des cartes.

Configuration du projet

Nous avons besoin d'une configuration de projet de base avec un interrupteur ayant deux états : Désactivé et Activé. Nous utiliserons des remplacements pour connecter ces bascules et mettre à jour le prix et l'état basculé. Nous sélectionnons les trois bascules et ajoutons un nouveau fichier avec un nouveau Remplacement.

Créer des remplacements dans Framer

Il y a quelques étapes simples pour configurer un remplacement. Tout d'abord, nous avons besoin d'un magasin pour suivre une valeur spécifique. Dans notre cas, c'est un booléen appelé annuel. Lorsque nous activons l'une des cartes de tarification, la valeur est mise à jour, et le prix et les bascules vont tous à l'état correct en fonction de ce booléen.

Ensuite, nous écrivons un remplacement withToggle qui reçoit un Composant du canevas et retourne un composant React avec le composant de canevas qui a été passé et les propriétés mises à jour. Dans ce cas, nous retournons simplement les propriétés que nous obtenons déjà de Framer. Si nous appliquons ce remplacement, cela ne fera encore rien.

Mise à jour de la variante

Pour faire fonctionner le remplacement, nous devons définir la variante en fonction de la valeur actuelle dans notre magasin et mettre à jour la valeur chaque fois que nous cliquons sur nos composants. Nous écrivons une logique pour définir la bonne variante et un gestionnaire onClick qui définit le magasin à l'opposé de sa valeur actuelle.

Nous pouvons également mettre à jour toute autre propriété que les composants ont, par exemple, leur texte. Chaque fois que nous cliquons sur le composant, nous pouvons mettre à jour le texte pour refléter les prix annuels ou mensuels.

Créer des cartes de tarification synchronisées cool

Avec ces deux techniques, nous pouvons construire des cartes de tarification synchronisées qui animent entre deux chiffres. Nous pouvons définir le nombre sur le canevas comme propriétés ; chaque fois que nous activons ces bascules, il y a une belle transition entre les deux.

Si nous le souhaitons, nous pouvons effectuer quelques récupérations et afficher des prix localisés pour nos produits tout en utilisant la puissance des animations dans les composants.