وحدة الجولة - أنشئ جولتك الخاصة لموضوع مخصص في دروبال 9

ما الذي يمكن أن يكون أفضل من الجولات المصحوبة بمرشدين عندما تكون في مكان غير مألوف؟

تتحول تجربة المستخدم ببطء إلى النقطة المحورية لكل عمل تجاري. إن تقديم تجربة تساعد في توجيه المستخدم إلى الاتجاه الصحيح من خلال تفاعلات واجهة المستخدم يمكن أن يغير قواعد اللعبة لأي عمل تجاري. سنقوم في هذه المقالة باستكشاف وحدة Tour لـ Drupal 9. باستخدام وحدة Tour ، لا يمكنك فقط القيام بجولة مصحوبة بمرشدين مسبقًا في طريقة عرض موجودة ، بل يمكنك أيضًا دمج وحدة Tour في المظهر المخصص الخاص بك (وهو ما نقوم به سيتم شرحه بالتفصيل لاحقًا).

وحدة دروبال 9 جولة

قد ترغب في تنفيذ وحدة Drupal 9 Tour عندما تريد أن يركز المستخدم بشكل أكبر على مكونات معينة على موقعك تمر دون أن يلاحظها أحد بسهولة. إنه أمر رائع أيضًا عندما تريد أن تأخذ المستخدم من خلال سير عمل إرشادي. تم تضمين وحدة Tour في Drupal core منذ دروبال 8.

عند تمكين الوحدة ، فإنها تقدم جولات إرشادية لواجهة موقع الويب بمساعدة تلميحات الأدوات. للقيام بجولة ، يمكنك تحرير طريقة عرض موجودة في

 /admin/structure/views

وانقر فوق ارتباط "؟ جولة" في الزاوية اليمنى العليا في شريط أدوات المسؤول. يمكنك أيضا زيارة

 /admin/structure/views/view/frontpage?tour=1

لبدء جولة بانوراميات تلقائيًا.

في دروبال 8 ، تم بناء وحدة الجولة على المكون الإضافي Joyride jQuery ، والذي تم إهماله في Drupal 9.2 مع Shepherd.js.

لدينا طريقة أخرى لإضافة جولة للوحدات النمطية وواجهة الإدارة من خلال ملف YML. هنا ، أقوم بإضافة جولة في سمة مخصصة.

ما هو Shepherd.js؟

Shepherd هي مكتبة JavaScript تتيح لك إنشاء جولات إرشادية لتطبيقك أو موقعك الإلكتروني بسهولة. إنها تستفيد من Popper.js ، مكتبة أخرى مفتوحة المصدر ، لعرض مربعات حوار لكل "خطوة" في الجولة.

دمج وحدة الجولة في موضوع مخصص

في دروبال 9 ، لدينا أنواع متعددة من صفحات المحتوى لدمجها:

1. جولة في الصفحة
2. جولة العقدة
3. عرض جولة الخ

لنفترض وجود صفحة لوحة معلومات بها بطاقات متعددة لإظهارها مع جميع الرسوم البيانية والقيم الموجودة فيها كما في الصورة الموضحة أدناه. هنا ، ستسهل الجولة توجيه المستخدمين من خلال البطاقات وإظهار بعض التفاصيل.

اعتمادات الصورة: تصميم لوحة القيادة

إنشاء مكتبة جولة في لوحة المعلومات

متطلبات الجولة:

مطلوب جولة إرشادية للعناصر / البطاقات أدناه

1. نشاط اللياقة
2. دورات جديدة
3. خلق جديد إبداع جديد
4. كسب اليوم
5. عضو نشط
6. مراجعة شهرية
7. نقاط
8. ادفع الآن (زر الإجراء)

الآن ، لدينا إجمالي 8 خطوات. في هذا المثال ، سوف أقوم بإنشاء بعض الخطوات للبدء بها ، وسيستمر النمط نفسه لبقية البطاقات.

لنبدأ.

الخطوة 1: أنشئ مكتبة سياحية على THEME.libraries.yml

أقوم بإنشاء مكتبة مخصصة لجولة في لوحة المعلومات ، حتى نتمكن من تضمينها في صفحة / قالب لوحة المعلومات. على سبيل المثال ، dashboard.html.twig

THEME.libraries.yml

