מקרים לדוגמה בחלון קופץ

Swetha Gopalakrishnan

Saurabh Rajpal

חלונות קופצים נמצאים בכל מקום באינטרנט. אפשר לראות אותם בתפריטים, בטיפים להחלפת מצב ובתיבות דו-שיח, שמשמשים לתכונות כמו הגדרות החשבון, ווידג'טים של גילוי נאות ותצוגה מקדימה של כרטיסי מוצרים. למרות שהרכיבים האלה נפוצים מאוד, עדיין קשה מאוד לפתח אותם בדפדפנים. כדי לפתור את הבעיה הזו, אנחנו מוסיפים לדפדפנים קבוצה חדשה של ממשקי API להצהרת HTML ליצירת חלונות קופצים. הראשון מביניהם הוא Popover API.

חלון קופץ הוא חלק מ-Baseline Newly Available (זמין ב-Baseline Newly).

בדרך כלל מתבלבלים בין חלון קופץ לבין תיבת דו-שיח. עם זאת, יש כמה הבדלים חשובים בהתנהגות שלהם. רכיב dialog שנפתח באמצעות dialog.showModal (תיבת דו-שיח מודלית) הוא חוויה שמחייבת אינטראקציה מפורשת של המשתמש כדי לסגור את התיבה המודלית. ב-popover יש תמיכה בביטול קל. מודל dialog לא עושה זאת. תיבת דו-שיח מודלית משביתה את שאר הדף. popover לא. מידע נוסף על ההבדלים

המאמר הזה הוא חלק מסדרה שמתארת איך חברות מסחר אלקטרוני שיפרו את האתר שלהן באמצעות תכונות חדשות של CSS וממשק משתמש. במאמר הזה נסביר איך Tokopedia הטמיעה את Popover API ומה היתרונות שהיא נהנתה מהם.

Tokopedia

השימוש במאפייני חלון קופץ הפחית עד 70% של שורות קוד ב-React. אפשר לשלוט בחלון הדו-שיח באופן מקורי באמצעות HTML, במקום לדרוש טיפול באירועים ב-JavaScript ולהשתמש ב-React.createPortal כדי להעביר את ה-DOM של חלון הדו-שיח לסוף document.body. אפשר גם להשתמש ב-@starting-style כדי ליצור אנימציה לפתיחה ולסגירה של חלון הקופץ. – Andy Wihalim, מהנדס תוכנה בכיר, Tokopedia.

דפי פרטי המוצרים (PDP) ב-Tokopedia מכילים כמה תמונות של כל מוצר. כשלוחצים על התמונה הממוזערת של המוצר, נפתח חלון קופץ שבו מוצגת התמונה המוגדלת. זהו דפוס נפוץ באתרי מסחר אלקטרוני.

קוד

ב-Tokopedia משתמשים ב-React לפיתוח הקצה הקדמי. לפני שהטמיעו את ה-API של חלון הקופץ במודל הזה, הם השתמשו במודל DOM ובלחצן. הלחצן שינה את מצב React כדי לפתוח את החלון המודאלי. באמצעות ה-API של חלון הקופץ, הם מציינים מאפיין popovertarget ברכיב שפותח את חלון הקופץ עם ערך זהה למזהה של רכיב חלון הקופץ.

באמצעות ההטמעה הבסיסית הזו, החלון הקופץ פועל אבל מופיע ונעלם ללא אנימציה. כדי ליצור אנימציה חלקה של כניסה ויציאה לחלון הקופץ, משתמשים ב-:popover-open וב-@starting-style ומאפשרים אנימציה של מאפיינים נפרדים. בדוגמת הקוד הבאה, ה-popover נעשה גדול יותר או קטן יותר באמצעות המאפיין 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,
    },
  },
});

כדי לשרת דפדפנים שלא תומכים ב-API של חלון קופץ, Tokopedia הטמיעה את popover-polyfill של לעיתים קרובות, בגודל 3.2KB בלבד עם דחיסת gzip. הם היו מרוצים מה-polyfill כי הוא עבד טוב ולא גרם לנסיגה בביצועים. בסך הכול, הם הצליחו לצמצם עד 70% משורות הקוד ב-React באמצעות ה-API של חלון קופץ.

שיקולים לשימוש ב-Popover API

ב-Tokopedia משתמשים ב-React, והצוות הצליח לפצל את הקוד על ידי ניתוק הרכיב של חלון הקופץ בדפים שלא משתמשים בו, ולאחר מכן ביצע פיצול קוד של תוכן חלון הקופץ. כך הם צמצמו את גודל הבקשה הראשונית.

כדאי לשלב חלונות קופצים עם מיקום עוגן ב-CSS (בקרוב ב-Chrome) כדי למקם אותם ביחס לרכיבים אחרים. למשל, אפשר להשתמש בהגדרה הזו בתפריטים ובתיאורים של כלים.

משאבים

• השקה של popover API
• ההבדל בין חלון קופץ לבין תיבת דו-שיח
• רוצה לדווח על באג או לבקש תכונה חדשה? אנחנו רוצים לשמוע ממך.

כדאי לקרוא את המאמרים הנוספים בסדרה הזו שמראים איך חברות למסחר אלקטרוני הפיקו תועלת מהשימוש בתכונות חדשות של CSS ושל ממשק המשתמש כמו אנימציות מבוססות-גלילה, חלון קופץ, שאילתות קונטיינרים והבורר has().

• למה היכולות של ממשק המשתמש באינטרנט חשובות לאתר המסחר האלקטרוני?
• מקרים לדוגמה של אנימציות מבוססות גלילה
• הצגת מקרים לדוגמה של מעברים
• מקרים לדוגמה של שאילתות קונטיינר
• מקרים לדוגמה לבורר ‎:has()