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

Swetha Gopalakrishnan

Saurabh Rajpal

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

النافذة المنبثقة هي جزء من البيانات الأساسية المتوفّرة حديثًا.

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

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

Tokopedia

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

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

الرمز

تستخدم Tokopedia مكتبة React لتطوير الواجهة الأمامية. قبل تنفيذ واجهة برمجة التطبيقات popover API لهذا النافذة المنبثقة، استخدم الفريق نافذة منبثقة DOM وزرًا. غيّر الزر حالة React لفتح النافذة المنبثقة. باستخدام واجهة برمجة التطبيقات popover 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',

  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.2 كيلوبايت بعد ضغط gzip. وكانوا راضين عن الpolyfill لأنّه كان يعمل بشكل جيد ولم يتسبب في تراجع الأداء. بشكل عام، تمكّنت الشركة من تقليل عدد أسطر الرمز البرمجي في React بنسبة تصل إلى% 70 باستخدام واجهة برمجة التطبيقات popover API.

نقاط يجب مراعاتها عند استخدام Popover API

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

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

الموارد

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

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

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