Popover-Fallstudien

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Pop-over sind überall im Web zu finden. Sie finden sie in Menüs, Ein-/Aus-Schaltflächen und Dialogfeldern, die für Funktionen wie Kontoeinstellungen, Offenlegungs-Widgets und Produktkartenvorschauen. Diese Komponenten sind zwar weit verbreitet, in Browsern immer noch überraschend umständlich ist. Um dieses Problem zu lösen, Deklarative HTML-APIs zum Erstellen von Popovers sind bald in Browsern verfügbar. Dies ist die Popover API.

Popover ist Teil von Baseline Newly available.

Unterstützte Browser

  • Chrome: 114. <ph type="x-smartling-placeholder">
  • Edge: 114. <ph type="x-smartling-placeholder">
  • Firefox: 125 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Quelle

Ein Pop-over wird häufig mit einem Dialogfeld verwechselt. Es gibt jedoch einige Unterschiede in ihrem Verhalten. Ein dialog-Element wurde mit dialog.showModal geöffnet (modales Dialogfeld) ist ein Erlebnis, das eine explizite Nutzerinteraktion erfordert, um Schließen Sie das Dialogfeld. Ein popover unterstützt die einfache Deaktivierung. Ein modales dialog-Objekt hingegen tut dies nicht. Ein modales Dialogfeld macht den Rest der Seite inaktiv. Bei popover ist das nicht der Fall. Weitere Informationen zu den Unterschieden

Dieser Artikel ist Teil einer Reihe, in der erläutert wird, wie E-Commerce-Unternehmen die Website mit neuen CSS- und UI-Funktionen optimiert haben. In diesem Artikel erfahren Sie, wie Tokopedia die Popover API implementiert und davon profitierte.

Tokopedia

Durch die Verwendung von Popover-Attributen wurde in React um bis zu 70% der Codezeilen reduziert. Das modale Fenster können nativ über HTML gesteuert werden, sodass keine Ereignisverarbeitung in JavaScript und Verwendung von React.createPortal zum Verschieben des modalen DOMs an das Ende des document.body. Wir können auch @starting-style verwenden, um den das Öffnen und Schließen des Popovers. –Andy Wihalim, Senior Software Engineer, Tokopedia.

Die Produktdetailseiten (Product Detail Pages, PDP) von Tokopedia enthalten jeweils mehrere Produktbilder. Produkt. Wenn auf das Produkt-Thumbnail geklickt wird, wird ein modales Fenster mit dem vergrößertes Bild. Dies ist ein gängiges Muster, das bei E-Commerce-Websites verwendet wird.

Code

Tokopedia nutzt React für die Frontend-Entwicklung. Vor der Implementierung des Popover API für dieses modale Fenster verwendet wurde, wurden ein DOM-Dialogfeld und eine Schaltfläche verwendet. Die Taste den Status „React“ geändert, um das modale Fenster zu öffnen. Mit der Popover API geben sie eine Attribut popovertarget im Element, das das Pop-over mit einem Wert öffnet die mit der ID des Popover-Elements übereinstimmt.

Bei dieser einfachen Implementierung funktioniert das Pop-over, aber es erscheint und verschwindet wieder. ohne Animation. Um eine reibungslose Ein- und Beendigungsanimation für die Pop-over, :popover-open und @starting-style verwenden und Animation von diskrete Eigenschaften. Im folgenden Codebeispiel wird das Popover mithilfe der transform: 'scale()'.

Dieses Codebeispiel zeigt Implementierung von Eingangs- und Exit-Animationen für die Popover API

<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,
  },
});

Für Browser, die das Popover-API nicht unterstützen, hat Tokopedia popover-polyfill von oddbird, die mit gzip-Komprimierung nur 3,2 KB groß ist. Sie waren zufrieden mit dem Polyfill da es gut funktioniert hat und keine Leistungsabfälle verursacht hat. Insgesamt waren sie bis zu 70% Codezeilen in React reduzieren.

Bei der Verwendung der Popover API zu beachtende Punkte

Tokopedia nutzte React und das Team konnte die Codeaufteilung durch Trennen der für Seiten, auf denen sie nicht verwendet wird, und führt dann einen Code-Split für die Pop-over-Inhalte. Auf diese Weise reduzierte das Team den Umfang der ursprünglichen Anfrage.

Popovers mit CSS-Ankerpositionierung kombinieren (demnächst in Chrome verfügbar) um sie relativ zu anderen Elementen zu positionieren. Dies ist beispielsweise für Menüs und Kurzinfos hilfreich.

Ressourcen

Lesen Sie die anderen Artikel dieser Reihe, in denen es um E-Commerce geht. Unternehmen profitierten von neuen CSS- und UI-Funktionen wie Scroll-orientierte Animationen, Pop-over, Containerabfragen und der has()-Selektor.