Casos de éxito de ventanas emergentes

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Las ventanas emergentes están en toda la Web. Puedes verlas en menús, sugerencias de activación y diálogos, que se usan para funciones como la configuración de la cuenta, widgets de divulgación y vistas previas de tarjetas de productos. A pesar de la prevalencia de estos componentes, compilarlos en navegadores sigue siendo muy engorroso. Para solucionar este problema, los navegadores implementarán un nuevo conjunto de APIs de HTML declarativas para crear ventanas emergentes. La primera de ellas será la API de Popover.

La ventana emergente es parte de Baseline Newly disponible.

Navegadores compatibles

  • 114
  • 114
  • 125
  • 17

Origen

Por lo general, una ventana emergente se confunde con un diálogo. Sin embargo, existen algunas diferencias clave en su comportamiento. Un elemento dialog abierto con dialog.showModal (un diálogo modal) es una experiencia que requiere la interacción explícita del usuario para cerrar la ventana modal. Un popover admite la función de descartar la luz. Una dialog modal no lo hace. Un diálogo modal inerte el resto de la página. Una popover no. Obtén más información sobre las diferencias.

Este artículo forma parte de una serie en la que se analiza cómo las empresas de comercio electrónico mejoraron su sitio web con nuevas funciones de IU y CSS. En este artículo, descubrirás cómo Tokopedia implementó y se benefició de la API de Popover.

Tokopedia

El uso de atributos de ventana emergente redujo hasta un 70% de líneas de código en React. La ventana modal se puede controlar de forma nativa mediante HTML en lugar de requerir el control de eventos en JavaScript y usar React.createPortal para mover el DOM modal al final de document.body. También podemos usar @starting-style para animar la apertura y el cierre de la ventana emergente (Andy Wihalim, ingeniero de software sénior, Tokopedia).

Las páginas de detalles del producto (PDP) de Tokopedia contienen varias imágenes del producto para cada uno. Cuando se hace clic en la miniatura del producto, se abre una ventana modal para mostrar la imagen agrandada. Este es un patrón común que se usa en los sitios web de comercio electrónico.

Código

Tokopedia usa React para su desarrollo de frontend. Antes de implementar la API de ventana emergente para este modal, usaron una ventana modal del DOM y un botón. El botón cambió el estado de React para abrir la ventana modal. Con la API de ventana emergente, especifican un atributo popovertarget en el elemento que abre ese elemento con un valor igual al ID del elemento de este.

Con esta implementación básica, la ventana emergente funciona, pero aparece y desaparece sin ninguna animación. Para crear una animación de entrada y salida fluida para la ventana emergente, usa :popover-open y @starting-style, y permite la animación de propiedades discretas. En el siguiente ejemplo de código, se escala la ventana emergente y se reduce la escala con la propiedad transform: 'scale()'.

En este ejemplo de código, se muestra cómo implementar animaciones de entrada y salida para la API de ventanas emergentes.

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

Para brindar contenido a los navegadores que no admiten la API de popover, Tokopedia implementó el popover-polyfill de oddbird, que solo tiene 3.2 KB con compresión gzip. Quedó satisfecho con el polyfill, ya que funcionaba bien y no causó regresiones de rendimiento. En general, pudieron reducir hasta un 70% de líneas de código en React con la API de popover.

Aspectos que debes tener en cuenta cuando usas la API de Popover

Tokopedia usa React, y el equipo logró la división del código desactivando el componente de ventana emergente para las páginas que no lo usan y, luego, dividió el código para el contenido de esa ventana. De esta manera, redujeron el tamaño de la solicitud inicial.

Considera combinar ventanas emergentes con el posicionamiento de anclajes de CSS (próximamente en Chrome) para posicionarlas en relación con otros elementos. Esto es útil para los menús y la información sobre la herramienta, por ejemplo.

Recursos

Explora los otros artículos de esta serie en los que se explica cómo las empresas de comercio electrónico se beneficiaron con el uso de nuevas funciones de IU y CSS, como las animaciones basadas en desplazamientos, las ventanas emergentes, las consultas de contenedores y el selector has().