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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

<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()‎