Casos de éxito de ventanas emergentes

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

Los popovers están en todas partes en la Web. Puedes verlos en menús, sugerencias 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 lo frecuentes que son estos componentes, compilarlos en navegadores sigue siendo sorprendentemente engorroso. Para resolver este problema, se lanzará un nuevo conjunto de APIs de HTML declarativas para compilar popovers en los navegadores. La primera de ellas es la API de Popover.

Un popover suele confundirse con un diálogo. Sin embargo, existen algunas diferencias clave en su comportamiento. Un elemento dialog que se abre con dialog.showModal (un diálogo modal) es una experiencia que requiere la interacción explícita del usuario para cerrar el modal. Un popover admite el cierre ligero. Un dialog modal no lo hace. Un diálogo modal hace que el resto de la página sea inerte. 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 su sitio web con nuevas funciones de CSS y de la IU. En este artículo, descubre cómo Tokopedia implementó la API de Popover y se benefició de ella.

Tokopedia

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

Las páginas de detalles del producto (PDP) de Tokopedia contienen varias imágenes de productos para cada producto. Cuando se hace clic en la miniatura del producto, se abre un 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, usaban un modal DOM y un botón. El botón cambió el estado de React para abrir el 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 de 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 amplía y se reduce con la transform: 'scale()'propiedad.

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 adaptarse 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 satisfechos con el polyfill, ya que funcionaba bien y no causaba regresiones de rendimiento. En general, pudieron reducir hasta un 70% 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 de popover para las páginas que no lo usan y, luego, haciendo una división de código para el contenido del popover. De esta manera, redujeron el tamaño de su solicitud inicial.

Considera combinar popovers con el posicionamiento de anclaje de CSS (próximamente en Chrome) para posicionarlos en relación con otros elementos. Esto es útil para menús y tooltips, 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 del uso de nuevas funciones de CSS y de la IU, como las animaciones controladas por el desplazamiento, el popover, las consultas de contenedores y el selector has().