راهنمای جامع ساخت تورهای تعاملی (Guided Tours) در جوملا 6

قابلیت Guided Tours (تورهای راهنما) از نسخه 4.3 وارد هسته جوملا شد و در جوملا 5 و نسخه مدرن جوملا 6 به یکی از قدرتمندترین ابزارهای Onboarding و آموزش گام‌به‌گام به کاربران تبدیل شده است. این ابزار به توسعه‌دهندگان افزونه‌ها و طراحان وب اجازه می‌دهد بدون نوشتن حتی یک خط کد جاوااسکریپت اختصاصی، تورهای تعاملی برای معرفی امکانات جدید یا آموزش پنل کاربری بسازند.

در این مقاله، فرآیند کامل ساخت، پیکربندی مراحل، اتصال به افزونه‌های اختصاصی و استخراج تور برای توزیع در جوملا 6 را بررسی می‌کنیم.

۱. آشنایی با ساختار تورهای راهنما در جوملا

هر تور در جوملا از دو بخش اصلی تشکیل شده است:

1. تور (Tour): تنظیمات والد شامل نام، آدرس شروع (URL)، نقش دسترسی، نحوه شروع (خودکار یا دستی) و شناسه یکتا (UID).
2. مراحل (Steps): گام‌های متوالی شامل توضیحات، نوع گام (پاپ‌آپ توضیحی، فوکوس روی المان، کلیک کاربر، یا فرم ورودی) و موقعیت نمایش کادر راهنما (بالا، پایین، چپ، راست).

۲. ایجاد یک تور جدید در مدیریت جوملا 6

برای شروع:

1. به مسیر System > Manage > Guided Tours (سیستم > مدیریت > تورهای راهنما) بروید.
2. روی دکمه New (جدید) کلیک کنید.

فیلدهای کلیدی در تب Tour:

• Title (عنوان): نام تور که در لیست بالای پیشخوان و منوی تورها دیده می‌شود (مثلاً: راهنمای پیکربندی فروشگاه).
• Identifier (شناسه یکتا): یک نام یکتا به انگلیسی با خط تیره (مثلاً com-myextension-config یا joomla-whatsnew-6-0).
• Component Selector (بخش مرتبط): مشخص می‌کند تور در کدام بخش فعال شود (مثلاً Content, Users, یا Home dashboard).
• Relative URL (آدرس نسبی): آدرسی که تور در آن اجرا می‌شود (مثلاً administrator/index.php?option=com_content&view=articles).
• Autostart (شروع خودکار): اگر روی Yes باشد، کاربر به محض ورود به صفحه مربوطه برای بار اول، تور را مشاهده می‌کند.
• Description (توضیحات کلی): خلاصه‌ای از آنچه کاربر در این تور خواهد آموخت.

۳. تعریف گام‌ها (Steps) و تعامل با UI

پس از ذخیره تور، در همان صفحه یا از لیست گام‌ها، مراحل را اضافه کنید:

پارامترهای هر گام:

• Title (عنوان گام): نام مرحله (مثلاً فیلتر کردن مقالات).
• Target (سلکتور المان هدف): سلکتور CSS المانی که کادر راهنما باید به آن اشاره کند.
  • مثال: #filter_search یا .subhead یا #sidebarmenu nav > ul:first-of-type > li:last-child
  • نکته UI: اگر المان هدف نیاز به اسکرول داشته باشد، سیستم به‌طور خودکار صفحه را اسکرول می‌کند.
• Position (موقعیت کادر): جهت نمایش کادر نسبت به المان (Top, Bottom, Left, Right).
• Interactive Step (گام تعاملی):
  • None / Next Button: کاربر فقط پیام را می‌خواند و روی “بعدی” می‌زند.
  • Wait for Click / Action: تور تا زمانی که کاربر روی المان هدف کلیک نکند (مثلاً باز کردن یک منوی کشویی یا زدن دکمه New) به مرحله بعد نمی‌رود.

۴. تکنیک‌های حرفه‌ای در جوملا 6

الف) استفاده از تصاویر در گام‌ها

