Programmation
.jpg)
Radzivon Alkhovik
Adepte de l'automatisation en code bas
24 avril 2024
.svg){kind=icon}
.jpg)
Comme le savent les meilleurs développeurs Webflow, un site Web autonome offre moins de valeur qu'un site intégré à d'autres systèmes d'entreprise. À Latenode, nous sommes de grands fans de l'automatisation et de Webflow, c'est pourquoi nous utilisons les deux pour améliorer notre site Web.
Dans cet article, nous partageons la façon dont nous avons créé une bannière Webflow dynamique avec un compteur de plans d'offres à vie vendus. La technologie utilisée ? Webflow, Stripe et notre propre plateforme d'automatisation low-code Latenode.
Plongeons plus profondément et explorons comment utiliser les composants Webflow, les API et le CMS pour obtenir le même résultat d'un site Web automatisé. Allons-y !
Pour les adeptes de la première heure, nous avons, à Latenode , imaginé les Lifetime Deal Plans : une offre limitée avec seulement 1 000 forfaits disponibles. Nous voulons être transparents, et montrer cette info directement sur le site web est crucial.
Mais comment ? En procédant à une mise à jour manuelle une fois par jour ? Qui est responsable de ce processus ? Gérer les tâches répétitives achevées ?
Bien sûr que non, il s'agit d'automatismes ! Jette un coup d'œil au résultat, en particulier à ce numéro 937.
.jpeg)
Le cœur de l'automatisation est un scénario qui relie la plateforme de paiement Stripe à Webflow, où est hébergé le site web Latenode .
.jpeg)
Achat d'une ILD : Un utilisateur achète une ILD par l'intermédiaire de Stripe.
Déclencheur Webhook : Stripe envoie un signal à Latenode lorsqu'un achat LTD se produit, puis lance automatiquement le webhook et active l'ensemble du script.
JavaScript : se connecte à Stripe à l'aide d'une clé secrète et compte le nombre de paiements LTD réussis.
Requête HTTP (Première) : La première requête HTTP récupère les informations sur la collection dans Webflow contenant les données de la bannière afin de récupérer l'information selon laquelle le nombre d'ILD invendus a changé
Demande HTTP (deuxième) : La deuxième requête HTTP met à jour la collection Webflow, en diminuant d'une unité le nombre d'ILD restants.
Publication desmodifications : Webflow publie automatiquement les informations mises à jour sur le site Internet, en changeant le nombre d'ILD sur la bannière.
Voici à quoi ressemble la collection dans Webflow, tu n'as pas besoin de modifier le comptage manuellement, le script fait tout automatiquement.
.jpeg)
Latenode L'équipe est également ravie que la mise à jour de la bannière soit séparée de la mise à jour de l'ensemble du site.
Habituellement, lorsque tu mets à jour manuellement une partie particulière du site, l'ensemble du site est mis à jour, ce qui peut entraîner le rafraîchissement de la page pour la deuxième personne travaillant sur le site à ce moment-là et tous les progrès seraient perdus. Tu peux donc utiliser ce scénario en toute sécurité sans craindre de perdre le travail que tu as effectué pendant des heures !
Maintenant, plongeons encore plus profondément dans la partie technique de l'automatisation et voyons ce qu'il y a à l'intérieur de nos nœuds :
Joue le rôle de pont entre Stripe et le scénario. Dès qu'un achat en ILD se produit, Stripe envoie un signal à Latenode lorsqu'un achat en ILD se produit, puis lance automatiquement le webhook et active l'ensemble du scénario
Utilisé pour compter le nombre de paiements LTD réussis dans Stripe.
Je n'ai pas écrit une seule ligne de code et j'ai réalisé tout cela avec l'aide d'un assistant IA. Voici un article sur la façon d'intégrer du code dans les automatismes même si tu ne sais pas programmer.
JS Se connecte à Stripe à l'aide d'une clé secrète.
Vois le nombre de paiements réussis ici :
Deux requêtes HTTP interagissent avec l'intégration de l'API Webflow. La première requête récupère des informations sur la collection contenant les données de la bannière. La deuxième requête met à jour cette collection, en modifiant le nombre d'ILD restantes.
La création d'une telle automatisation peut sembler complexe, mais Latenode fournit tous les outils et le soutien nécessaires à sa mise en œuvre.
Latenode Communauté Discord: La communauté active et amicale de Latenode sur Discord est toujours prête à t'aider en cas de questions ou de problèmes.
Support Responsive Latenode : L'équipe de Latenode fournit une assistance rapide et qualifiée, en aidant à la mise en place et au lancement des automatismes.
La documentation claire et détaillée de l'API Webflow permet de créer facilement des requêtes HTTP pour interagir avec la plateforme.
.jpeg)
LatenodeL'automatisation de la bannière LTD est un excellent exemple de la façon dont les outils sans code peuvent être utilisés pour résoudre de vrais problèmes commerciaux. Grâce à Latenode et Webflow, n'importe quel utilisateur peut créer des automatisations similaires, améliorer l'efficacité de ses projets et gagner du temps.
Et, en prime, j'aimerais ajouter une note : pendant que nous écrivions cet article, l'automatisation de la bannière LTD était déjà en action ! En fait, si nous jetons un coup d'œil au site Web Latenode en ce moment même, nous pouvons voir le résultat de ce scénario en temps réel.
Comme tu peux le voir, le nombre d'ILD restantes a diminué depuis que nous avons commencé à écrire cet article. Cela témoigne de l'efficacité de l'automatisation et de sa capacité à refléter les changements en temps réel. Le scénario fonctionne parfaitement, il met à jour la bannière avec les dernières informations et crée un sentiment d'urgence chez les clients potentiels.
