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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

חלון קופץ הוא חלק מBaseline Newly Available.

תמיכה בדפדפנים

  • Chrome: ‏ 114.
  • Edge: 114.
  • Firefox: ‏ 125.
  • Safari: 17.

מקור

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

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

Tokopedia

השימוש במאפייני חלון קופץ צמצם את מספר שורות הקוד ב-React ב-70%. אפשר לשלוט בחלון הדו-שיח באופן מקורי באמצעות 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,
    },
  },
});

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

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

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

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

משאבים

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