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

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

ป๊อปอัปเป็นส่วนหนึ่งของเกณฑ์พื้นฐานใหม่

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

แหล่งที่มา

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

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

Tokopedia

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

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

รหัส

Tokopedia ใช้ React สำหรับการพัฒนาฟรอนท์เอนด์ ก่อนติดตั้งใช้งาน Popover API สำหรับโมดัลนี้ พวกเขาใช้โมดัล DOM และปุ่ม ปุ่ม เปลี่ยนสถานะรีแอ็กชันเป็นเปิดโมดัล API แบบป๊อปอัปจะระบุ แอตทริบิวต์ 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',

  '@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,
  },
});

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

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

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

แหล่งข้อมูล

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

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