איך לסגור תפריט Off-Canvas בעת לחיצה על קישורי עוגן

Off-Canvas הוא אלמנט עיצובי נפוץ שמאפשר להציג תוכן נוסף – כמו תפריטי ניווט, Table of contents, מסננים, פרטי יצירת קשר או ווידג'טים אינטראקטיבים אחרים – מחוץ למסגרת הראשית של הדף. וידג'ט Off-Canvas של אלמנטור פרו ניתן לעיצוב כך שייפתח על חלק מהמסך או על כולו, ואפשר להגדיר לו בקלות אנימציות כניסה ויציאה. צריך להגדיר לו טריגר – כפתורים שבלחיצה עליהם הoff-canvas ייפתח או ייסגר, וגם זה פשוט בהחלט. בקיצור – Off-Canvas הוא וידג'ט שימושי בטירוף.

אם אתם רוצים הרבה גמישות עיצובית בתפריט נפתח (במובייל למשל) ואפשרויות העיצוב בתפריט הרגיל של אלמנטור פרו ממש לא מספקות אתכם, בטח כבר השתמשתם בעצמכם ב-Off-Canvas. חלק מהתכונות של Off-Canvas מזכירות מעט פופאפ, אבל ההבדל המרכזי הוא שפופאפ נפתח לרוב בעצמו, לפי תנאי שהוגדר לו, ואילו Off-canvas נפתח בגלל אינטראקציה מפורשת של המשתמש (לחיצה על כפתור פתיחה).

אלא שכאשר משתמשים בקישורי עוגן בתוך Off-Canvas נתקלים בבעיה: בעוד שקישורי עוגן עובדים כראוי בתפריטים רגילים, הם יוצרים בעיה כשהם נמצאים בתוך Off-Canvas.

למה קישור עוגן ב-Off-Canvas לא עובד כמו שצריך?

נניח שיש לכם תפריט ניווט עם קישורי עוגן בתוך Off-Canvas. המשתמש לוחץ על קישור שמוביל לחלק אחר בעמוד, אבל התפריט נשאר פתוח ומכסה את התוכן. עכשיו הוא צריך ללחוץ בנפרד על כפתור הסגירה של ה Off-canvas – חוויה מתסכלת ומיותרת. אם ה Off-canvas מכסה את רוב שטח המסך החוויה הופכת למבלבלת אפילו יותר – המשתמש עשוי להרגיש שהלחיצה שלו לא עשתה כלום, ולנסות ללחוץ פעם נוספת.

הפתרון: קוד שמטפל נכון בקישורי עוגן ב-Off-Canvas. הקוד הבא מאזין ללחיצות על קישורי עוגן בתוך אלמנט הOff-canvas, ומוודא שהתפריט ייסגר לאחר הלחיצה.

רגע, מה זה קישור עוגן?

קישור עוגן הוא קישור שלא מעביר את המשתמש לדף אחר אלא גולל את הדף לאזור מסויים או לאלמנט מסויים בתוכו.

הסקריפט לסגירה אוטומטית של Off-canvas:

הוסיפו לאתר את הסקריפט הבא (באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):

<script>
jQuery(document).ready(function($) {
    // Listens for clicks on anchor links (#...) inside .e-off-canvas, excluding links meant to close the Off Canvas. 
    // Finds the nearest Off Canvas parent, extracts its ID, and triggers the Elementor toggle event to open/close it dynamically.
    $(document).on('click', '.e-off-canvas a[href^="#"]', function() {
        let linkHref = $(this).attr('href');

        // Ignore links with the specific action to close the Off Canvas
        if (linkHref.startsWith('#elementor-action')) {
            return;
        }

        // Ignore links with any parent '.prevent-anchor-close'
        if ($(this).closest('.prevent-anchor-close').length) {
            return;
        }

        // Find the closest Off Canvas parent of the clicked link
        let offCanvas = $(this).closest('.e-off-canvas');
        let offCanvasId = offCanvas.attr('id')?.replace('off-canvas-', '');
        if (!offCanvasId) {
            console.warn('Could not determine Off Canvas ID.');
            return;
        }

        // Create and dispatch a native event to toggle the Off Canvas display
        let eventDetail = {
        id: offCanvasId,
        displayMode: 'toggle',
        previousEvent: {}
        };

        let toggleEvent = new CustomEvent('elementor-pro/off-canvas/toggle-display-mode', { detail: eventDetail });

        window.dispatchEvent(toggleEvent);
    });
});
</script>

מה עושים אם הקוד הזה מפריע?

אם נתקלתם במצב שהקוד הזה מפריע לשימוש תקין בוידג'ט מסויים בתוך הOff-canvas תוכלו להחריג את הוידג'ט הזה: הוסיפו לוידג'ט או לקונטיינר שעוטף אותו את הקלאס prevent-anchor-close (מתקדם > CSS Classes).

זה יכול להיות שימושי ולסדר כל מיני מקרי קצה כמו וידג'ט סינון מוצרים שמשתמש בקישורים (אלמנט HTML מסוג <A>) למרות שהפעולה שלו אינה באמת קישור (אלא סינון).

איך תדעו אם אתם צריכים להחריג וידג'ט? אם כאשר אתם מנסים לעשות פעולה מסויימת הOff canvas נסגר בלי שרציתם – כנראה שאתם צריכים להחריג את הוידג'ט הרלוונטי.

איך הקוד עובד?

1. מאזין ללחיצות על קישורים שמתחילים בסימן # בתוך האלמנט e-off-canvas (סימן # הוא הסימן בו מתחילים קישורי עוגן).
2. מתעלם מקישורים שמתחילים ב"#elementor-action" ומעידים על כך שאותו קישור-כפתור נועד כנראה לסגירת הOff-canvas.
3. מתעלם מקישורים שנמצאים תחת וידג'ט או אזור עם הקלאס prevent-anchor-close שמעיד על מקרה מוחרג בו אין צורך לסגור את הOff canvas.
4. מוצא את ה-Off Canvas הרלוונטי של הקישור שנלחץ.
5. שולח אירוע סגירה (toggle) ל-Off Canvas כך שייסגר באופן תקין.

סיכום

אם תפריט ה-Off Canvas שלך מכיל קישורי עוגן, חשוב לוודא שהם לא רק מבצעים גלילה, אלא גם סוגרים את התפריט לאחר הלחיצה. הקוד המוצע פותר את הבעיה על ידי שליחת אירוע מותאם אישית שמפעיל את המנגנון של Elementor לסגירת Off Canvas.

כך חוויית המשתמש נשארת חלקה ונוחה, בלי הצורך לסגור את התפריט ידנית אחרי כל לחיצה.

להסבר על השימוש הבסיסי בוידג'ט Off-canvas