ป๊อปอัปมีอยู่ทุกที่บนเว็บ คุณสามารถดูรหัสได้ในเมนู เคล็ดลับการเปิด/ปิด และกล่องโต้ตอบ ซึ่งใช้สำหรับฟีเจอร์ต่างๆ เช่น การตั้งค่าบัญชี วิดเจ็ตการเปิดเผย และการแสดงตัวอย่างการ์ดผลิตภัณฑ์ ถึงแม้ว่าองค์ประกอบเหล่านี้จะแพร่หลายมาก แต่การสร้าง ในเบราว์เซอร์ก็ยังคงยุ่งยากอย่างไม่น่าเชื่อ เพื่อแก้ไขปัญหานี้ HTML API ที่มีการประกาศชุดใหม่สำหรับการสร้างป๊อปอัปจะพร้อมใช้งานในเบราว์เซอร์ โดยเครื่องมือแรกคือ Popover API
Popover เป็นส่วนหนึ่งของราคาพื้นฐานเพิ่งพร้อมให้ใช้งาน
ผู้คนมักสับสนป๊อปอัปกับกล่องโต้ตอบ แต่ก็มีความแตกต่างที่สำคัญ
บางอย่างในลักษณะการทำงาน องค์ประกอบ dialog ที่เปิดด้วย dialog.showModal (กล่องโต้ตอบโมดัล) เป็นประสบการณ์ที่ต้องมีการโต้ตอบของผู้ใช้อย่างชัดแจ้งเพื่อปิดโมดัลนี้ popover รองรับการปิดแสง แต่ dialog จะไม่ดำเนินการดังกล่าว
กล่องโต้ตอบโมดัลทำให้ส่วนที่เหลือของหน้าไม่มีการเปลี่ยนแปลง แต่ popover ไม่ได้ทำเช่นนั้น
อ่านเพิ่มเติมเกี่ยวกับความแตกต่าง
บทความนี้เป็นส่วนหนึ่งของซีรีส์ที่กล่าวถึงวิธีที่บริษัทอีคอมเมิร์ซเพิ่มประสิทธิภาพเว็บไซต์โดยใช้ฟีเจอร์ CSS และ UI ใหม่ ในบทความนี้ คุณจะได้ทราบวิธีใช้งานและใช้ประโยชน์จาก Popover API
โทโกพีเดีย
การใช้แอตทริบิวต์ป๊อปอัปช่วยลดบรรทัดโค้ดได้ถึง 70% ใน React โมดัลนี้จะควบคุมได้ด้วย HTML แบบเดิม แทนที่จะต้องใช้การจัดการเหตุการณ์ใน JavaScript และใช้
React.createPortalสำหรับการย้าย DOM โมดัลไปยังจุดสิ้นสุดของdocument.bodyนอกจากนี้ เรายังใช้@starting-styleเพื่อสร้างภาพเคลื่อนไหวจากการเปิดและการปิดป๊อปอัปได้ด้วย Andy Wihalim วิศวกรซอฟต์แวร์ระดับอาวุโสของ Tokopedia
หน้ารายละเอียดผลิตภัณฑ์ (PDP) ของ Tokopedia มีรูปภาพผลิตภัณฑ์หลายรายการสำหรับแต่ละผลิตภัณฑ์ เมื่อคลิกภาพขนาดย่อของผลิตภัณฑ์ ระบบจะเปิดโมดัลเพื่อแสดงรูปภาพที่ขยายใหญ่ นี่เป็นรูปแบบที่ใช้กันทั่วไปในเว็บไซต์อีคอมเมิร์ซ
รหัส
Tokopedia ใช้ React ในการพัฒนาฟรอนท์เอนด์ ก่อนที่จะใช้ 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,
},
});
เพื่อรองรับเบราว์เซอร์ที่ไม่รองรับป๊อปอัป API ทาง Tokopedia ใช้ popover-polyfill โดย oddbird ซึ่งมีขนาดเพียง 3.2 KB ที่มีการบีบอัด gzip พวกเขาพอใจกับ Polyfill เพราะทำงานได้ดีและไม่ทำให้ประสิทธิภาพถดถอย โดยรวมแล้ว แพลตฟอร์มเหล่านี้สามารถลดบรรทัดโค้ด ได้สูงสุด 70% ใน React ด้วย API แบบป๊อปอัป
สิ่งที่ควรพิจารณาเมื่อใช้ Popover API
Tokopedia ใช้ React และทีมงานแยกโค้ดได้โดยยกเลิกการต่อเชื่อมคอมโพเนนต์ป๊อปโอเวอร์สำหรับหน้าที่ไม่ได้ใช้ จากนั้นแยกโค้ดสำหรับเนื้อหาป๊อปอัป ด้วยวิธีนี้ พวกเขาจะลดขนาดคำขอเริ่มต้น
ลองรวมป๊อปโอเวอร์เข้ากับการวางตำแหน่ง Anchor ของ CSS (เร็วๆ นี้) เพื่อจัดตำแหน่งให้สัมพันธ์กับองค์ประกอบอื่นๆ ซึ่งจะเป็นประโยชน์สำหรับเมนูและเคล็ดลับเครื่องมือ เช่น
แหล่งข้อมูล
- ขอแนะนำ API แบบป๊อปอัป
- ความแตกต่างระหว่างป๊อปอัปและกล่องโต้ตอบ
- คุณต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ใหม่ เราอยากฟังความคิดเห็นจากคุณ
อ่านบทความอื่นๆ ในชุดนี้ที่กล่าวถึงประโยชน์ที่ได้จากการใช้ฟีเจอร์ CSS และ UI ใหม่ๆ เช่น ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน การแสดงหน้าต่างป็อปโอเวอร์ การค้นหาคอนเทนเนอร์ และตัวเลือก has()