Case study Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

I popup sono ovunque sul web. Puoi vederle in menu, suggerimenti di attivazione/disattivazione e finestre di dialogo, utilizzati per funzionalità quali impostazioni dell'account, widget di divulgazione e anteprime delle schede di prodotto. Nonostante la loro diffusione, la loro creazione nei browser è ancora sorprendentemente complessa. Per risolvere questo problema, nei browser sarà disponibile un nuovo set di API HTML dichiarative per la creazione di popover, la prima è 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. Esistono però alcune differenze fondamentali 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 disattivazione della luce. Un dialog modale non lo fa. Una finestra di dialogo modale rende inerte 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 tramite HTML, invece di richiedere la gestione degli eventi in JavaScript e utilizzare React.createPortal per spostare il DOM modale alla fine di document.body. Possiamo anche utilizzare @starting-style per animare l'apertura e la chiusura del popover.—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. Si tratta di un modello comune utilizzato nei siti web di e-commerce.

Codice

Tokopedia utilizza React per il suo 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 entrata e uscita fluida per il popup, utilizza :popover-open e @starting-style e consenti l'animazione di proprietà discrete. Nel seguente esempio di codice, il popup 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 eseguito la suddivisione del codice smontando il componente popover per le pagine che non lo utilizzano e poi dividendo il 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().