Studi kasus Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Pop-up ada di mana-mana di web. Anda dapat melihatnya di menu, toggletip, dan dialog, yang digunakan untuk fitur seperti setelan akun, widget pengungkapan, dan pratinjau kartu produk. Meskipun komponen ini sudah umum, mem-build-nya di browser masih terasa rumit. Untuk mengatasi hal ini, serangkaian API HTML deklaratif baru untuk membuat popover akan hadir di browser, yang pertama adalah Popover API.

Popover adalah bagian dari Dasar Pengukuran yang Baru Tersedia.

Dukungan Browser

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

Sumber

Pop-up biasanya disalahartikan sebagai dialog. Namun, ada beberapa perbedaan utama dalam perilakunya. Elemen dialog yang dibuka dengan dialog.showModal (dialog modal), adalah pengalaman yang memerlukan interaksi pengguna eksplisit untuk menutup modal. popover mendukung penutupan ringan. dialog modal tidak. Dialog modal membuat bagian lain halaman tidak aktif. popover tidak. Baca selengkapnya tentang perbedaannya.

Artikel ini merupakan bagian dari seri yang membahas cara perusahaan e-commerce meningkatkan kualitas situs mereka menggunakan fitur CSS dan UI baru. Dalam artikel ini, temukan cara Tokopedia menerapkan dan mendapatkan manfaat dari Popover API.

Tokopedia

Penggunaan atribut pop-up mengurangi hingga 70% baris kode di React. Modal dapat dikontrol secara native oleh HTML, bukan memerlukan penanganan peristiwa di JavaScript dan menggunakan React.createPortal untuk memindahkan DOM modal ke akhir document.body. Kita juga dapat menggunakan @starting-style untuk menganimasikan pembukaan dan penutupan popover.—Andy Wihalim, Software Engineer Senior, Tokopedia.

Halaman Detail Produk (PDP) Tokopedia berisi beberapa gambar produk untuk setiap produk. Saat thumbnail produk diklik, modal akan terbuka untuk menampilkan gambar yang diperbesar. Ini adalah pola umum yang digunakan di situs e-commerce.

Kode

Tokopedia menggunakan React untuk pengembangan frontend mereka. Sebelum menerapkan popover API untuk modal ini, mereka menggunakan modal DOM dan tombol. Tombol mengubah status React untuk membuka modal. Dengan popover API, atribut ini menentukan atribut popovertarget dalam elemen yang membuka popover dengan nilai yang sama dengan ID elemen popover.

Dengan penerapan dasar ini, popover berfungsi, tetapi muncul dan menghilang tanpa animasi apa pun. Untuk membuat animasi masuk dan keluar yang lancar untuk popover, gunakan :popover-open dan @starting-style serta izinkan animasi properti terpisah. Pada contoh kode berikut, popover diskalakan masuk dan keluar menggunakan properti transform: 'scale()'.

Contoh kode ini menunjukkan cara menerapkan animasi masuk dan keluar untuk 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,
    },
  },
});

Untuk memenuhi kebutuhan browser yang tidak mendukung popover API, Tokopedia menerapkan popover-polyfill oleh oddbird, yang hanya berukuran 3,2 KB dengan kompresi gzip. Mereka puas dengan polyfill karena berfungsi dengan baik dan tidak menyebabkan regresi performa. Secara keseluruhan, mereka dapat mengurangi hingga 70% baris kode di React dengan popover API.

Hal-hal yang perlu dipertimbangkan saat menggunakan Popover API

Tokopedia menggunakan React, dan timnya mencapai pemisahan kode dengan melepas komponen pop-up untuk halaman yang tidak menggunakannya, lalu melakukan pemisahan kode untuk konten pop-up. Dengan cara ini, mereka mengurangi ukuran permintaan awal.

Pertimbangkan untuk menggabungkan popover dengan pemosisian anchor CSS (segera hadir di Chrome) untuk memosisikan popover secara relatif terhadap elemen lain. Hal ini berguna untuk menu dan tooltip, misalnya.

Resource

Pelajari artikel lain dalam seri ini yang membahas manfaat yang diperoleh perusahaan e-commerce dari penggunaan fitur CSS dan UI baru seperti animasi yang didorong Scroll, popover, kueri penampung, dan pemilih has().