دراسات حالة نافذة منبثقة

Swetha Gopalakrishnan

Saurabh Rajpal

النوافذ المنبثقة موجودة في كل مكان على الويب. يمكنك رؤيتها في القوائم، ونصائح التبديل، ومربّعات الحوار، تُستخدَم في ميزات مثل إعدادات الحساب، والتطبيقات المصغّرة لبيان الإفصاح، معاينات بطاقات المنتجات. وعلى الرغم من مدى انتشار هذه المكونات، فإن إنشاؤها في المتصفحات لا يزال مرهقًا على نحو مدهش. لحل هذه المشكلة، تحتاج مجموعة جديدة من ستتوفر واجهات برمجة تطبيقات HTML البيانية لإنشاء نوافذ منبثقة في المتصفحات، وهو أول وهي Popover API.

العناصر المنبثقة هي جزء من الإصدار المرجعي المتوفّر حديثًا.

عادةً ما يتم الخلط بين النافذة المنبثقة ومربع الحوار. ومع ذلك، هناك بعض الجوانب الاختلافات في سلوكهم. تم فتح عنصر dialog باستخدام dialog.showModal (مربع حوار مشروط)، هو تجربة تتطلب تفاعلاً صريحًا من المستخدم أغلق النافذة المشروطة. تتيح popover ميزة الإغلاق الفاتح. ولا ينطبق ذلك على نمط dialog. يجعل مربع الحوار المشروط بقية الصفحة غير نشطة. أما popover، فلا يعني ذلك. مزيد من المعلومات عن الاختلافات

هذه المقالة جزء من سلسلة تناقش كيفية استخدام شركات التجارة الإلكترونية. موقعها على الويب باستخدام ميزات CSS وواجهة المستخدم الجديدة. في هذه المقالة، اكتشف كيفية تنفيذ شركة Tokopedia لواجهة برمجة التطبيقات Popover API والاستفادة منها.

Tokopedia

يؤدي استخدام سمات النوافذ المنبثقة إلى تقليل ما يصل إلى% 70 من أسطر الرمز في React. النموذج يمكن التحكم فيها في الأصل باستخدام HTML بدلاً من طلب معالجة الأحداث في JavaScript واستخدام React.createPortal لنقل نموذج DOM المشروط إلى نهاية document.body يمكننا أيضًا استخدام @starting-style لتحريك فتح وإغلاق النافذة المنبثقة. - آندي ويهاليم، كبير الخبراء في مجال البرمجيات مهندسة، Tokopedia.

تحتوي صفحات تفاصيل المنتجات (PDP) على Tokopedia على صور منتجات متعددة لكل منها. المنتج. عندما ينقر المستخدم على الصورة المصغّرة للمنتج، يتم فتح مربّع لعرض تكبير الخريطة. وهذا نمط شائع الاستخدام في مواقع التجارة الإلكترونية.

الرمز

تستخدم Tokopedia برنامج React لتطوير واجهتها الأمامية. قبل تنفيذ في هذه الواجهة، استخدموا نموذج DOM وزرًا. الزر غيرت حالة React لفتح النافذة المشروطة. باستخدام واجهة برمجة تطبيقات المنبثق، تحدد السمة popovertarget في العنصر الذي يفتح النافذة المنبثقة ذات قيمة هو نفس معرف عنصر المنبثق.

باستخدام هذا التنفيذ الأساسي، يعمل النافذة المنبثقة ولكنه يظهر ويختفي بدون أي رسوم متحركة. لإنشاء دخول وخروج سلس للصور المتحركة النافذة المنبثقة، استخدِم :popover-open و@starting-style للسماح بالرسم المتحرك وخصائص منفصلة. في مثال التعليمة البرمجية التالي، يتدرج النافذة المنبثقة داخل وخارج باستخدام transform: 'scale()'.

يعرض هذا مثال الرمز البرمجي كيفية تنفيذ الرسوم المتحركة للإدخال والخروج في واجهة برمجة تطبيقات المنبثق.

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

لتلبية احتياجات المتصفحات التي لا تتوافق مع واجهة برمجة التطبيقات الخاص بالعناصر المنبثقة، نفّذت Tokopedia popover-polyfill من oddbird، وهو فقط 3.2 كيلوبايت مع ضغط gzip. كان راضٍ عن خطأ polyfill لأنّها سارت بشكل جيد ولم تتسبّب في تراجع في الأداء بشكل عام، كانت في React، من خلال خفض ما يصل إلى% 70 من عدد سطور الرمز باستخدام واجهة برمجة التطبيقاتpopover API.

أمور يجب مراعاتها عند استخدام Popover API

تستخدم شركة Tokopedia أداة React، ونجح الفريق في تقسيم الرموز البرمجية من خلال إلغاء تثبيت للصفحات التي لا تستخدمها، ثم يتم تقسيم الرمز المحتوى المنبثق. بهذه الطريقة، قام بتقليل حجم طلبه الأولي.

دمج النوافذ المنبثقة مع موضع ارتساء CSS (قريبًا على Chrome) لوضعها بالنسبة للعناصر الأخرى. ويُعدّ هذا الإجراء مفيدًا للقوائم والتلميحات مثلاً.

الموارد

• التعريف بواجهة برمجة التطبيقات الخاصة بـPopover
• الفرق بين النافذة المنبثقة ومربّع الحوار
• هل تريد الإبلاغ عن خطأ أو طلب ميزة جديدة؟ تهمّنا معرفة رأيك.

اطّلِع على المقالات الأخرى في هذه السلسلة التي تتناول أهمية التجارة الإلكترونية شركة من استخدام ميزات CSS وواجهة المستخدم الجديدة مثل التمرير والرسوم المتحركة والنافذة المنبثقة وطلبات بحث الحاوية وأداة الاختيار has().

• ما سبب أهمية إمكانات واجهة مستخدم الويب بالنسبة إلى موقع التجارة الإلكترونية الخاص بك؟
• دراسات حالة حول الصور المتحركة المستندة إلى التمرير
• الاطّلاع على دراسات حالة حول عمليات النقل
• دراسات حالة حول طلبات البحث في الحاويات
• :has() أداة اختيار دراسات الحالة