hopscotch ליצירת סיור באתר שלכם

רכיב ג׳אווהסקריפטי ממש פשוט ליצירת הסברים/מדריכים באתר שלכם

לא מזמן קיבלתי משימה מעניינת בעבודה – ליצור walk through. סוג של סיור שבו אני מציג יכולות שאנחנו מוסיפים למוצר שאני מפתח. הרעיון הוא לאפשר ללקוחות להבין פיצ׳רים יותר טוב. יש לא מעט ספריות שעושות את זה. אני בחרתי ב-hopscotch ואני הולך לדבר עליה בפוסט הזה. מדובר בספריה פשוטה ממש לשימוש. כל כך פשוטה שלהטמיע אותה לוקח דקות.

אז איך זה עובד? מדובר בספרית ג׳אווהסקריפט ו-CSS. כדי להשתמש בה, צריך לכלול את שני הקבצים של הספריה אצלכם.


<link rel="stylesheet" href="css/hopscotch.css"></link>
<script src="js/hopscotch.js"></script>

אם יש לכם webpack, אז בהחלט אפשר להשתמש ב npm כדי להשתמש בה. ברגע שהכנסתם את המודול הזה, אפשר להשתמש ב-import. או ב require.ensure אם אתם רוצים לעשות lazyload ולטעון את הקבצים רק במידה ומדובר בלקוח חדש (למשל)

למשל, פה:


  loadHopScotch() {
    return new Promise((resolve) => {
      require.ensure(['hopscotch'], (require) => {
        const hopscotch = require('hopscotch/dist/js/hopscotch.js');
        require('hopscotch/dist/css/hopscotch.css');
        resolve(hopscotch);
      });
    });
  }

או, אם אתם משתמשים ב-q:


  loadHopScotch() {
    const deferred = this.q.defer();
    require.ensure(['hopscotch'], (require) => {
      const hopscotch = require('hopscotch/dist/js/hopscotch.js');
      require('hopscotch/dist/css/hopscotch.css');
      deferred.resolve(hopscotch);
    });
    return deferred.promise;
  }

אבל זה כמובן לא חובה. אם אתם משתמשים באתר פשוט תכניסו את הקבצים הארורים.

עכשיו נשאר לכתוב את הקוד!. בגדול, אם השתמשתם ב-lazyload שהראיתי לעיל עם webpack, אז הוא מחזיר אובייקט hopscotch, אבל אם הכללתם את הקבצים, יהיה לכם אובייקט ב-window.

יצירת הסיור היא בעצם אובייקט ג׳אווהסקריפטי שנראה ככה:


const tour = {
                id: 'hello-internet-israel',
                steps: [
                    {
                        title: 'הסבר ראשוני',
                        content: 'בפסקת הפתיחה אני מקשקש על הספריה הזו ומסביר מה אני הולך להדגים',
                        target: 'interintro',
                        placement: 'left'
                    },
                    {
                        title: 'קוד שצריך להכניס',
                        content: 'יש פה המון קוד אבל הוא ארוז יפה ואפשר להכניס אותו בקלות',
                        target: '.some-class',
                        placement: 'bottom'
                    },
                    {
                        title: 'וובפאק',
                        content: 'כאן אני מכניס המון בלגן שרלוונטי למי שיש לו וובפאק שאורז את האפליקציה שלו',
                        target: 'webpack-info',
                        placement: 'top'
                    }
                ]
            };
window.hopscotch.startTour(tour);

די פשוט, לא? הדבר הכי חשוב הוא id שחייבים אותו. ה-target יכול להיות מחרוזת טקסט של id או class. ה-title הוא הכותרת וה-content הוא התוכן של החלון. מה שנשאר לעשות זה לבחור איפה חלונית ההסבר תופיע ופיניטו לה קומדיה. לוקחים את האובייקט הזה וקוראים למתודת startTour של hopscotch וזהו! פשוט מאוד. אפשר לראות שהתמיכה ב-RTL עדיין לא קיימת, למרות שאפשר להתגבר על זה עם קצת CSS והנושא בטיפול.

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

פוסטים נוספים שכדאי לקרוא

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

הסבר על טכניקה פשוטה וידועה מאד שאנו מפעילים על מידע לפני שאנחנו מציגים אותו ב-HTML באפליקציה או באתר.

פייתון

קבצי קונפיגורציה בפואטרי

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

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

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

גלילה לראש העמוד