در جوملا 6 می‌توانید تصاویر را مستقیماً در ویرایشگر مرحله اضافه کنید. برای پکیج‌های نصبی استاندارد، تصاویر در مسیر زیر قرار می‌گیرند:

media/com_guidedtours/images/{identifier}/

ب) تورهای بین صفحه‌ای (Multi-Page Navigation)

اگر گام اول در صفحه لیست مقالات باشد و گام دوم باز کردن فرم مقاله جدید:

1. در گام اول، هدف را روی دکمه New بگذارید.
2. نوع گام را روی تعامل با کلیک قرار دهید.
3. در گام دوم، فیلد Target URL را روی آدرس ویرایش مقاله (administrator/index.php?option=com_content&view=article&layout=edit) تنظیم کنید. با لود شدن صفحه جدید، تور ادامه می‌یابد.

۵. استخراج و گنجاندن تور در افزونه‌های اختصاصی

برای توزیع تور به همراه قالب یا کامپوننت خود:

۱. استفاده از Guided Tours Toolkit

کامپوننت کمکی Guided Tours Toolkit به شما امکان می‌دهد با کلیک روی Export > SQL + INI Export خروجی استاندارد بگیرید:

• ایجاد فایل‌های ترجمه زبان (.ini)
• تولید کوئری‌های SQL برای جداول #__guidedtours و #__guidedtour_steps

۲. ساختار دیتابیس تورها

در فایل اسکریپت نصب افزونه (install.sql یا اسکریپت آپدیت):

-- ۱. درج والد تور
INSERT INTO `#__guidedtours` (`uid`, `title`, `description`, `url`, `component`, `autostart`, `published`, `access`)
VALUES ('my-custom-tour', 'COM_MYEXTENSION_TOUR_TITLE', 'COM_MYEXTENSION_TOUR_DESC', 'administrator/index.php?option=com_myextension', 1, 1, 1);

-- ۲. درج مراحل بر اساس tour_id
INSERT INTO `#__guidedtour_steps` (`tour_id`, `title`, `description`, `target`, `position`, `step_type`, `ordering`)
SELECT `id`, 'COM_MYEXTENSION_STEP1_TITLE', 'COM_MYEXTENSION_STEP1_DESC', '#toolbar-new', 'bottom', 0, 1
FROM `#__guidedtours` WHERE `uid` = 'my-custom-tour';

۳. فایل‌های زبان

متن‌ها را در مسیر زبان ادمین اضافه کنید (administrator/language/en-GB/guidedtours.my_custom_tour.ini یا فایل زبان اختصاصی کامپوننت):

COM_MYEXTENSION_TOUR_TITLE="شروع کار با کامپوننت من"
COM_MYEXTENSION_TOUR_DESC="این تور شما را با بخش‌های اصلی داشبورد آشنا می‌کند."
COM_MYEXTENSION_STEP1_TITLE="ایجاد رکورد جدید"
COM_MYEXTENSION_STEP1_DESC="برای ثبت اولین آیتم روی این دکمه کلیک کنید."

بهترین الگوها (Best Practices) برای جوملا 6

1. سلکتورهای پایدار بسازید: از کلاس‌های عمومی Bootstrap مثل .btn-primary به تنهایی استفاده نکنید؛ از ID یا سلکتورهای مشخص مثل #toolbar-apply یا [data-bs-target="#collapseSettings"] استفاده کنید تا با تغییرات جزئی CSS شکست نخورند.
2. کوتاه و مفید نگه دارید: تورهای آموزشی نباید بیش از ۵ تا ۷ گام داشته باشند. تورهای چندگانه کوتاه بهتر از یک تور طولانی و خسته‌کننده هستند.
3. تست با تم روشن/تاریک (Light/Dark Mode): کادرهای تور و تصاویر داخل آن را در استایل‌های تم Atum تست کنید تا کنتراست مناسب داشته باشند.
4. رفتار خودکار در آپدیت‌ها: در آپدیت‌های ماژور/مینور، ویژگی autostart را برای نسخه‌های قدیمی‌تر صفر کنید تا کاربر با آپدیت جدید مجدداً تورهای قبلی را نبیند.