Studia przypadków Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Pudła są wszędzie w sieci. 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 Popup 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

Popover jest często mylony z oknem. Występują jednak pewne kluczowe różnice w ich działaniu. Element dialog otwarty za pomocą dialog.showModal (okna modalne) to doświadczenie, które wymaga wyraźnej interakcji użytkownika w celu zamknięcia okna. popover obsługuje funkcję light-dismiss. Moduł dialog nie działa. 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 z niego skorzystał.

Tokopedia

Dzięki zastosowaniu atrybutów popover udało się zmniejszyć liczbę wierszy kodu w React nawet o 70%. Okno modalne może być sterowane natywnie przez kod HTML, zamiast wymagać obsługi zdarzeń w JavaScript i używania elementu React.createPortal do przeniesienia elementu DOM okna modalnego na koniec elementu document.body. Możemy też użyć @starting-style, aby animować otwieranie i zamykanie 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, w którym widać powiększone zdjęcie. Jest to typowy wzór używany w witrynach e-commerce.

Kod

Tokopedia używa narzędzia React do programowania frontendu. 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 przypadku tej podstawowej implementacji wyskakujące okienko działa, ale znika bez animacji. Aby utworzyć płynną animację wejścia i wyjścia dla wyskakującego okienka, użyj atrybutów :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 dostosować się do przeglądarek, które nie obsługują interfejsu API typu popover, Tokopedia wdrożyła funkcję popover-polyfill firmy oddbird, która w przypadku kompresji gzip zajmuje tylko 3,2 KB. Byli zadowoleni z działania polyfilla, ponieważ działał dobrze i nie powodował spadku wydajności. Ogólnie udało im się zmniejszyć liczbę wierszy kodu w React za pomocą interfejsu popover API nawet o 70%.

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

Tokopedia korzysta z React. 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) w celu umieszczenia ich 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 kontenera i selektor has().