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

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

แหล่งที่มา

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

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

Tokopedia

การใช้แอตทริบิวต์ป๊อปอัปช่วยลดบรรทัดของโค้ดใน 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()