Crear el elemento emergente Producto identificado
En esta sección, añadirá otro elemento emergente para la identificación del producto.
1. En la vista Identificación, añada otro widget del tipo Elemento emergente al lienzo y configure las siguientes propiedades:
◦ Clase: introduzca full-page-popup
◦ Anchura (px, %, vh, em)introduzca 100 %
◦ Altura (px, %, vh, em)introduzca 100 %
◦ Visible: seleccione la casilla
◦ ID de Studio: introduzca productIdentified Popup
2. Pulse escanear-1 en el árbol de proyectos para mostrar sus propiedades. Arrastre el evento Valor adquirido y suéltelo en landingPagePopup en el árbol del proyecto. Seleccione Mostrar emergente en la ventana Seleccionar controlador de eventos y pulse en Enlazar.
3. A continuación, añada un widget del tipo Diseño de cuadrícula al nuevo widget Elemento emergente para dar más estructura al diseño.
4. Con el widget Diseño de cuadrícula seleccionado, seleccione la casilla Filas espaciadas uniformemente en el panel DETALLES.
5. Añada dos filas más a la cuadrícula pulsando Añadir fila dos veces (en la sección ACCIONES DE CUADRÍCULA del panel DETALLES).
6. Deje la primera fila vacía.
7. Seleccione la segunda fila y complete lo siguiente:
◦ Defina Dirección de filas como Columna
◦ Defina Justificar contenido como Centro
◦ Defina Alinear elementos como Centro
◦ Añada un widget del tipo Etiqueta y configure las siguientes propiedades:
▪ Text: introduzca Producto identificado
▪ Clase: introduzca simple-label title-label
▪ ID de Studio: introduzca productIdentifiedLabel
◦ Añada un segundo widget del tipo Etiqueta y configure las siguientes propiedades:
▪ Texto: introduzca ***
▪ Clase: introduzca simple-label sub-title-label
▪ ID de Studio: introduzca productIDLabel
◦ Pulse escanear-1 en el árbol de proyectos para mostrar sus propiedades. Arrastre la propiedad Valor escaneado y suéltela en productIDLabel en el árbol de proyectos. Seleccione Texto en la ventana Seleccionar destino de enlace y pulse en Enlazar.
8. Seleccione la tercera fila y complete lo siguiente:
◦ Defina Dirección de filas como Fila
◦ Defina Justificar contenido como Centro
◦ Defina Alinear elementos como Fin
◦ Defina Caracteres de relleno (p. ej. 10 px 10 px 20 px 10 px) como 20px
9. A continuación, añada un widget del tipo Botón en la tercera fila y actualice las siguientes propiedades:
◦ Text: introduzca Mostrar el producto
◦ Clase: introduzca long-button--green
◦ ID de Studio: introduzca showProductButton
10. Arrastre el evento Pulsar del nuevo botón y suéltelo en la vista Visualización. Seleccione Navegar en la ventana Seleccionar controlador de eventos y pulse en Enlazar.
11. A continuación, cree un flujo para reiniciar la experiencia.