Case study Popover

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

I popup sono ovunque sul web. Puoi vederli in menu, suggerimenti e finestre di dialogo, utilizzati per funzionalità come impostazioni dell'account, widget di divulgazione e anteprime delle schede di prodotto. Nonostante la prevalenza di questi componenti, la loro creazione nei browser è ancora sorprendentemente macchinosa. Per risolvere questo problema, nei browser arriverà un nuovo set di API HTML dichiarative per la creazione di popup, la prima di queste è l'API Popover.

Un popup viene spesso confuso con una finestra di dialogo. Tuttavia, esistono alcune differenze fondamentali nel loro comportamento. Un elemento dialog aperto con dialog.showModal (una finestra di dialogo modale) è un'esperienza che richiede un'interazione utente esplicita per chiudere la modale. Un popover supporta la chiusura leggera. Una dialog modale no. 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 l'API Popover e quali vantaggi ne ha tratto.

Tokopedia

L'utilizzo degli attributi popup ha ridotto fino al 70% le righe di codice in React. La 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 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 del prodotto (PDP) di Tokopedia contengono più immagini di prodotto per ogni prodotto. Quando si fa clic sulla miniatura del prodotto, viene aperta una modale per mostrare l'immagine ingrandita. Si tratta di un pattern comune utilizzato nei siti web di e-commerce.

Codice

Tokopedia utilizza React per lo sviluppo del frontend. Prima di implementare l'API Popover per questa modale, utilizzavano una modale DOM e un pulsante. Il pulsante modificava lo stato di React per aprire la 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 popup funziona, ma viene visualizzato 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 delle proprietà discrete. Nell'esempio di codice seguente, il popup viene scalato in entrata e in uscita utilizzando la transform: 'scale()'proprietà.

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 supportare i browser che non supportano l'API Popover, Tokopedia ha implementato il polyfill popup di oddbird, che occupa solo 3,2 KB con la compressione gzip. Il polyfill li ha soddisfatti perché funzionava bene e non causava regressioni delle prestazioni. In generale, sono riusciti a ridurre fino al 70% le 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 popup per le pagine che non lo utilizzano, quindi eseguendo una suddivisione del codice per i contenuti del popup. In questo modo, hanno ridotto le dimensioni della richiesta iniziale.

Valuta la possibilità di combinare i popup con il posizionamento degli ancoraggi CSS (disponibile a breve in Chrome) per posizionarli rispetto ad altri elementi. Questo è utile, ad esempio, per menu e suggerimenti.

Risorse

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