Tutoriel Wix Blocks : Créer un widget de compteur
Temps de lecture : 12 min
Wix Blocks est ouvert à tous les utilisateurs de Wix Studio. Pour accéder aux blocs, rejoignez Wix Studio.
Ce tutoriel vous montre comment construire un widget de compteur, où vous pouvez incrémenter et décrémenter un nombre. À travers ce widget simple, nous vous expliquerons tout ce que vous pouvez faire avec Wix Blocks.
Nous vous recommandons de construire ce widget à partir de zéro, mais si vous êtes bloqué, vous pouvez afficher un modèle du widget dans Blocks et le modifier sous votre compte Wix.
Étape 1 | Créer un nouveau widget dans Blocks
- Créer une appli Blocks vide.
- Si l'appli n'est pas créée avec un widget par défaut, ajoutez un widget à votre appli.
Afficher la capture d'écran
Étape 2 | Ajouter une structure
Une structure est un conteneur qui permet la réactivité. Cela permettra d'organiser les autres éléments. Pour ajouter une structure :
- Cliquez sur le bouton Ajouter des éléments
dans le menu supérieur. - Cliquez sur Mise en page - > Flexbox -> Structures
- Cliquez sur la structure verticale à 3 sections.
Afficher la capture d'écran
Étape 3 | Ajouter des éléments de widget
Ajouter les boutons
- Cliquez sur le bouton Ajouter des éléments
dans le menu supérieur. - Cliquez sur BOUTON.
- Faites glisser et déposez un bouton sur la partie droite de la structure.
Afficher la capture d'écran
4. Cliquez sur Modifier le texte et l'icône.
5. Sélectionnez Texte uniquement dans la liste déroulante.
6. Remplacez le texte par « + ».
7. Cliquez sur l'icône design 
dans le panneau Inspecteur 
et sélectionnez Texte.
dans le panneau Inspecteur et sélectionnez Texte.8. Cliquez sur Thèmes et sélectionnez Titre 6 dans la liste déroulante.
9. Faites glisser et déposez un autre bouton carré sur la section de gauche.
10. Remplacez le texte par « - ».
Afficher la capture d'écran
Ajouter le deuxième chiffre
- Cliquez sur le bouton Ajouter des éléments et sélectionnez Texte.
- Faites glisser et déposez un élément Title 32px dans la section centrale du layouter.
- Modifiez le texte à "0" et alignez-le sur le centre.
Afficher la capture d'écran
Changer les IDs
- Cliquez sur l'icône Propriétés et Événements
en bas à droite de l'écran. - Remplacez l'ID de votre bouton d'augmentation par incBtn.
- Changez l’ID de votre bouton de décrémentation en decBtn.
- Remplacez l'ID de votre élément de texte parcountTxt.
Afficher la capture d'écran
Étape 4 | Ajouter du code à vos éléments
Il est maintenant temps de faire en sorte que le widget fasse ce qu'il est censé faire : compter vers le haut et vers le bas lorsque les boutons sont cliqués.
1. Cliquez sur l'onglet Code ou allez dans la partie inférieure de votre écran pour ajouter du code à votre widget.
Afficher la capture d'écran
2. Ajoutez le code suivant avant votre fonction onReady() .
1//Définit le nombre à 0 laisser compteur = 0; //Attribuez le nombre à votre élément de texte fonction rendu () { $w('#countTxt').text =count.toString(); } // On ajoute un certain montant au nombre et déclenche un événement dans l'API du widget. rendu(); }3. Ajoutez le code suivant dans votre fonction onReady() .
1 $w('#incBtn').onClick(() => { addToCount (1); }); $w('#decBtn').onClick(() => { addToCount(-1); }) ; rendu();4. Cliquez sur le bouton Aperçu pour voir votre widget en action.
Étape 5 | Rendre votre widget personnalisable avec l'API Widget
Vous pouvez définir une API pour votre widget, afin que l'utilisateur (un propriétaire du site qui installe le widget) puisse le personnaliser selon ses besoins. L'API peut contenir des propriétés, des événements et des fonctions exportées.
Supposons que vous souhaitiez que le propriétaire du site puisse décider de "l'étape" du décompte. Peut-être qu'ils veulent que l'étape soit 2, de sorte que le compte soit 0,2, 4, 6 etc.
Vous pouvez définir une propriété dans l'API du widget nommée « step » et permettre à l'utilisateur de la personnaliser.
Définissez la propriété « step »
- Cliquez sur le widget API
pour ouvrir le panneau API du widget. - Cliquez sur l'icône Ajouter une nouvelle propriété dans la section Propriétés (ou survolez la section et cliquez sur le bouton
qui apparaît).
Afficher la capture d'écran
3. Nommez votre propriété « étape », donnez-lui le type Nombre et une valeur par défaut de 1.
Afficher la capture d'écran
Modifier votre code pour prendre en compte votre nouvelle propriété
Modifiez votre code afin que, lorsque les boutons sont cliqués, addToCount soit appelé avec l'étape des propriétés plutôt qu'avec la valeur par défaut de 1.
Utilisez $widget.props pour accéder à vos propriétés (remarquez les suggestions Velo de saisie semi-automatique).
1$w.onReady(function () { $w('#incBtn').onClick(() => { addToCount($widget.props.step); }) ; $w('#decBtn').onClick(() => { addToCount(-$widget.props.step); }) ; rendu(); }) ;Tester votre propriété en mode Aperçu
- Cliquez sur Aperçu pour passer au mode Aperçu.
- Cliquez sur Tester les propriétés de l'API.
Afficher la capture d'écran
3. Changez l'étape pour un autre numéro et voyez comment fonctionne votre widget.
Afficher la capture d'écran
Ajouter un événement public à votre widget API
L'API du widget vous permet d'ajouter un événement qui est déclenché quand vous le décidez.
Ajoutez un événement qui est déclenché lorsque la variable « count » change :
- Cliquez sur le widget API pour ouvrir le panneau API du widget.
- Cliquez sur Ajouter un nouvel événement public dans la section Événements (ou survolez la section et cliquez sur l'icône
qui apparaît). - Nommez votre événement et décrivez-le.
Afficher la capture d'écran
4. Ajoutez cette ligne à votre fonction addToCount () pour déclencher l'événement lorsque le nombre change.
1$widget.fireEvent('modifier', nombre);5. Maintenant, votre fonction addToCount() doit ressembler à ceci :
1fonction addToCount (amount) {count += amount; rendu(); $widget.fireEvent('modifier', nombre) ; }Atteindre votre événement dans l'Éditeur du site
Vous devrez attirer votre événement dans l'éditeur du site une fois que vous aurez installé votre widget sur votre site web (ce sera décrit à l'étape 8).
Ajouter une fonction publique à votre widget API
Créez et exportez une fonction réinitialiser () , afin que les propriétaires de sites puissent facilement définir le nombre à 0.
- Cliquez sur le widget API pour ouvrir le panneau API du widget.
- Cliquez sur Ajouter une nouvelle fonction publique dans la section Fonctions (ou survolez la section et cliquez sur l'icône qui apparaît).
- Une nouvelle fonction vide du nom par défaut toto () est créée, avec un JSDoc (le bloc de commentaires) désigné qui peut être lu par toute personne qui utilisera votre fonction sur un site.
Afficher la capture d'écran
4. Collez le code suivant au lieu du code par défaut de la fonction :
1export fonction réinitialiser () { //Cette fonction fait partie de mon API publiquecount = 0; rendu(); }5. Mettez à jour le JSDoc. Remarque : vous devez conserver l'annotation de la fonction dans ce format.
1/** *@function *@description Définit le compte à 0 et le rendu. *@ne retourne rien */Suggestion
Vous pouvez aussi faire l'inverse. Toute fonction exportée avec le JSDoc approprié au-dessus apparaîtra dans le panneau API du widget sur la droite. Ainsi, vous pouvez écrire votre code directement, au lieu de recevoir le modèle en cliquant sur Ajouter une nouvelle fonction publique.
Étape 6 | (Facultatif) Configurer le comportement de votre widget au moment de la modification
L'onglet Configuration vous permet de déterminer le comportement du widget et de ses éléments lorsqu'un propriétaire du site le modifie dans l'éditeur. Essayez quelques options dans l'onglet Configuration .
Afficher la capture d'écran
Paramétrez un nom d'affichage pour les éléments de votre widget :
- Sélectionnez le bouton de décrément.
- Modifiez son nom d'affichage sous Nom du composant en « Mon décrément » dans l'inspecteur
.
Afficher la capture d'écran
Empêchez l'élément de texte d'être sélectionnable dans l'éditeur :
- Sélectionnez l'élément de texte qui représente votre nombre.
- Cliquez sur l'option Peut être sélectionné dans la section Comportement de l' inspecteur
pour supprimer la coche bleue.
Afficher la capture d'écran
Étape 7 | (Facultatif) Créer plus de design prédéfini
Blocks vous permet de créer diverses variantes du design et de la mise en page de votre widget, grâce aux éléments prédéfini de design. Pour créer un autre design prédéfini :
- Cliquez sur l'onglet Design dans le menu du haut.
- Cliquez sur + Ajouter un élément prédéfini de design + dans la section Préréglages de design du volet Design sous Structure de l'appli
. - Cliquez sur l'icône ֿPlus d'actions
pour renommer votre élément prédéfini (vous pouvez également le dupliquer ou le supprimer).
Afficher la capture d'écran
4. Apportez quelques modifications visibles dans votre widget, comme changer la couleur de la section du milieu.
Afficher la capture d'écran
Passez d'un élément prédéfini à l'autre pour voir les différences.
Changements par élément prédéfini versus changements généraux
Notez que certaines modifications de design et de mise en page n'ont un impact que sur votre préréglage actuel, tandis que d'autres ont un impact sur tous (en savoir plus).
Étape 8 | Attirer votre événement dans l'éditeur du site
Important
Cette étape a lieu dans l'Éditeur Wix ou l'Éditeur Studio, et non dans Blocks.
Allez sur l'Éditeur de votre site pour profiter de l'événement à partir de votre appli. Vous devez d'abord inscrire un gestionnaire d'événements pour le changement d'événement :
- Installez votre appli de widget.
- Activez le mode développeur.
- Cliquez sur les propriétés et les événements l'icône .
- Changez l'ID de votre widget, par exemple, en "counter1".
- Cliquez onChange( ) sous Gestionnaires d'événements.
- Sélectionnez compteur1_change dans la boîte.
Afficher la capture d'écran
écrivez maintenant la fonction. Il obtient le « nombre » en tant que paramètre et réinitialise le nombre lorsqu’il atteint le nombre que vous décidez (dans notre exemple : 30). Votre fonction devrait ressembler à ceci :
1export fonction compteur1_change({data:count}) { // Cette fonction a été ajoutée à partir du panneau Propriétés et événements. Pour en savoir plus, consultez http://wix.to/UcBnC-4 // Ajoutez votre code pour cet événement ici : if (count > 30) { $w('#counter1').reset();} }Prévisualisez ou publiez pour voir votre site en action.
Cela vous a-t-il aidé ?
|