Vista
Las vistas actúan como páginas para tus widgets.
- Cada widget debe tener al menos una vista.
- Los widgets siempre tienen una vista inicial, que es la vista que se muestra cuando el widget aparece por primera vez.
Ajustes Comunes
Tipo de Vista
Vista Superpuesta (Overlay View)
Las vistas superpuestas flotan sobre otro contenido en un sitio web. Se pueden posicionar en el centro de la pantalla o a lo largo del borde de la página.
Las vistas superpuestas pueden tener un telón de fondo opcional, que se sitúa detrás de la vista cubriendo toda la página. Esto puede utilizarse para atenuar o iluminar la página de modo que la vista se enfoque visualmente.
Vista Incrustada (Embedded View)
Una vista incrustada se inserta en una sección específica de una página. La vista ocupará espacio en la página y afectará el flujo y el diseño de otros elementos.
Selector de Incrustación
El punto de inserción para la vista se especifica como un Selector CSS.
Por ejemplo, el selector #banner_container podría usarse para apuntar a la sección en el siguiente documento HTML:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<div id="banner_container">...</div>
...
</body>
</html>Precedencia del Selector de Incrustación
INFO
La incrustación funciona de manera similar a la función del navegador document.querySelector.
Puede haber situaciones en las que quieras tener múltiples selectores. Por ejemplo, tienes un widget que se muestra tanto en un sitio de escritorio como en uno móvil que tiene un HTML diferente.
Ejemplo de selector de incrustación: #desktop-wrapper, .mobile-embed.
Esto encontraría #desktop-wrapper o .mobile-embed, dependiendo de cuál aparezca primero en el documento. Si solo aparece uno de ellos, esto también es válido y es donde aparecerá tu incrustación.
WARNING
Se aconseja probar la incrustación tanto en escritorio como en móvil usando algo como el Modo Dispositivo de Chrome.
Modo de Incrustación
Determina dónde se incrusta la vista en relación con el contenedor de incrustación. Las opciones incluyen:
- Prepend Inside (Prepend Dentro) - Inserta la vista dentro del contenedor de incrustación antes de cualquier otro contenido.
- Append Inside (Append Dentro) - Inserta la vista dentro del contenedor de incrustación después de cualquier otro contenido.
- Insert Before (Insertar Antes) - Inserta la vista fuera del contenedor de incrustación antes de este.
- Insert After (Insertar Después) - Inserta la vista después del contenedor de incrustación después de este.
Tiempo de Incrustación
El ajuste Tiempo de Incrustación controla cómo un componente de Vista se inserta en su contenedor de incrustación en la página.
Immediate (Inmediato) (predeterminado) - Inserta la Vista en el contenedor de incrustación tan pronto como se ejecuta el widget. Usa esto cuando se garantiza que el contenedor de incrustación ya existe en la página al momento de la carga.
Wait for Element (Esperar por el Elemento) - Espera a que el elemento del contenedor de incrustación exista en el DOM, luego inserta la Vista una vez que aparece. Usa esto cuando el contenedor de incrustación se añade dinámicamente — por ejemplo, por otro script, un CMS o enrutamiento del lado del cliente.
Cuando Coinciden Múltiples Elementos
Para las vistas incrustadas, esto determina qué elemento usar como objetivo de incrustación cuando el selector de incrustación coincide con múltiples elementos.
- Use First Match (Usar la Primera Coincidencia) - Usa el primer elemento con el que coincida el selector.
- Use Last Match (Usar la Última Coincidencia) - Usa el último elemento con el que coincida el selector.
Tamaño de Incrustación
Fixed Height (Altura Fija) (predeterminado) - La vista se renderiza con la altura exacta en que está definida.
Ratio (Proporción) - Para vistas que usan un ancho y alto de tamaño fijo, esta opción mantiene la proporción del ancho/alto inicialmente definido y escala (reduce o amplía) la vista para llenar el contenedor de incrustación con esta proporción de visualización.
Altura del Contenedor de Incrustación (Embed Wrapper Height)
Las vistas incrustadas se crean dentro de un elemento "wrapper" (contenedor), antes de ser insertadas en la página. Por defecto, este elemento wrapper asume automáticamente la altura de la vista en sí, pero se puede especificar una altura específica.
Por ejemplo, esto permitiría incrustar y centrar verticalmente una vista en una parte de la página haciendo que la altura del wrapper sea mayor que la de la vista.
Z-Index
La propiedad z-index permite anular la posición de apilamiento de la vista con respecto a otro contenido en la página.
INFO
Para algunos sitios web puede ser necesario especificar un valor grande para z-index para asegurar que la vista aparezca por encima de otros contenidos en la página.
Transiciones
Las vistas pueden configurarse para hacer una transición en la pantalla cuando se muestran.
INFO
Las transiciones se omiten cuando una vista cambia a otra usando la acción Switch to View (Cambiar a Vista). Esto se hace para permitir el caso de uso común donde un widget tendrá múltiples vistas que actúan como pantallas subsiguientes, como en la plantilla del widget Oferta Flotante.