Case study Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

I popup sono ovunque sul web. Puoi visualizzarli in menu, suggerimenti di attivazione/disattivazione e finestre di dialogo, utilizzati per funzionalità come le impostazioni dell'account, i widget di informativa e le anteprime delle schede di prodotto. Nonostante la loro diffusione, la loro creazione nei browser è ancora sorprendentemente complicata. Per risolvere il problema, nei browser sarà disponibile un nuovo insieme di API HTML declarative per la creazione di popup, la prima delle quali è l'API Popover.

Il popup fa parte di Elementi di Baseline appena disponibili.

Supporto dei browser

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

Origine

Un popup viene spesso confuso con una finestra di dialogo. Tuttavia, esistono alcune differenze sostanziali nel loro comportamento. Un elemento dialog aperto con dialog.showModal (una finestra di dialogo modale) è un'esperienza che richiede un'interazione esplicita dell'utente per chiudere la finestra modale. Un popover supporta la dismissione rapida. Un modale dialog non lo fa. Una finestra di dialogo modale rende inattivo il resto della pagina. Un popover no. Scopri di più sulle differenze.

Questo articolo fa parte di una serie che illustra in che modo le aziende di e-commerce hanno migliorato il proprio sito web utilizzando nuove funzionalità CSS e UI. In questo articolo scopri come Tokopedia ha implementato e beneficiato dell'API Popover.

Tokopedia

L'utilizzo degli attributi popover ha ridotto fino al 70% le righe di codice in React. La finestra modale può essere controllata in modo nativo da HTML anziché richiedere la gestione degli eventi in JavaScript e l'utilizzo di React.createPortal per spostare il DOM della finestra modale alla fine di document.body. Possiamo anche utilizzare @starting-style per animare l'apertura e la chiusura del popup. -Andy Wihalim, Senior Software Engineer, Tokopedia.

Le pagine dei dettagli dei prodotti (PDP) di Tokopedia contengono più immagini per ogni prodotto. Quando viene fatto clic sulla miniatura del prodotto, si apre una finestra modale che mostra l'immagine ingrandita. Questo è un modello comune utilizzato nei siti web di e-commerce.

Codice

Tokopedia utilizza React per lo sviluppo frontend. Prima di implementare l'API popover per questa finestra modale, utilizzavano una finestra modale DOM e un pulsante. Il pulsante ha modificato lo stato di React per aprire la finestra modale. Con l'API popover, specificano un attributo popovertarget nell'elemento che apre il popup con un valore uguale all'ID dell'elemento popup.

Con questa implementazione di base, il popover funziona, ma appare e scompare senza alcuna animazione. Per creare un'animazione di apertura e chiusura fluida per il popup, utilizza :popover-open e @starting-style e consenti l'animazione di proprietà discrete. Nel seguente esempio di codice, il popover aumenta e diminuisce di dimensioni utilizzando la proprietà transform: 'scale()'.

Questo esempio di codice mostra come implementare le animazioni di entrata e uscita per l'API 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,
    },
  },
});

Per soddisfare i browser che non supportano l'API popover, Tokopedia ha implementato il popover-polyfill di OddBird, che pesa solo 3,2 KB con la compressione gzip. Erano soddisfatti del polyfill poiché funzionava bene e non causava regressioni delle prestazioni. Nel complesso, sono riusciti a ridurre fino al 70% delle righe di codice in React con l'API popover.

Aspetti da considerare quando si utilizza l'API Popover

Tokopedia utilizza React e il team ha ottenuto la suddivisione del codice smontando il componente popover per le pagine che non lo utilizzano, quindi eseguendo una suddivisione del codice per i contenuti del popover. In questo modo, ha ridotto le dimensioni della richiesta iniziale.

Valuta la possibilità di combinare i popup con il posizionamento dell'ancora CSS (disponibile a breve su Chrome) per posizionarli rispetto ad altri elementi. Ad esempio, è utile per i menu e le descrizioni comando.

Risorse

Consulta gli altri articoli di questa serie per scoprire in che modo le aziende di e-commerce hanno tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI, come animazioni basate sullo scorrimento, popover, query dei contenitori e il selettore has().