บนเว็บมีป๊อปอัปอยู่ทุกที่ โดยคุณจะเห็นไอคอนเหล่านี้ในเมนู เคล็ดลับการเปิด/ปิด และกล่องโต้ตอบ ซึ่งใช้สำหรับฟีเจอร์ต่างๆ เช่น การตั้งค่าบัญชี วิดเจ็ตการเปิดเผยข้อมูล และตัวอย่างการ์ดผลิตภัณฑ์ แม้ว่าคอมโพเนนต์เหล่านี้จะแพร่หลายเพียงใด แต่การสร้างคอมโพเนนต์เหล่านี้ในเบราว์เซอร์ยังคงเป็นเรื่องยุ่งยากอย่างน่าประหลาดใจ เพื่อแก้ไขปัญหานี้ เบราว์เซอร์ต่างๆ กำลังจะมีชุด 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
สิ่งที่ควรพิจารณาเมื่อใช้ Popover API
Tokopedia ใช้ React และทีมสามารถแยกโค้ดได้โดยการนำคอมโพเนนต์ popover ออกจากหน้าเว็บที่ไม่ได้ใช้ จากนั้นจึงแยกโค้ดสำหรับเนื้อหา popover วิธีนี้ช่วยลดขนาดของคำขอเริ่มต้น
ลองใช้ร่วมกันกับการวางตำแหน่งองค์ประกอบยึดของ CSS (จะพร้อมใช้งานใน Chrome เร็วๆ นี้) เพื่อวางตำแหน่งแบบสัมพันธ์กับองค์ประกอบอื่นๆ ซึ่งมีประโยชน์สำหรับเมนูและเคล็ดลับเครื่องมือ
แหล่งข้อมูล
- ขอแนะนํา popover API
- ความแตกต่างระหว่างป๊อปอัปกับกล่องโต้ตอบ
- คุณต้องการรายงานข้อบกพร่องหรือขอฟีเจอร์ใหม่ไหม เราอยากฟังความคิดเห็นจากคุณ
อ่านบทความอื่นๆ ในชุดนี้ซึ่งพูดถึงวิธีที่บริษัทอีคอมเมิร์ซได้รับประโยชน์จากการใช้ฟีเจอร์ CSS และ UI ใหม่ๆ เช่น ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน ข้อความป๊อปอัป การค้นหาคอนเทนเนอร์ และตัวเลือก has()