หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

Popup เป็นส่วนหนึ่งของฟีเจอร์ใหม่ใน Baseline

การรองรับเบราว์เซอร์

แหล่งที่มา

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

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

Tokopedia

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

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

รหัส

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

การใช้งานพื้นฐานนี้ทําให้ป๊อปอัปทํางานแต่จะปรากฏและหายไปโดยไม่มีภาพเคลื่อนไหว หากต้องการสร้างภาพเคลื่อนไหวที่ราบรื่นเมื่อเปิดและปิดป๊อปอัป ให้ใช้ :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 ที่มีการบีบอัด gzip เพียง 3.2 KB เพื่อรองรับเบราว์เซอร์ที่ไม่รองรับ popover API ลูกค้าพอใจกับ polyfill เนื่องจากทำงานได้ดีและไม่ทำให้ประสิทธิภาพลดลง โดยรวมแล้ว ทีมสามารถลดจำนวนบรรทัดโค้ดใน React ได้ถึง 70% ด้วย popover API

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

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

แหล่งข้อมูล

ขอแนะนํา popover API
ความแตกต่างระหว่างป๊อปอัปกับกล่องโต้ตอบ
คุณต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ใหม่ไหม เราอยากฟังความคิดเห็นจากคุณ

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