Studia przypadków Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Pop-upy są wszędzie w internecie. Możesz je zobaczyć w menu, podpowiedziach i oknach dialogowych, które są używane w przypadku funkcji takich jak ustawienia konta, widżety informacji oraz podgląd karty produktu. Pomimo powszechności tych komponentów ich tworzenie w przeglądarkach jest nadal zaskakująco kłopotliwe. Aby rozwiązać ten problem, wprowadziliśmy do przeglądarek nowy zestaw deklaratywnych interfejsów API HTML do tworzenia wyskakujących okienek. Pierwszym z nich jest interfejs Popovy API.

Popover jest częścią nowości w wersji podstawowej.

Obsługa przeglądarek

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

Źródło

Wyskakujące okienko jest często mylone z oknem dialogowym. Występują jednak pewne kluczowe różnice w ich działaniu. Element dialog otwierany za pomocą dialog.showModal (okno modalne) wymaga wyraźnej interakcji użytkownika, aby zamknąć okno. popover obsługuje funkcję light-dismiss. Okno modalne dialog nie jest wyświetlane. Okno modalne powoduje, że reszta strony jest nieaktywna. popover tego nie robi. Więcej informacji o różnicach

Ten artykuł należy do serii, w której omawiamy, jak firmy e-commerce ulepszają swoje witryny za pomocą nowych funkcji CSS i interfejsu użytkownika. Z tego artykułu dowiesz się, jak firma Tokopedia wdrożyła interfejs Popover API i jak korzystała z niego.

Tokopedia

Dzięki zastosowaniu atrybutów popover udało się zmniejszyć liczbę wierszy kodu w React nawet o 70%. Modal może być sterowany w HTML, zamiast wymagać obsługi zdarzeń w JavaScript i użycia React.createPortal do przeniesienia DOM modalnego na koniec document.body. Możemy też użyć @starting-style do animowania otwierania i zamykania wyskakującego okienka.—Andy Wihalim, starszy inżynier oprogramowania, Tokopedia.

Strony z informacjami o produktach (PDP) w Tokopedia zawierają wiele zdjęć każdego produktu. Po kliknięciu miniatury produktu otwiera się okno z powiększonym obrazem. Jest to typowy wzór używany w witrynach e-commerce.

Kod

Tokopedia używa React do tworzenia front-endu. Przed wdrożeniem interfejsu popover API w tym oknie modalnym autorzy używali okna modalnego DOM i przycisku. Przycisk zmienił stan React, aby otworzyć okno. W przypadku interfejsu popover API należy w elemencie, który otwiera wyskakujące okienko, podać atrybut popovertarget z wartością identyczną z identyfikatorem elementu wyskakującego okienka.

W ramach tej podstawowej implementacji wyskakujące okienko działa, ale pojawia się i znika bez animacji. Aby utworzyć płynną animację wejścia i wyjścia dla wyskakującego okienka, użyj właściwości :popover-open i @starting-style oraz zezwól na animację właściwości dyskretnych. W tym przykładzie kodu element popover powiększa się i zmniejsza za pomocą właściwości transform: 'scale()'.

Ten przykład kodu pokazuje, jak zaimplementować animacje wejścia i wyjścia dla interfejsu 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',

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

Aby uwzględnić przeglądarki, które nie obsługują interfejsu popover API, Tokopedia wdrożyła popover-polyfill firmy oddbird, który po skompresowaniu gzipem zajmuje tylko 3,2 KB. Byli zadowoleni z działania polyfilla, ponieważ działał dobrze i nie powodował spadku wydajności. Dzięki interfejsowi popover API udało im się zmniejszyć liczbę wierszy kodu w Reactu nawet o 70%.

Co należy wziąć pod uwagę podczas korzystania z interfejsu Popover API

Tokopedia korzysta z Reacta. Aby podzielić kod, zespół odłączył komponent popovera na stronach, które go nie używają, a potem podzielił kod na zawartość popovera. W ten sposób udało im się zmniejszyć rozmiar początkowego żądania.

Rozważ połączenie wyskakujących okienek z pozycjonowaniem kotwicy CSS (wkrótce dostępne w Chrome), aby umieszczać je względem innych elementów. Jest to przydatne np. w przypadku menu i etykietek.

Zasoby

Zapoznaj się z innymi artykułami z tej serii, aby dowiedzieć się, jak firmy e-commerce korzystały z nowych funkcji CSS i interfejsu, takich jak animacje sterowane przewijaniem, wyskakujące okienka, zapytania dotyczące kontenera i selektor has().