Case study Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

I popover sono ovunque sul Web. Puoi vederle in menu, suggerimenti di attivazione/disattivazione e finestre di dialogo, utilizzate per funzionalità quali 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 difficile. Per risolvere questo problema, sarà in arrivo nei browser un nuovo set di API HTML dichiarative per la creazione di popover. La prima è l'API Popover.

Il popover fa parte di Baseline Newly Available.

Supporto dei browser

  • 114
  • 114
  • 125
  • 17

Origine

Un popover viene spesso confuso con una finestra di dialogo. Tuttavia, il loro comportamento presenta alcune differenze fondamentali. 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 chiusura leggera. al contrario di un criterio modale dialog. Una finestra di dialogo modale rende inerte il resto della pagina. Un'popover non sa. Scopri di più sulle differenze.

Questo articolo fa parte di una serie che descrive in che modo le aziende di e-commerce hanno migliorato il loro sito web utilizzando le nuove funzionalità CSS e dell'interfaccia utente. In questo articolo scopri come Tokopedia ha implementato l'API Popover e come ha tratto vantaggio.

Tokopedia

L'uso degli attributi popover ha ridotto fino al 70% di righe di codice in React. La finestra modale può essere controllata in modo nativo dall'HTML anziché 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 del prodotto (PDP) di Tokopedia contengono più immagini per ciascun prodotto. Quando viene fatto clic sulla miniatura del prodotto, si apre una finestra modale per mostrare l'immagine ingrandita. Si tratta di uno schema 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 finestra modale, hanno usato una finestra modale DOM e un pulsante. Il pulsante ha modificato lo stato della reazione per aprire la finestra modale. Con l'API popover, specificano un attributo popovertarget nell'elemento che apre il popover con un valore uguale all'ID dell'elemento popover.

Con questa implementazione di base, il popover funziona, ma viene visualizzato e scompare senza animazione. Per creare un'animazione di ingresso e uscita fluida per il popover, utilizza :popover-open e @starting-style e consenti l'animazione delle proprietà discrete. Nell'esempio di codice seguente, il popover viene ridimensionato utilizzando la proprietà transform: 'scale()'.

Questo esempio di codice mostra come implementare le animazioni di ingresso 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',

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

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

Per soddisfare i browser che non supportano l'API popover, Tokopedia ha implementato popover-polyfill di oddbird, che è di soli 3,2 kB con compressione gzip. Il polyfill è stato soddisfacente, perché funzionava bene e non ha causato regressioni. Nel complesso, è stato possibile 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 popover per le pagine che non lo utilizzano, quindi eseguendo una suddivisione del codice per i contenuti popover. In questo modo, ha ridotto le dimensioni della richiesta iniziale.

Potresti combinare i popover con il posizionamento di ancoraggio CSS (disponibile a breve in Chrome) per posizionarli rispetto ad altri elementi. Questa funzionalità è utile, ad esempio, per i menu e le descrizioni comando.

Risorse

Esplora gli altri articoli di questa serie che illustrano i vantaggi per le aziende di e-commerce dall'utilizzo di nuove funzionalità CSS e UI, come animazioni con scorrimento, popover, query relative al contenitore e il selettore has().