Créer le pop-up d'identification du produit
Dans cette section, vous allez ajouter un autre pop-up pour l'identification du produit.
1. Dans la vue Identification, ajoutez un autre widget Pop-up au canevas, puis configurez les propriétés suivantes :
◦ Classe : saisissez full-page-popup.
◦ Largeur (px, %, vh, em) : saisissez 100 %.
◦ Hauteur (px, %, vh, em) : saisissez 100 %.
◦ Visible : sélectionnez la case à cocher.
◦ ID Studio : saisissez productIdentifiedPopup.
2. Cliquez sur scan-1 dans l'arborescence du projet pour afficher ses propriétés. Faites glisser l'événement Valeur acquise sur landingPagePopup dans l'arborescence du projet. Sélectionnez Afficher le pop-up dans la fenêtre Sélectionner un gestionnaire d'événements, puis cliquez sur Lier.
3. Ensuite, ajoutez un widget Disposition de grille au nouveau widget Pop-up pour structurer davantage la mise en page.
4. Lorsque le widget Disposition de grille est sélectionné, sélectionnez la case à cocher Division uniforme de la hauteur des cellules dans le volet DETAILS.
5. Ajoutez deux lignes supplémentaires à la grille en cliquant deux fois sur Ajouter une ligne (sous ACTIONS DE GRILLE dans le volet DETAILS).
6. Laissez la première ligne vide.
7. Sélectionnez la deuxième ligne et complétez les informations suivantes :
◦ Définissez Direction flexible sur Colonne.
◦ Définissez Justifier le contenu sur Centre.
◦ Définissez Aligner les éléments sur Centre.
◦ Ajoutez un widget Etiquette, puis configurez les propriétés suivantes :
▪ Texte : saisissez Product Identified.
▪ Classe : saisissez simple-label title-label.
▪ ID Studio : saisissez productIdentifiedLabel.
◦ Ajoutez un second widget Etiquette, puis configurez les propriétés suivantes :
▪ Texte : saisissez ***.
▪ Classe : saisissez simple-label sub-title-label.
▪ ID Studio : saisissez productIDLabel.
◦ Cliquez sur scan-1 dans l'arborescence du projet pour afficher ses propriétés. Faites glisser la propriété Valeur scannée sur productIDLabel dans l'arborescence du projet. Sélectionnez Texte dans la fenêtre Sélectionner une cible de liaison, puis cliquez sur Lier.
8. Sélectionnez la troisième ligne, puis complétez les informations suivantes :
◦ Définissez Direction flexible sur Ligne.
◦ Définissez Justifier le contenu sur Centre.
◦ Définissez Aligner les éléments surFin.
◦ Définissez Remplissage (par ex., 10px 10px 20px 10px) sur 20px.
9. Ensuite, ajoutez un widget Bouton dans la troisième ligne et mettez à jour les propriétés suivantes :
◦ Texte : saisissez Show the product.
◦ Classe : saisissez long-button--green.
◦ ID Studio : saisissez showProductButton.
10. Faites glisser l'événement Clic du nouveau bouton sur la vue Visualization. Sélectionnez Naviguer dans la fenêtre Sélectionner un gestionnaire d'événements, puis cliquez sur Lier.
11. Ensuite, créez un flux pour redémarrer l'expérience.