Centre d'assistance Wix
    Accueil
  1. Créer votre site
  2. Fonctionnalités avancées
  3. Wix Blocks
  4. Tutoriels
    5. Tutoriel Wix Blocks : Créer un widget de compte à rebours

Tutoriel Wix Blocks : Créer un widget de compte à rebours

Temps de lecture : 21 min
Wix Blocks est ouvert à tous les utilisateurs de Wix Studio. Pour accéder aux blocs, rejoignez Wix Studio.
Ce tutoriel vous montre comment créer un widget de compte à rebours, qui compte à rebours jusqu'à une date spécifique. Il contient également un widget d'inscription où les visiteurs du site peuvent s'inscrire et recevoir une notification par e-mail la veille de votre événement. Vous apprendrez également à installer votre widget de compte à rebours sur un site et à explorer toutes les fonctionnalités clés de Blocks.
Widget de compte à rebours

Ce que vous obtenez dans le template

Pour vous faciliter les choses, nous avons créé un template pour que vous puissiez commencer immédiatement.

Le template contient :
  • Un widget de compte à rebours. Vous devez terminer son design et coder ses fonctions et propriétés.
  • Un widget d'inscription que vous devez remplir et ajouter à votre widget de compte à rebours.
  • Quelques services publics que vous pouvez utiliser pour implémenter la fonctionnalité de votre widget.
  • Une partie du code back-end que vous pouvez utiliser pour implémenter les fonctions de votre notification par e-mail.

Obtenez le template

Étape 1 | Compléter le design de votre widget

Pour créer ce widget, commencez par ce template et modifiez-le depuis votre compte Wix. Le modèle a été laissé incomplet afin que vous puissiez apprendre à ajouter des éléments à votre widget.
Le widget est conçu avec une grille pour que vous puissiez facilement aligner et placer des éléments.

  1. Ouvrez le modèle. 
  2. Cliquez sur Compte à rebours sous Widgets et design. 
  3. Cliquer sur Ajouter des éléments Add icon dans la barre supérieure.
  4. Sélectionnez Texte. Faites glisser et déposez une boîte de titre 48px dans votre widget.
  5. Cliquez sur Modifier le texte et remplacez le texte par.
  6. Changez la couleur du texte en blanc et centrez le texte à l'aide de l'inspecteur . 
  7. Sélectionnez la zone de texte et déplacez-la dans le carré de la grille au-dessus du libellé SECONDS à l'aide de move elements icon.
  8. Redimensionnez-le avec stretch icon.

En savoir plus sur le design de votre widget

Étape 2 | Ajouter et définir les propriétés de l'API de votre widget

Vous pouvez définir une API pour votre widget, afin que le créateur du site qui installe le widget puisse interagir avec lui par le biais du code. L'API peut contenir des propriétés, des événements et des fonctions exportées.

Ce widget utilise deux propriétés :
  • endDate: Définit la date de fin à laquelle le compte à rebours atteint zéro. En utilisant cette propriété, les créateurs de sites peuvent modifier la date de fin afin que le widget soit personnalisé pour leur site.
  • emailId: Détermine l'e-mail qui sera envoyé aux utilisateurs lorsqu'ils s'inscriront à une notification.

En savoir plus sur les propriétés de l'API du widget

Donnez un ID aux éléments de votre widget

Vous devez d'abord donner un identifiant aux éléments de votre widget afin de pouvoir facilement s'y référer dans le code.
  1. Cliquez sur la zone de texte.
  2. Donnez à la zone de texte un identifiant dans les propriétés et événements properties icon . Dans cet exemple, l'ID est secondsTxt. Veuillez noter que les autres éléments ont déjà reçu des ID.