الخطوة 2: قم بتضمين مكتبة جولة لوحة المعلومات في صفحة لوحة المعلومات المخصصة أو قالب العقدة

 {# In a Twig template we attach the library. #}

 {{ attach_library('THEME/dashboard-tour') }}​

الآن ، قمنا بتضمين تبعيات الجولة في موضوعنا.

الخطوة 3: الشروع في استخدام Shepherd.js

لبداية سريعة ، يمكنك الحصول على مثال للكود هنا https://shepherdjs.dev/

تهيئة الراعي

في dashboard.js ، أضف كود التهيئة على النحو التالي

 const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'shadow-md bg-purple-dark', scrollTo: { behavior: 'smooth', block: 'center' } }, useModalOverlay: true, });

لوحة القيادة. js

يتيح لك الخيار defaultStepOptions تحديد أي خيار يجب تطبيقه على جميع خطوات هذه الجولة افتراضيًا.

useModalOverlay هو خيار آخر يمكنك إضافته. يمكنك التحقق من المزيد من خيارات الجولة هنا.

إنشاء خطوات المقدمة

 tour.addStep({ id: 'introduction', text: 'Welcome to Our Dashboard', classes: 'example-step-extra-class', buttons: [ { classes: 'btn btn-primary', text: 'Next', action: tour.next } ] });​

لوحة القيادة. js

هذه نافذة منبثقة للجولة الترحيبية ، لذلك لا نقوم بتعيين أي عنصر هدف مستهدف (مثل فئة أو معرف). سيظهر هذا كرسالة ترحيب منبثقة في وسط الصفحة.

لدينا المزيد من طرق الجولات التي ستتعمق أكثر في الخطوة التالية.

إنشاء الخطوة الثانية - نشاط اللياقة

 tour.addStep( { id: 'activity', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.', attachTo: { element: '.class-activity', on: 'bottom' }, classes: 'example-step-extra-class', buttons: [ { action() { return this.back(); }, classes: 'btn btn-primary', text: 'Back' }, { action() { return this.next(); }, classes: 'btn btn-primary', text: 'Next' } ] });

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

• المعرّف: السلسلة المراد استخدامها كمعرّف للخطوة. إذا لم يتم تمرير معرف سيتم إنشاء واحد.
• النص: النص الموجود في نص الخطوة. يمكن أن يكون أحد ثلاثة أنواع:

◦ سلسلة HTML
◦ كائن HTMLElement
يتم تنفيذ الوظيفة عند بناء الخطوة. يجب أن ترجع أحد الخيارين أعلاه.

• العنوان: عنوان الخطوة. يصبح h3 في الجزء العلوي من الخطوة.
• attachTo: العنصر الذي يجب إرفاق الخطوة به على الصفحة. كائن مع عنصر خصائص وعلى.

◦ element: سلسلة محدد عنصر أو عنصر DOM.
◦ on: الاتجاه الاختياري لوضع تلميح Popper بالنسبة للعنصر.

• قيم السلاسل المحتملة: "auto" ، "auto-start" ، "auto-end" ، "top" ، "top-start" ، "top-end" ، "bottom" ، "bottom-start" ، و bottom-end '،' right '،' right-start '،' right-end '،' left '،' left-start '،' left-end '

إذا لم تحدد أحد المرفقات ، فسيظهر العنصر في منتصف الشاشة.

• خيارات CancelIcon لرمز الإلغاء

◦ ممكن هل يجب أن يظهر إلغاء "" في رأس الخطوة؟
◦ التسمية التسمية المراد إضافتها لتسمية aria

• الفئات: سلسلة من الفئات الإضافية لإضافتها إلى عنصر محتوى الخطوة.
• الأزرار: مجموعة من الأزرار لإضافتها إلى الخطوة. سيتم عرضها في تذييل أسفل النص الأساسي الرئيسي. كل زر في المصفوفة هو كائن من التنسيق:

◦ text: نص HTML الخاص بالزر
◦ الفصول: فئات إضافية لتطبيقها على <a>
◦ الإجراء: وظيفة يتم تنفيذها عند النقر فوق الزر. يتم ربطه تلقائيًا بالجولة التي تقترن بها الخطوة ، لذا ستعمل أشياء مثل this.next داخل الإجراء.

إنشاء الخطوة الثالثة: دورات جديدة

لإبقاء هذه المقالة قصيرة ، لا أقوم بإضافة المزيد من الخطوات هنا. يمكننا اتباع الخطوات المذكورة أعلاه لإنشاء أكبر عدد من الخطوات المطلوبة هنا. بعد إنشاء جميع الخطوات ، سنبدأ الجولة أخيرًا.

لبدء الجولة ، ما عليك سوى الاتصال ببدء مثيل جولتك:

 tour.start();

هتافات!! لقد أضفنا الآن جولة للوحة القيادة.

ملاحظة: تابع واتبع جميع الأساليب والأحداث والخيارات المتاحة للحصول على جولة Shepherd Tour تفاعلية.