Studi kasus Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Popover ada di mana-mana di web. Anda dapat melihatnya di menu, tips, dan dialog, yang digunakan untuk fitur seperti setelan akun, widget pengungkapan, dan pratinjau kartu produk. Terlepas dari betapa lazimnya komponen ini, membangunnya di browser ternyata masih rumit. Untuk mengatasi hal ini, serangkaian API HTML deklaratif untuk membangun popover akan segera hadir di browser, yang pertama ini adalah Popover API.

Popover adalah bagian dari Baseline Newly Available.

Dukungan Browser

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

Sumber

{i>Popover<i} biasanya bingung dengan dialog. Namun, ada beberapa perbedaan perilaku mereka. Elemen dialog dibuka dengan dialog.showModal (dialog modal), merupakan pengalaman yang memerlukan interaksi pengguna tutup modal. popover mendukung penutupan ringan. Modal dialog tidak. Dialog modal akan membuat bagian lain halaman inert. popover tidak demikian. Baca selengkapnya tentang perbedaannya.

Artikel ini merupakan bagian dari rangkaian yang membahas bagaimana perusahaan e-commerce meningkatkan situs web mereka menggunakan fitur CSS dan UI baru. Dalam artikel ini, temukan bagaimana Tokopedia mengimplementasikan dan memanfaatkan Popover API.

Tokopedia

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

Halaman Detail Produk (PDP) Tokopedia berisi beberapa gambar produk untuk masing-masing Google. Saat thumbnail produk diklik, sebuah modal akan terbuka untuk menampilkan gambar yang diperbesar. Pola 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 API popover, mereka menentukan Atribut popovertarget dalam elemen yang membuka popover dengan nilai yang sama dengan ID elemen {i>popover<i}.

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

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

Untuk mengakomodasi browser yang tidak mendukung API popover, Tokopedia menerapkan popover-polyfill oleh {i>crazybird<i}, yaitu hanya 3,2 KB dengan kompresi gzip. Mereka puas dengan polyfill karena bekerja dengan baik dan tidak menyebabkan regresi kinerja. Secara keseluruhan, mereka mampu mengurangi hingga 70% baris kode di React dengan API popover.

Hal-hal yang perlu dipertimbangkan saat menggunakan Popover API

Tokopedia menggunakan React, dan tim melakukan pemisahan kode dengan melepas {i>popover<i} untuk laman yang tidak menggunakannya, kemudian melakukan pemisahan kode untuk konten pop-up. Dengan cara ini, mereka mengurangi ukuran permintaan awal.

Pertimbangkan untuk menggabungkan popover dengan penempatan anchor CSS (segera hadir di Chrome) untuk memosisikannya relatif terhadap elemen lain. Ini berguna untuk menu dan tooltip misalnya.

Resource

Pelajari artikel lain dalam seri ini yang membahas tentang bagaimana e-commerce perusahaan mendapatkan keuntungan dari penggunaan fitur CSS dan UI baru seperti berbasis Scroll animasi, popover, kueri container, dan pemilih has().