Définissez les propriétés "endDate" et "emailId"

  1. Cliquez sur Ajouter une nouvelle propriété dans l'API properties icon .
  2. Saisissez le nom de la propriété, endDate.
  3. Sélectionnez le type de propriété, dans ce cas, la date et l'heure (la date est affichée au format américain jj/mm/aaaa).
  4. Sélectionnez une valeur par défaut (le créateur du site pourra modifier cela lorsqu'il installera votre widget dans les éditeurs).
  5. Survolez Propriétés et cliquez sur l'icône add icon qui apparaît.
  6. Créez une autre propriété pour l'e-mail déclenché et appelez-la emailId. Il s'agit d'une propriété de type Texte sans valeur par défaut.

Étape 3 | Ajouter du code pour faire fonctionner votre widget


Pour que votre widget compte à rebours, nous devons créer une fonction dans le code qui calcule le temps restant avant la date de fin. Pour ce faire, votre template est livré avec des utilités préinstallées que vous pouvez trouver dans le Public et le back-end public and backend icon menu. 

Blocks utilise une nouvelle variable globale, $widget et la propriété, $widget.props, qui détient toutes les propriétés que vous avez définies pour votre widget.

Blocks utilise également la saisie semi-automatique Velo, ce qui vous permet d'écrire du code plus facilement.

En savoir plus sur le [widget API

Importer vos utilités

  1. Cliquez sur Public et back-end menu.
  2. Sélectionnez dateUtils.js sous Public. Cela ouvre le fichier dans le panneau de code.

Modifier le code pour prendre en compte votre nouvelle fonction

Créez une fonction, updateTime(), pour que votre widget de compte à rebours mette à jour le compte. Votre nouvelle fonction devrait ressembler à ceci :

1$widget.onPropsChanged(function () { }); fonction updateTime() { const {jours, heures, minutes, secondes} = getRemainingTime (new Date($widget.props.endDate)); $w('#daysTxt').text = jours.toString(); $w('#hoursTxt').text = heures.toString(); $w('#minutesTxt').text = minutes.toString(); $w('#secondsTxt').text = secondes.toString(); }

Vous devez également définir un intervalle pour la fréquence à laquelle le widget met à jour le temps restant.
Pour ce faire, ajoutez le code suivant dans votre fonction onReady() . Cela met à jour le widget toutes les secondes.

1$w.onReady(function () { updateTime (); if (wixWindow.viewMode !== "Editor") { setInterval (updateTime, 1000); } });
Modifier la condition de temps
Le code Velo s'exécute uniquement lorsque vous cliquez sur l'aperçu ou lorsque vous ouvrez le site en ligne. Le code de Blocks onReady s'exécute également pendant la modification, de sorte que vous pouvez le voir en action lorsque vous travaillez dans l'éditeur. Nous utilisons la condition ci-dessus afin que votre widget de compte à rebours ne se compte pas pendant l'édition. 

Prévisualisez votre widget et testez ses propriétés d'API

Vous êtes prêt à prévisualiser votre widget et ses propriétés d'API.

  1. Cliquez sur Aperçu. Votre widget doit compter à rebours toutes les secondes jusqu'à la date de fin.
  2. Cliquez sur Tester les propriétés de l'API. Un panneau apparaît avec la valeur par défaut que vous avez définie précédemment. 
  3. Modifiez la date pour vérifier si le widget répond et compte à rebours jusqu'à la nouvelle date.

Étape 4 | Créer et coder un panneau personnalisé

Vous pouvez créer un panneau de paramètres personnalisé afin que les créateurs de site puissent modifier les paramètres de votre widget lorsqu'ils l'installent sur un site. Dans cet exemple, le panneau des paramètres personnalisés permet au créateur du site de modifier la date de fin et de définir un identifiant d'e-mail qui détermine quel e-mail sera envoyé aux utilisateurs lorsqu'ils s'inscrivent pour recevoir des notifications.

En savoir plus sur les panneaux

Créer un panneau personnalisé

  1. Cliquez sur l'onglet Panneaux dans la barre du haut.
  2. Cliquez sur Créer un panneau.
  3. Donnez un nom à votre panneau. Dans cet exemple, "Mes paramètres".
  4. Cliquez sur Créer un panneau.
  5. Cliquez sur + Ajouter élément.
  6. Sélectionnez Saisie de texte. Ce sera pour la date de fin.
  7. Cliquez sur Propriétés et événements propeties icon . Donnez un ID à votre saisie de texte endDateInput.
  8. Sélectionnez l'élément de texte et cliquez sur Paramètres.
  9. Ajoutez le nom "Date de fin" dans le champ Titre du champ.
  10. Supprimez le texte dans le champ Texte par défaut .
  11. Définissez le texte de l'espace réservé sur « Date de fin ».
  12. Ajoutez un séparateur de section.
  13. Cliquez sur Paramètres. Ajoutez un titre dans le champ Titre de la section . Dans cet exemple, il s'agit d'un « e‑mail déclenché ».
  14. Ajoutez une autre saisie de texte. Donnez un ID à votre saisie de texte - emailIdInput.
  15. Sélectionnez l'élément de texte et cliquez sur Paramètres.
  16. Ajoutez le nom "Email ID" dans le champ Titre du champ.
  17. Supprimez le texte dans le champ Texte par défaut .
  18. Définissez le texte de l'espace réservé sur « ID d'e-mail ».
Le design de votre panneau personnalisé est terminée. Vous devez maintenant l'implémenter en ajoutant du code.

Ajouter du code à votre panneau personnalisé


Vous souhaitez que votre panneau personnalisé affiche la date de fin actuelle et l'ID d'e-mail lorsqu'il se charge. Le créateur du site utilise le panneau pour modifier ces valeurs. Vous devez ajouter du code au panneau afin que lorsque ces entrées changent, votre widget soit mis à jour.

En savoir plus sur [l'ajout de code à vos panneaux personnalisés

Pour permettre aux éléments du panneau d'interagir avec votre widget et d'effectuer des actions dans l'éditeur, vous pouvez utiliser le module Velo wix-widget dans votre code.

Pour utiliser l'API Widget, importez wixWidget à partir du module wix-widget .

Insérez le code suivant avant votre fonction onReady() .

1import wixWidget from 'wix-widget';

Vous souhaitez que votre widget soit mis à jour lorsque les valeurs changent, vous devez donc enregistrer un événement onChange . Vous devez également ajouter async dans votre fonction onReady () car vous utiliserez certaines fonctions asynchrones.

Votre fonction onReady() devrait ressembler à ceci :

1$w.onReady(async fonction () { const { finDate, emailId } = attend wixWidget.getProps(); $w('#endDateInput').value = endDate; $w('#emailIdInput').value = emailId; $w('#endDateInput').onChange(e => { wixWidget.setProps({ finDate : e.target.value }) ; }) ; $w('#emailIdInput').onChange(e => { wixWidget.setProps({ emailId: e.target.value }); }) ; }) ;
Cliquez run icon Exécuter ou prévisualiser pour vérifier votre code

Étape 5 | Configurer votre widget

Maintenant que votre panneau est conçu et codé, vous devez configurer votre widget de manière à ce qu'il se connecte à l'un des boutons de la barre d'action de votre widget.

L' onglet Configurations vous permet de contrôler le comportement de votre widget lorsqu'un créateur de site l'installation et le personnalise sur un site. Vous pouvez donner des noms d'affichage à votre widget et à ses éléments, afin que les créateurs de site aient clairement compris ce que fait votre widget. Vous pouvez également modifier les barres d'action flottantes qui apparaissent dans les éditeurs lorsque les créateurs de site sélectionnent des éléments dans votre widget.

En savoir plus sur la configuration

Ajoutez votre panneau personnalisé à la barre d'action flottante de votre widget

  1. Cliquez sur Configuration dans la barre supérieure. 
  2. Sélectionnez votre widget de compte à rebours. Une barre d'action flottante apparaît.
  3. Cliquez sur Paramètres.
  4. Cliquez settings icon Paramètres du bouton d'action. Le panneau Paramètres de l'action principale apparaît.
  5. Sélectionnez Mes paramètres dans la liste déroulante pour sélectionner votre panneau personnalisé.

Étape 6 | Ajouter un deuxième widget (interne) et implémenter la logique d'inscription

Le template est livré avec un deuxième widget appelé Inscription. Vous pouvez le trouver sous Widgets et design. 

Lorsque vous cliquez sur Calques, vous pouvez voir qu'il a été créé en tant que boîte multi-états avec trois états. Il comporte un bouton intitulé S'inscrire, qui devient Soumettre lorsque le visiteur du site clique. Il comporte également une boîte de champ où les visiteurs du site peuvent ajouter leur adresse e-mail. Un message de remerciement apparaît lorsqu'un visiteur du site s'est inscrit.

Ce widget est également livré avec un design prédéfini qui peut être utilisé pour une vue mobile.

En savoir plus sur les éléments prédéfini de design

Ajoutez votre widget d'inscription au widget de compte à rebours

Vous êtes maintenant prêt à ajouter votre widget d'inscription à votre premier widget, le widget du compte à rebours. Dans Blocks, vous pouvez créer de nombreux widgets différents et les ajouter à d'autres widgets. 

En savoir plus sur l'utilisation des widgets dans les widgets
  1. En travaillant dans l'onglet Design, sélectionnez votre widget de compte à rebours.
  2. Cliquez sur Plus d'options more options et sélectionnez Ajouter un widget.
  3. Sélectionnez Inscription. Le widget qui est en vous apparaît au milieu du widget du compte à rebours.
  4. Faites glisser et étirez votre widget intérieur pour l'adapter à la section inférieure de votre widget de compte à rebours.
  5. Changer son identifiant pour registration dans Propriétés et événements propeties icon.
Une autre façon d'ajouter un widget
Vous pouvez également ajouter un widget interne en cliquant sur le bouton  add button Menu Ajouter des éléments . Sélectionnez MES WIDGETS et faites glisser et déposez le widget que vous souhaitez ajouter dans le premier widget.

Implémenter la logique d'inscription dans le code du widget principal

Vous implémenterez le code d'enregistrement des utilisateurs dans le widget principal (compte à rebours), à l'aide de l'utilitaire préinstallé contactUtils.js. Il utilise l'API wix-crm pour connecter votre contact à votre collection.

Ce code redirige l'information vers votre collection. Il utilise l'utilité que vous utiliserez plus tard lorsque vous créerez une collection. Vous pouvez voir getSubscriptionsCollectionName() dans le code.

  1. Créez une nouvelle fonction asynchrone.
  2. Appelez-la onSubmit. Il utilise la fonction de création de contact

Votre code devrait ressembler à ceci :

1 async fonction onSubmit({ email }) { const contact = ask createContact(email); wixData.insert(getSubscriptionsCollectionName(), { finDate: new Date($widget.props.endDate), emailId : $widget.props.emailId, contactId: contact.contactId }); }
2

S'inscrire à l'événement onSubmit

Dans votre onReady(), après votre fonction updateTime() , ajoutez le code suivant :

1$w('#registration').onSubmit(onSubmit);
Le code back-end est déjà inclus
Le code back-end est déjà implémenté dans votre template dans Blocks. Il comprend une fonction d'exportation, notifier (), qui utilise les utilités préinstallées. Il vérifie le temps restant, déclenche l'envoi de l'e-mail lorsqu'il est prêt et met à jour la collection. Vous devez l'appeler dans l'Éditeur, comme décrit à l'étape 10 ci-dessous.

Étape 7 | Créer votre appli et lui donner un espace de noms

Vous êtes maintenant prêt à créer votre appli pour la première fois. Votre première version sera une version majeure. Plus tard, lorsque vous travaillerez sur votre appli, vous pourrez choisir de faire une build mineure ou majeure. Une version mineure est mise à jour automatiquement sur tous les sites où elle apparaît. Il vous suffit d'actualiser la page. Lorsque vous effectuez une version majeure, un créateur de site doit mettre à jour votre appli manuellement. Un point apparaît à côté du nom de l'appli Applis installées dans l'Éditeur afin que les créateurs de site sachent qu'une nouvelle version est disponible. 

En savoir plus sur les versions dans Blocks

Lorsque vous cliquez sur build pour la première fois, blocs vous invite à donner un espace de nom à votre appli. Cet espace de nom est utilisé pour faire référence à votre collection en code Velo dans les éditeurs et dans le code de l'appli dans Blocks.

En savoir plus sur l'espace de nom de l'appli

Votre première version

  1. Cliquez sur Créer.
  2. Saisissez un espace de nom pour votre appli et cliquez sur Suivant.
  3. Sélectionnez Version majeure et cliquez sur Créer.
  4. Vous recevez un message indiquant que la version 1.0 est compilée. Cliquez sur OK pour continuer à travailler sur votre appli.

Étape 8 | Ajouter une catégorie à votre widget

Vous devez maintenant créer une collection pour stocker tous les souscriptions. Les collections dans Blocks sont des espaces réservés vides que vous concevez dans Blocks, qui seront remplis de données une fois que l'appli sera installée sur un site. En savoir plus sur les collections dans Blocks

Le template a un utilité préinstallée appelé getSubscriptionsCollectionName(), dans collectionUtils.js sous Public & Backend. Il construit le nom complet de la collection afin que vous n'ayez pas à ajouter l'espace de nommage complet de votre appli chaque fois que vous y faites référence dans le code.

Configurer votre utilité de collection

  1. Cliquez sur collectionUtils.js sous Public et back-end .
  2. Ajoutez l'espace de nom de votre appli.
Votre code devrait ressembler à ceci, avec votre propre espace de nom.
1
2const NAMEspace = '@mywixaccount/my-app-namespace'; export fonction getSubscriptionsCollectionName() { return `${NAMEspace}/subscriptions`; }

Créer votre collection

  1. Cliquez sur Base de données
  2. Cliquez + Créer une collection
  3. Donnez à votre collection un nom significatif. Dans cet exemple, Abonnements.
  4. Cliquez sur Créer. 

Ajouter des champs à votre collection

  1. Cliquez add button pour ajouter un champ à votre collection.
  2. Sélectionnez Date dans le menu déroulant Type de champ .
  3. Saisissez endDate dans le Nom de champ du champ. Ce sera la dernière date jusqu'à laquelle les personnes pourront s'inscrire.
  4. Cliquez sur Enregistrer.
  5. Ajoutez maintenant un champ Type de texte et appelez-le emailId pour l'e-mail déclenché.
  6. Ajoutez un autre champ de type Texte et appelez-le contactId. Les coordonnées des utilisateurs enregistrés seront stockées.
  7. Créez maintenant un champ de type booléen et appelez-le notifié. Cela garantit que les abonnés ne seront notifiés qu'une seule fois.

Définir les autorisations pour votre collection

Vous voulez que tous les visiteurs du site puissent ajouter du contenu à votre collection en s'abonnant. 

  1. Cliquez sur Plus more options icon d'options pour votre collection dans le menu Bases de données.
  2. Sélectionnez Autorisations et confidentialité. 
  3. Sélectionnez le menu déroulant Peut ajouter du contenu.
  4. Sélectionnez Tout le monde .
  5. Cliquez sur Enregistrer.

Étape 9 | Installer votre appli sur un site dans l'Éditeur Wix

Vous pouvez installer votre widget sur n'importe lequel des éditeurs. L'exemple suivant utilise l'Éditeur Wix. Avant d'installer votre appli, vous devez la construire une deuxième fois. Ce sera une Build majeure car vous avez créé une collection.
  1. Après avoir créé votre appli, ouvrez votre site.
  2. Cliquez sur Ajouter des applis add apps icon. 
  3. Cliquez sur Applis personnalisées. Une liste de toutes vos applis apparaît.
  4. Sélectionnez votre appli dans la liste Applis disponibles .
  5. Cliquez sur Installer l'appli.
  6. Cliquer sur Ajouter des éléments add elements icon.
  7. Sélectionnez Mes widgets.
  8. Double-cliquez sur votre widget pour l'ajouter à votre site. 

Votre widget est fluide et vous pouvez sélectionner ses éléments afin de pouvoir personnaliser le widget en fonction de votre site. Vous pouvez également ouvrir le panneau des paramètres et modifier la date de fin par défaut. 

Définir un identifiant d'e‑mail

Les utilisateurs peuvent s'inscrire pour recevoir une notification par e-mail. Vous devez créer l'e-mail qui sera envoyé et obtenir un identifiant afin que l'API du widget puisse identifier quel e-mail doit être envoyé.
  1. Ouvrez Mon tableau de bord depuis le menu du site dans la barre supérieure.
  2. Accédez à l'onglet E-mails déclenchés dans les outils développeurs.
  3. Cliquez sur Commencer. 
  4. Saisissez un sujet.
  5. Concevez le design de l'e-mail en utilisant les outils de l'Éditeur.
  6. Cliquez sur Enregistrer et publier.
  7. Ajoutez les détails de l'expéditeur, le Nom d'expéditeur et l'e-mail de réponse, puis cliquez sur Enregistrer.
  8. Cliquez sur OK.
  9. Cliquez à nouveau sur Enregistrer et publier . Vous recevez un code d'identification généré qui renvoie à l'e-mail que vous avez créé afin qu'il soit envoyé à toute personne qui s'inscrit. 
  10. Saisissez ce code dans votre panneau personnalisé dans le champ ID d'e-mail .

Utiliser le code back-end dans l'Éditeur Wix pour notifier les abonnés

Le code back-end est inclus avec votre appli dans Blocks, mais vous devez appeler la notification dans l'Éditeur.

Invoquez votre fonction de notification

  1. Cliquez sur + Nouveau module web sous Backend dans Public et Backend dans l'Éditeur Wix.
  2. Appelez-le backend.jsw.
  3. Importez la fonction back-end dans la section de code de votre site sous backend.jsw.

Votre code devrait ressembler à ceci :

1import { notification } 'myWixId/my-application-name-backend';

Créez maintenant une fonction d'exportation invokeNotify dans backend.jsw dans la section code de votre site.

Votre code devrait ressembler à ceci :

1export fonction refund () { return notifier () ; }
Vous devez maintenant créer une tâche planifiée. 

  1. Cliquez sur Ajouter .add icon dans le back- end
  2. Cliquez settings icon Ajoutez des tâches planifiées.Ajoutez le code suivant sous Jobs.config dans la section code de votre site. Dans cet exemple, la fonction de notification est appelée toutes les heures toutes les heures.

Votre code devrait ressembler à ceci :
1{ "jobs": [{ "functionLocation": "/backend.jsw", "functionName": "invokeNotify", "description": "", "executionConfig": { "cronExpression": "10 * * * *" } }] }

Étape 10 | Tester votre appli

Vous êtes maintenant prêt à tester votre appli. 

  1. Publiez votre site. 
  2. Inscrivez-vous pour recevoir une notification par e-mail. 
  3. Retournez dans l'Éditeur et vérifiez votre collection. 
  4. Vous pouvez voir qu'il y a un nouvel abonné. Lorsque l'e-mail de notification sera envoyé, vous verrez également une coche dans le champ notifié .
Vérifiez vos e-mails déclenchés
Vous pouvez également vérifier la section E- mails déclenchés sous Outils développeur dans votre tableau de bord pour voir si l'e-mail a été envoyé.

Cela vous a-t-il aidé ?

|

Dans cet article

  • Ce que vous obtenez dans le template
  • Étape 1 | Compléter le design de votre widget
  • Étape 2 | Ajouter et définir les propriétés de l'API de votre widget
  • Donnez un ID aux éléments de votre widget
  • Définissez les propriétés "endDate" et "emailId"
  • Étape 3 | Ajouter du code pour faire fonctionner votre widget
  • Importer vos utilités
  • Modifier le code pour prendre en compte votre nouvelle fonction
  • Prévisualisez votre widget et testez ses propriétés d'API
  • Étape 4 | Créer et coder un panneau personnalisé
  • Créer un panneau personnalisé
  • Ajouter du code à votre panneau personnalisé
  • Étape 5 | Configurer votre widget
  • Ajoutez votre panneau personnalisé à la barre d'action flottante de votre widget
  • Étape 6 | Ajouter un deuxième widget (interne) et implémenter la logique d'inscription
  • Ajoutez votre widget d'inscription au widget de compte à rebours
  • Implémenter la logique d'inscription dans le code du widget principal
  • S'inscrire à l'événement onSubmit
  • Étape 7 | Créer votre appli et lui donner un espace de noms
  • Votre première version
  • Étape 8 | Ajouter une catégorie à votre widget
  • Configurer votre utilité de collection
  • Créer votre collection
  • Ajouter des champs à votre collection
  • Définir les autorisations pour votre collection
  • Étape 9 | Installer votre appli sur un site dans l'Éditeur Wix
  • Définir un identifiant d'e‑mail
  • Utiliser le code back-end dans l'Éditeur Wix pour notifier les abonnés
  • Invoquez votre fonction de notification
  • Étape 10 | Tester votre appli