กรณีศึกษาของ Popover

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

ป๊อปโอเวอร์มีอยู่ทุกที่บนเว็บ คุณจะเห็นป๊อปโอเวอร์ในเมนู, ท็อกเกิลทิป และกล่องโต้ตอบ ซึ่งใช้สำหรับฟีเจอร์ต่างๆ เช่น การตั้งค่าบัญชี, วิดเจ็ตการเปิดเผยข้อมูล และการแสดงตัวอย่างการ์ดผลิตภัณฑ์ แม้ว่าคอมโพเนนต์เหล่านี้จะแพร่หลายเพียงใด แต่การสร้างคอมโพเนนต์เหล่านี้ในเบราว์เซอร์ก็ยังคงยุ่งยากอย่างน่าประหลาดใจ เพื่อแก้ไขปัญหานี้ ชุด API HTML เชิงประกาศชุดใหม่สำหรับการสร้างป๊อปโอเวอร์กำลังจะเปิดตัวในเบราว์เซอร์ โดย API แรกคือ Popover API

ผู้คนมักสับสนระหว่างป๊อปโอเวอร์กับกล่องโต้ตอบ อย่างไรก็ตาม ป๊อปโอเวอร์และกล่องโต้ตอบมีลักษณะการทำงานที่แตกต่างกันในบางประเด็นสำคัญ องค์ประกอบ dialog ที่เปิดด้วย dialog.showModal (กล่องโต้ตอบแบบโมดัล) เป็นประสบการณ์การใช้งานที่ต้องมีการโต้ตอบของผู้ใช้โดยชัดแจ้งเพื่อ ปิดโมดัล popover รองรับการปิดแบบเบาๆ แต่ dialog แบบโมดัลไม่รองรับ กล่องโต้ตอบแบบโมดัลจะทำให้ส่วนอื่นๆ ของหน้าเว็บไม่สามารถโต้ตอบได้ แต่ popover ไม่เป็นเช่นนั้น อ่านข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่าง

บทความนี้เป็นส่วนหนึ่งของชุดบทความที่พูดถึงวิธีที่บริษัทอีคอมเมิร์ซ ปรับปรุงเว็บไซต์โดยใช้ฟีเจอร์ CSS และ UI ใหม่ๆ ในบทความนี้ คุณจะได้ทราบวิธีที่ Tokopedia ใช้ Popover API และได้รับประโยชน์จาก API ดังกล่าว

Tokopedia

การใช้แอตทริบิวต์ป๊อปโอเวอร์ช่วยลดจำนวนบรรทัดของโค้ดใน React ได้สูงสุด 70% ระบบสามารถควบคุมโมดัลได้โดยตรงผ่าน HTML แทนที่จะต้องจัดการเหตุการณ์ใน JavaScript และใช้ React.createPortal เพื่อย้าย DOM ของโมดัลไปไว้ที่ส่วนท้ายของ document.body นอกจากนี้ เรายังใช้ @starting-style เพื่อสร้างภาพเคลื่อนไหวสำหรับการ เปิดและปิดป๊อปโอเวอร์ได้ด้วย —Andy Wihalim, วิศวกรซอฟต์แวร์ อาวุโส, Tokopedia

หน้ารายละเอียดผลิตภัณฑ์ (PDP) ของ Tokopedia มีรูปภาพผลิตภัณฑ์หลายรูปสำหรับผลิตภัณฑ์แต่ละรายการ เมื่อคลิกภาพขนาดย่อของผลิตภัณฑ์ ระบบจะเปิดโมดัลเพื่อแสดงรูปภาพที่ขยาย ซึ่งเป็นรูปแบบทั่วไปที่ใช้ในเว็บไซต์อีคอมเมิร์ซ

รหัส

Tokopedia ใช้ React ในการพัฒนาส่วนหน้า ก่อนที่จะใช้ Popover API สำหรับโมดัลนี้ Tokopedia ใช้โมดัล DOM และปุ่ม ปุ่มจะเปลี่ยนสถานะ React เพื่อเปิดโมดัล เมื่อใช้ Popover API Tokopedia จะระบุแอตทริบิวต์ popovertarget ในองค์ประกอบที่เปิดป๊อปโอเวอร์ด้วยค่าที่เหมือนกับรหัสขององค์ประกอบป๊อปโอเวอร์

การใช้งานพื้นฐานนี้จะทำให้ป๊อปโอเวอร์ทำงานได้ แต่จะปรากฏและหายไปโดยไม่มีภาพเคลื่อนไหว หากต้องการสร้างภาพเคลื่อนไหวสำหรับการเข้าและออกที่ราบรื่นสำหรับป๊อปโอเวอร์ ให้ใช้ :popover-open และ @starting-style รวมถึงอนุญาตภาพเคลื่อนไหวของพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง ในตัวอย่างโค้ดต่อไปนี้ ป๊อปโอเวอร์จะขยายเข้าและออกโดยใช้ transform: 'scale()'พร็อพเพอร์ตี้

ตัวอย่างโค้ดนี้แสดง วิธีใช้ภาพเคลื่อนไหวสำหรับการเข้าและออกสำหรับ 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,
    },
  },
});

Tokopedia ใช้ popover-polyfill ของ oddbird ซึ่งมีขนาดเพียง 3.2 KB เมื่อบีบอัดด้วย gzip เพื่อรองรับเบราว์เซอร์ที่ไม่รองรับ Popover API Tokopedia พอใจกับ polyfill นี้เนื่องจากทำงานได้ดีและไม่ทำให้เกิดการถดถอยของประสิทธิภาพ โดยรวมแล้ว Tokopedia สามารถลดจำนวนบรรทัดของโค้ดใน React ได้สูงสุด 70% ด้วย Popover API

สิ่งที่ต้องพิจารณาเมื่อใช้ Popover API

Tokopedia ใช้ React และทีมงานได้แยกโค้ดโดยยกเลิกการติดตั้งคอมโพเนนต์ป๊อปโอเวอร์สำหรับหน้าเว็บที่ไม่ได้ใช้ จากนั้นจึงแยกโค้ดสำหรับเนื้อหาป๊อปโอเวอร์ วิธีนี้ช่วยลดขนาดคำขอเริ่มต้นได้

ลองใช้ป๊อปโอเวอร์ร่วมกับการวางตำแหน่ง Anchor CSS (จะเปิดตัวใน Chrome เร็วๆ นี้) เพื่อวางตำแหน่งป๊อปโอเวอร์เทียบกับองค์ประกอบอื่นๆ ซึ่งจะเป็นประโยชน์สำหรับเมนูและทูลทิป เป็นต้น

แหล่งข้อมูล

สำรวจบทความอื่นๆ ในชุดบทความนี้ที่พูดถึงวิธีที่บริษัทอีคอมเมิร์ซได้รับประโยชน์จากการใช้ฟีเจอร์ CSS และ UI ใหม่ๆ เช่น ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน, ป๊อปโอเวอร์, การค้นหาคอนเทนเนอร์ และตัวเลือก has()