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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

تظهر النوافذ المنبثقة في كل مكان على الويب. يمكنك رؤيتها في القوائم والنصائح المنبثقة ومربّعات الحوار، وتُستخدم لميزات مثل إعدادات الحساب وعناصر واجهة المستخدم التي تعرض معلومات إضافية ومعاينات بطاقات المنتجات. على الرغم من مدى انتشار هذه المكوّنات، لا يزال إنشاؤها في المتصفّحات أمرًا صعبًا بشكل مفاجئ. لحلّ هذه المشكلة، ستتوفر في المتصفّحات مجموعة جديدة من واجهات برمجة التطبيقات الإعلانية المستندة إلى 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 لتحريك فتح النافذة المنبثقة وإغلاقها.—Andy Wihalim، مهندس برامج أول، 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، وتمكّن الفريق من تقسيم الرمز عن طريق إلغاء تحميل مكوّن النافذة المنبثقة للصفحات التي لا تستخدمه، ثم تقسيم الرمز لمحتوى النافذة المنبثقة. بهذه الطريقة، قلّلوا حجم الطلب الأولي.

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

الموارد

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