Creare un popup per l'identificazione del prodotto
In questa sezione si aggiunge un altro popup per l'identificazione del prodotto.
1. Nella vista Identification aggiungere un altro widget Popup all'area di lavoro e configurare le seguenti proprietà:
◦ Classe - Immettere full-page-popup
◦ Larghezza (px, %, vh, em) - Immettere 100%
◦ Altezza (px, %, vh, em) - Immettere 100%
◦ Visibile - Selezionare la casella di controllo
◦ ID Studio - Immettere productIdentifiedPopup
2. Fare clic su scan-1 nell'albero del progetto per visualizzarne le proprietà. Trascinare e rilasciare l'evento Valore acquisito in landingPagePopup nell'albero del progetto. Selezionare Mostra popup nella finestra Seleziona gestore eventi e fare clic su Associa.
3. Successivamente, aggiungere un widget Layout griglia al nuovo widget Popup per rafforzare la struttura del layout.
4. Con il widget Layout griglia selezionato, selezionare la casella di controllo Divisione uniforme altezza righe nel riquadro DETTAGLI.
5. Aggiungere altre due righe alla griglia facendo clic due volte su Aggiungi riga (in AZIONI GRIGLIA del riquadro DETTAGLI).
6. Lasciare vuota la prima riga.
7. Selezionare la seconda riga e completare le operazioni seguenti:
◦ Impostare Direzione flessibile su Colonna
◦ Impostare Giustifica contenuto su Al centro
◦ Impostare Allinea elementi su Al centro
◦ Aggiungere un widget Etichetta e configurare le seguenti proprietà:
▪ Testo - Immettere Product identified
▪ Classe - Immettere simple-label title-label
▪ ID Studio - Immettere productIdentifiedLabel
◦ Aggiungere un secondo widget Etichetta e configurare le seguenti proprietà:
▪ Testo - Immettere ***
▪ Classe - Immettere simple-label sub-title-label
▪ ID Studio - Immettere productIDLabel
◦ Fare clic su scan-1 nell'albero del progetto per visualizzarne le proprietà. Trascinare e rilasciare la proprietà Valore scansionato in productIDLabel nell'albero del progetto. Selezionare Testo nella finestra Seleziona destinazione associazione e fare clic su Associa.
8. Selezionare la terza riga e completare le operazioni seguenti:
◦ Impostare Direzione flessibile su Riga
◦ Impostare Giustifica contenuto su Al centro
◦ Impostare Allinea elementi su Fine
◦ Impostare Spaziatura interna (10 px 10 px 20 px 10 px) su 20 px
9. Successivamente, aggiungere un widget Pulsante nella terza riga e aggiornare le seguenti proprietà:
◦ Testo - Immettere Show the product
◦ Classe - Immettere long-button--green
◦ ID Studio - Immettere showProductButton
10. Trascinare e rilasciare l'evento Clic del nuovo pulsante nella vista Visualization. Selezionare Naviga nella finestra Seleziona gestore eventi e fare clic su Associa.
11. Il passo successivo consiste nel creare un flusso per riavviare l'esperienza.