Casos de éxito de ventanas emergentes

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Los pop-ups están en todas partes de la Web. Puedes verlas en menús, puntas de activación y diálogos, que se usan para funciones como la configuración de la cuenta, los widgets de divulgación y las vistas previas de tarjetas de productos. A pesar de la prevalencia de estos componentes, compilarlos en navegadores sigue siendo sorprendentemente engorroso. Para resolver este problema, llegará a los navegadores un nuevo conjunto de APIs de HTML declarativas para compilar ventanas emergentes. La primera de ellas será la API de Popover.

El cuadro emergente forma parte de Baseline Newly Available.

Navegadores compatibles

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Origen

Por lo general, se confunde un popover 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 eliminación de la luz. Una dialog modal no lo hace. Un diálogo modal inhabilita el resto de la página. Un popover no lo hace. 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 sus sitios web con nuevas funciones de CSS y IU. En este artículo, descubre cómo Tokopedia implementó y se benefició de la API de Popover.

Tokopedia

El uso de atributos emergentes redujo hasta un 70% las líneas de código en React. El elemento modal se puede controlar de forma nativa con HTML en lugar de requerir el manejo 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 del popover.—Andy Wihalim, Ingeniero sénior de software, Tokopedia.

Las páginas de detalles del producto (PDP) de Tokopedia contienen varias imágenes de cada producto. Cuando se hace clic en la miniatura del producto, se abre un cuadro modal para mostrar la imagen ampliada. 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 popover para este modal, usaron un modal de DOM y un botón. El botón cambia el estado de React para abrir el cuadro modal. Con la API de popover, especifican un atributo popovertarget en el elemento que abre el popover con un valor que es el mismo que el ID del elemento popover.

Con esta implementación básica, el popover funciona, pero aparece y desaparece sin ninguna animación. Para crear una animación de entrada y salida fluida para el popover, usa :popover-open y @starting-style, y permite la animación de propiedades discretas. En el siguiente ejemplo de código, el popover se acerca y se aleja 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 popover.

<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',

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

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

Para satisfacer 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. Estaban conformes con el polyfill, ya que funcionó bien y no causó regresiones de rendimiento. En general, pudieron reducir hasta el 70% de las 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 de código desmontando el componente del popover para las páginas que no lo usan y, luego, realizando una división de código para el contenido del popover. De esta manera, redujo el tamaño de su solicitud inicial.

Considera combinar los pop-overs con el posicionamiento de anclas de CSS (próximamente en Chrome) para posicionarlos en relación con otros elementos. Esto es útil para los menús y las herramientas de ayuda, por ejemplo.

Recursos

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