Studia przypadków Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Popovery są wszędzie w sieci. Możesz je zobaczyć w menu, na przełącznikach i w oknach używanych w funkcjach takich jak ustawienia konta, widżety powiadomień i podgląd kart produktów. Pomimo tego, że są one tak powszechne, tworzenie ich w przeglądarkach jest nadal zaskakująco niewygodne. Aby rozwiązać ten problem, wkrótce wprowadzimy do przeglądarek nowy zestaw deklaratywnych interfejsów API HTML do tworzenia wyskakujących okienek. Pierwszymi z nich będzie Popover API.

Wyskakujące okienko jest częścią kampanii Baseline Newly available.

Obsługa przeglądarek

  • 114
  • 114
  • 125
  • 17

Źródło

Wyskakujące okienko jest często mylone z oknem. Istnieją jednak pewne zasadnicze różnice w ich zachowaniu. Element dialog otwarty za pomocą dialog.showModal (okno modalne) to doświadczenie, które wymaga wyraźnej interakcji użytkownika w celu zamknięcia okna. popover obsługuje wyłączanie światła. Element modalny dialog tego nie robi. Okno modalne sprawia, że reszta strony jest bezwładna. popover tego nie robi. Więcej informacji o różnicach

Ten artykuł jest częścią serii, która opisuje, 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 i wykorzystała interfejs Popover API.

Tokopedia

Zastosowanie atrybutów wyskakującego okienka zredukowało do 70% wierszy kodu w React. Elementem modalnym można sterować natywnie przez kod HTML, zamiast wymagać obsługi zdarzeń w języku JavaScript oraz używać elementu React.createPortal do przenoszenia modalnego DOM na koniec elementu document.body. Możemy też użyć narzędzia @starting-style do animacji otwarcia i zamknięcia wyskakującego okienka. – Andy Wihalim, starszy inżynier oprogramowania w Tokopedii.

Strony z informacjami o produkcie firmy Tokopedia zawierają wiele zdjęć każdego produktu. Po kliknięciu miniatury produktu otwiera się okno z powiększonym obrazem. To wzorzec często używany w witrynach e-commerce.

Kod

Tokopedia używa React do programowania frontendu. Przed wdrożeniem interfejsu Popover API w tym widoku użyliśmy okna DOM i przycisku. Ten przycisk zmienił stan reakcji, aby otworzyć okno modalne. Za pomocą interfejsu API popover określają atrybut popovertarget w elemencie, który otwiera wyskakujące okienko z wartością taką samą jak identyfikator elementu popover.

Przy takiej 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 elementów :popover-open i @starting-style oraz zezwól na animację właściwości dyskretnych. W poniższym przykładowym kodzie wyskakujące okienko skaluje się do wewnątrz i w górę za pomocą właściwości transform: 'scale()'.

Ten przykładowy kod pokazuje, jak wdrożyć animacje wejścia i wyjścia dla interfejsu 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,
  },
});

Aby zaspokoić potrzeby przeglądarek, które nie obsługują interfejsu API popover, firma Tokopedia wdrożyła popover-polyfill przez firmę oddbird, który ma rozmiar 3,2 KB po zastosowaniu kompresji gzip. Byli zadowoleni z polyfill, ponieważ sprawdzał się i nie spowodował pogorszenia wydajności. Ogólnie udało się im ograniczyć do 70% wierszy kodu w React za pomocą wyskakującego interfejsu API.

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

Zespół Tokopedii wykorzystał React, a zespół przeprowadził podział kodu przez odłączenie komponentu popover ze stron, które go nie używają, a następnie podział kodu dla treści popover. W ten sposób zmniejszyły się rozmiary początkowego żądania.

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

Zasoby

Zapoznaj się z innymi artykułami z tej serii, które przedstawiają korzyści dla firm z branży e-commerce dzięki zastosowaniu nowych funkcji CSS i interfejsu, takich jak animacje przewijane, wyskakujące okienka, zapytania o kontenery i selektor has().