Studia przypadków Popover

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

Wyskakujące okienka są wszędzie w internecie. Możesz je zobaczyć w menu, podpowiedziach i oknach, które są używane w przypadku takich funkcji jak ustawienia konta, widżety ujawniania informacji i podglądy kart produktów. Pomimo tego, jak powszechne są te komponenty, ich tworzenie w przeglądarkach jest nadal zaskakująco uciążliwe. Aby rozwiązać ten problem, w przeglądarkach pojawi się nowy zestaw deklaratywnych interfejsów HTML API do tworzenia wyskakujących okienek. Pierwszym z nich jest interfejs Popover API.

Wyskakujące okienko jest często mylone z oknem. Istnieją jednak pewne kluczowe różnice w ich zachowaniu. Element dialog otwarty za pomocą dialog.showModal (okno modalne) wymaga wyraźnej interakcji użytkownika, aby zamknąć okno modalne. Element popover obsługuje lekkie zamykanie. Okno modalne dialog nie. Okno modalne sprawia, że reszta strony staje się nieaktywna. Element popover nie. Więcej informacji o różnicach.

Ten artykuł jest częścią serii, w której omawiamy, jak firmy e-commerce ulepszyły swoje witryny za pomocą nowych funkcji CSS i interfejsu. Z tego artykułu dowiesz się, jak Tokopedia wdrożyła interfejs Popover API i jakie korzyści z niego czerpała.

Tokopedia

Użycie atrybutów wyskakujących okienek zmniejszyło liczbę wierszy kodu w React o 70%. Okno modalne może być natywnie sterowane przez HTML, zamiast wymagać obsługi zdarzeń w JavaScript i używania React.createPortal do przenoszenia DOM okna modalnego na koniec document.body. Możemy też używać @starting-style do animowania otwierania i zamykania wyskakującego okienka – Andy Wihalim, starszy inżynier oprogramowania w Tokopedia.

Strony szczegółów produktu w Tokopedia zawierają kilka zdjęć każdego produktu. Gdy klikniesz miniaturę produktu, otworzy się okno modalne z powiększonym zdjęciem. Jest to powszechny wzorzec stosowany w witrynach e-commerce.

Kod

Tokopedia używa React do tworzenia interfejsu. Zanim wdrożyli interfejs Popover API w tym oknie modalnym, używali okna modalnego DOM i przycisku. Przycisk zmieniał stan React, aby otworzyć okno modalne. Dzięki interfejsowi Popover API określają atrybut popovertarget w elemencie, który otwiera wyskakujące okienko, z wartością, która jest taka sama jak identyfikator elementu wyskakującego okienka.

W 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 wyskakującego okienka, użyj :popover-open i @starting-style oraz zezwól na animację dyskretnych właściwości. W poniższym przykładzie kodu wyskakujące okienko jest skalowane za pomocą właściwości transform: 'scale()'.

Ten przykład kodu pokazuje jak zaimplementować animacje wejścia i wyjścia w interfejsie 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 obsługiwać przeglądarki, które nie obsługują interfejsu Popover API, Tokopedia wdrożyła popover-polyfill firmy oddbird, który po kompresji gzip ma tylko 3,2 KB. Byli zadowoleni z polyfill, ponieważ działał dobrze i nie powodował regresji wydajności. Dzięki interfejsowi Popover API udało im się zmniejszyć liczbę wierszy kodu w React o 70%.

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

Tokopedia używa React, a zespół osiągnął podział kodu, odmontowując komponent wyskakującego okienka na stronach, które go nie używają, a następnie dzieląc kod na zawartość wyskakującego okienka. W ten sposób zmniejszyli rozmiar początkowego żądania.

Rozważ połączenie wyskakujących okienek z pozycjonowaniem za pomocą CSS (wkrótce w Chrome) aby umieszczać je względem innych elementów. Jest to przydatne na przykład w przypadku menu i podpowiedzi.

Zasoby

Zapoznaj się z innymi artykułami z tej serii, w których opisujemy, jak firmy e-commerce korzystały z nowych funkcji CSS i interfejsu, takich jak animacje oparte na przewijaniu, wyskakujące okienka, zapytania o kontenery i selektor has().