וויקס קוד (VELO) למתחילים - מדריך כתוב וסרטון הסבר

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

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

מה זה וויקס קוד (VELO), למה אנחנו צריכים אותו ולמי הוא מיועד?

אחד הכלים החזקים בארגז הכלים של וויקס, הוא שפת התכנות VELO.

שפת ה- VELO, לשעבר CORVID, פותחה ע"י וויקס במטרה לאפשר לבוני אתרים לעצב ולערוך אלמנטים שונים באתר שלהם באופן מותאם אישית, שלא מתאפשר בשימוש הסטנדרטי במערכת. שפת ה- VELO מבוססת על ג'אווה סקריפט ו- NODE.JS.

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

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

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

אז… אתם מוזמנים לפתוח את ה- Dev Mode שלכם (בתפריט הראשי בתוך העורך, פשוט לחצו על "turn on dev mode") ואתם מוכנים לצאת לדרך!

רוצים לדלג על כל ההסברים ולקפוץ ישר לקטע הקוד הדרוש לכם? קבלו קישורים זריזים:

• קוד להצגת תאריך ושעה עכשיו

• קוד להפיכת כפתור למושבת (disables) לאחר לחיצה עליו ושינוי הטקסט המופיע עליו

• קוד להשהייה של הצגת אלמנט במעבר לעמוד חדש

• קוד למעבר בין States ב- MULTI STATE BOX

• קוד שמאפשר להעתיק מידע לקליפבורד (כמו לחיצה על Ctrl+C) כאשר הגולש לוחץ על כפתור

• קוד המאפשר בדיקה של סוג המכשיר שבו גולש המשתמש - ולהראות\להסתיר אלמנט לפי התוצאה

• קוד להטענה מקדימה לדפים (prefetchPageResources)

• קוד לשינוי נראות הדף לפי המקור ממנו הגיע המשתמש

• כפתור חזרה (back) ברחבי האתר

שלב 1: מושגים בסיסיים בתכנות

ספריות

ספריה היא אסופה של קטעי קוד, שבדר"כ מישהו אחר הכין לנו, וארז אותה כדי לחסוך לנו לכתוב קוד מסובך. במאמר הזה אנחנו נשתמש בספריות שוויקס הכינו לנו. הדרך להוסיף ספריה לקוד זה באמצעות המילה import , והמקום של הספריות בתוך הקוד - הוא תמיד בשורות העליונות ביותר בקוד. אף פעם לא בתוך פונקציה. חשוב לזכור את זה כאשר אנחנו מעתיקים קוד שמישהו אחר כתב - תמיד לקחת את השורות שמתחילות במילה IMPORT , ולשים במעלה הקוד.

פונקציות

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

1. פונקציה פתיחה (on-ready): פונקציה שנוצרת באופן אוטומטי בכל עמוד חדש שיוצרים בוויקס. ככה נראית פונקצית הפתיחה:

$w.onReady(function () {

})

הפונקציה הזאת רצה ברגע שהעמוד נטען, וכל קוד שתכניסו לתוכה (בין הסוגריים המסולסלים) ירוץ ישר לאחר טעינת הדף. מומלץ שבתוך הקוד בעמוד הפונקציה הזאת תופיע רק פעם אחת. חשוב לדעת שכשיוצרים קוד באתר, צריך להגדיר האם הוא ירוץ כשהדף נפתח או בתגובה לאירוע ספציפי כלשהו.

2. פונקצית אירוע: פונקציה שמוגדרת כך שהיא רצה כשקורה משהו. למשל: כשלוחצים על כפתור, הקוד בתוך הפונקציה יפעל.

3. פונקציה רגילה: פונקציה שנכתבת כדי לשמור על סדר ושהקוד יעבוד באופן יעיל.

שינוי שמות ID

לכל אלמנט בעורך יש שם ID ייחודי משלו (אלמנט הוא כל דבר שאנחנו מוספיםי: קטע טקסט, תמונה, כפתור, גלריה וכו'). ה- ID מאפשר לנו להבין על איזה אלמנט פועל הקוד, ואז ניתן לשנות אותו או לייצר אירוע כאשר משהו קורה. כאשר אנחנו מעתיקים קוד, בין אם מספריית הקוד של וויקס או ממקום אחר, חשוב מאוד לשנות את ה- ID בקוד ל- ID של האלמנט שלנו, כדי שהקוד "יבין" על אילו אלמנטים באתר שלנו אנחנו רוצים שהוא יפעל. לדוגמא, הקוד הבא משנה את צבע הרקע של האלמנט מסוג כפתור:

$w("#myElement").style.backgroundColor = "rgba(255,0,0,0.5)";

בקוד שבדוגמא מופיע ה- ID תחת השם "myElement"' ואותו אנחנו צריכים לשנות לשם של האלמנט כפי שהוא מופיע אצלנו.

איך מוצאים את שם ה- ID של האלמנטים באתר שלנו? כאשר ה- dev mode דלוק, לחיצת עכבר על כל אלמנט מסמנת אותו, ובחלקו העליון מופיעים שני סימונים קטנים- אחד הוא סוג האלמנט (text' button, image) והשני הוא ה- ID, אשר מתחיל בסולמית (#). לחיצה על properties & events (תחת tools) תאפשר לכם לערוך את ה- ID.

הוספת אירועים (EVENTS)

באותו תפריט שבו אנחנו משנים את שם האלמנט אנחנו גם יכולים להגדיר אירועים שיקרו כאשר המשתמש עשה פעולה (דוגמאות לפעולה: לחיצת עכבר על אלמנט, מעבר עם העכבר על אלמנט). בתמונה המצורפת (?) אנחנו רואים בחלק העליון את האפשרויות להחליט האם הכפתור פועל או לא באופן דיפולטי, והאם הוא ממוזער, או נסתר בעת עליית העמוד. מתחת לתיבות האלה, יש לנו מגוון אירועים שלהם נוכל להוסיף קוד בעת שייקרו. לאלמנטים שונים יכולים להופיע אירועים אפשריים שונים.

לקרוא באנגלית!

הדבר האחרון שחשוב לדעת כשעובדים עם VELO, הוא לדעת לקרוא אנגלית, ולא להתעצל. וויקס הכינו לנו הרבה מאוד מידע בנוגע לכתיבת קוד בוויקס, ומוסבר שם באופן מפורט איך הפעולה מתבצעת, ומה היא עושה. אם נמהר להעתיק את הקוד ולהדביק, אל לנו להתפלא שדברים לא עובדים - Read The F***** Manual!

שלב 2: הטמעת קטעי קוד באתר הוויקס שלכם

איפה מתחילים? איפה מוצאים בכלל קטעי קוד של וויקס?

כל הדוגמאות במאמר זה לקוחות מתוך אזור הדוקמנטציה של וויקס . באזור הדוקומנטציה יש מידע מפורט הכולל טקסטים ודוגמאות של קטעי קוד שימושיים. האיזור מחולק לסיפריות- ספריה היא אוסף של פונקציות השייכות לנושא מסויים - למשל בספריית WIX BOOKING יש פונקציות שקשורות לאפליקצית BOOKING, כך שיקל עליכם לחפש את הקוד שאתם זקוקים לו. מומלץ מאוד להיכנס לאזור הדוקומנטציה, להסתכל ולגלות אילו דברים ניתן לעשות באמצעות קוד.

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

קוד להצגת תאריך ושעה עכשיו:

let now = new Date()
let today = String(now.getDate()) + "/"+ String(now.getMonth()+1) + "/" + String(now.getFullYear())
let time = String(now.getHours())+ ":"+ String(now.getMinutes())
$w('#DateTime').text = today + " , " + time

קוד להפיכת כפתור למושבת (disables) לאחר לחיצה עליו ושינוי הטקסט המופיע עליו:

$w('#button').onClick(()=>{
    $w('#button').label = "נשלח"
    $w('#button').disable()
})

קוד להשהייה של הצגת אלמנט במעבר לעמוד חדש:

בדוגמא הספציפית הזו, יש השהייה של 3000 אלפיות שניות (3 שניות) ולאחריהן הצגת אלמנט מסוג טקסט שהיה מוסתר בעת טעינת העמוד:

setTimeout(function(){$w('#text').show()}, 3000);

למתקדמים : אפשר באופן דומה להוסף קוד אשר חוזר על עצמו במחזוריות של זמן מוגדר

setInterval(function(){$w('#text').show()}, 3000);

קוד למעבר בין States ב- MULTI STATE BOX:

אחד האלמנטים החביבים עלי בוויקס הוא המולטי-סטייט בוקס. זוהי קופסא שאפשר לייצר לה מספר מצבים (states) שונים, ולהציג מידע מתחלף באותו אזור בעמוד. ניתן באמצעות פיצ'ר זה לעשות למשל שאלון, תהליך קניה מותאם, להשתמש בו לבניית אתר רב לשוני (כמו שמודגם פה) ועוד.

הקוד שאתם צריכים כדי להחליף בין המצבים הוא:

$w('#statebox8').changeState('state2'); 

וכמובן לא לשכוח לשנות את הID , ואת שם הState.

עכשיו נעבור לחלק השני של הדוגמאות- דוגמאות שימושיות לקטעי קוד מתוך כמה מספריות הקוד של וויקס:

דוגמאות לקטעי קוד שימושיים מתוך ספריית וויקס ווינדוס:

כדי לייבא קטעי קוד מתיקייה זו, יש ראשית לכתוב:

import wixWindow from 'wix-window';

קוד שמחליף תצוגה בסידור הדף לפי תצוגה עברית\אנגלית\שפה אחרת

הקוד הזה מאפשר להציג תצוגה שונה עבור שפות שונות, במקרה הזה עברית ואנגלית, וכך בעצם ניתן לעצב באופן מתקדם ומותאם לכיוון השפה, דבר שמשפר חוויית משתשים באתר בעל שפות רבות.

import wixWindow from 'wix-window'; 

let language = wixWindow.multilingual.currentLanguage; // "en"/"he"
if (language  === "he")
    { $w("#statebox8").changeState("he")}
else
    { $w("#statebox8").changeState("en")}

חשוב כמובן לזכור להחליף את "myelement#" למשתנה שלכם.

קוד שמאפשר להעתיק מידע לקליפבורד (כמו לחיצה על Ctrl+C) כאשר הגולש לוחץ על כפתור:

import wixWindow from 'wix-window';  

$w("#myElement").onClick (()=>{
   wixWindow.copyToClipboard("Text to copy!")
   .then( () => {
         $w("#myElement").label =  "העותק!"
         } )
  } )

במקרה הספציפי הזה, הטקסט על הכפתור הוא "Text to copy!" ולאחר העתקת הטקסט הטקסט בכפתור משתנה ל"הכתובת הועתקה". חשוב כמובן לזכור להחליף את "myelement#" למשתנה שלכם.

קוד המאפשר בדיקה של סוג המכשיר שבו גולש המשתמש - ולהראות\להסתיר אלמנט לפי התוצאה:

הקוד הזה מאפשר להציג או להסתיר אלמנטים מסויימים בסוגי מכשירים שונים, וכך בעצם ניתן לאפיין את תצוגת הדסקטופ והמובייל באופנים נפרדים, דבר שמשפר חוויית משתשים, SEO ועוד. בדוגמה הספציפית שמוצגת כאן, אם המכשיר הוא Mobile אזי הגולש יראה את האלמנט (myElement):

import wixWindow from 'wix-window'; 

let formFactor = wixWindow.formFactor; // "Mobile"/"Desktop"/"Tablet"
if (formFactor  === "Mobile")
    { $w("#myElement").show()}
else
    {  $w("#myElement").hide()}

חשוב כמובן לזכור להחליף את "myelement#" למשתנה שלכם.

דוגמאות לקטעי קוד שימושיים מספריית וויקס סייט

כדי לייבא קטעי קוד מתיקייה זו, יש ראשית לכתוב:

import wixSite from 'wix-site';

קוד להטענה מקדימה לדפים (prefetchPageResources)

זוהי פונקציה באמצעותה אנחנו יכולים לטעון מראש את העמוד/ים שאנחנו מצפים שהגולשים שלנו יגלשו אליהם. אם אנחנו יודעים, למשל, שהגולש שלנו נמצא בעמוד שממנו יש מעבר עם כפתור ל"קרא עוד", יש סיכוי סביר שהגולש ילחץ על הכפתור ויגיע לעמוד ההמשך. טעינה מראש של העמוד השני משפרת על חוויית המשתמשים, ויכולה לסייע אף להמרות באתר (במידה ומדובר בעמודי מכירה או יצירת קשר).

import wixSite from 'wix-site';

 wixSite.prefetchPageResources( {
   "lightboxes": ["First Box", "Second Box"],
   "pages": ["/first-page", "/second-page"]} );

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

דוגמאות לקטעי קוד שימושיים מספריית וויקס סייט

כדי לייבא קטעי קוד מתיקייה זו, יש ראשית לכתוב:

import wixLocation from 'wix-location';

קוד לשינוי נראות הדף לפי המקור ממנו הגיע המשתמש

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

מwww.mysite.com ל www.mysite.com?Lead=Facebook ואז נוסיף את הקוד הבא:

import wixLocation from 'wix-location';

let Query = wixLocation.query;
let Lead = Query.Lead
if (Lead==="Facebook")
{
    $w('#statebox8').changeState("Facebook")
}
else
{
    $w('#statebox8').changeState("Defulte")
}

כפתור חזרה (back) ברחבי האתר

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

הקוד מחולק לשני חלקים; את הקוד הראשון נשים בדף שבו נמצא הכפתור:

import wixLocation from 'wix-location';
import {local} from'wix-storage';

$w("#Button").onClick(() => {
    wixLocation.to (local.getItem("lastpage")) 
})

ואת הקוד השני נוסיף לקובץ MasterPage.js אשר נמצא בתחתית התפריט הדפים של המפתחים אשר נמצא בצד שמאל של המסך.

import {local} from 'wix-storage';
import wixLocation from 'wix-location';

  local.setItem("lastpage", local.getItem("page"));
  local.setItem("page", wixLocation.url);

שלב 3: טיפים של אלופים לשימוש בוויקס קוד

לסיום, אשתף אתכם בכמה דברים שהיכרות איתם תסייע לכם בשלבים הראשונים של העבודה עם מערכת הקוד של וויקס:

טיפים על התמודדות עם הודעות שגיאה (ERRORS) בקוד

הודעות שגיאה מוצגות כנקודה אדומה ליד השורה רלוונטית. נעבור על השגיאות הנפוצות ביותר:

• פונקציה בתוך פונקציה: כאשר אנחנו מעתיקים קוד, חייבים לשים לב שאם מופיעה המילה function - זה חייב להיות מחוץ לכל פונקציה אחרת.

• סוגרים לא מותאמים: בהרבה קטעי קוד, ובכל פונקציה יש סוגרים רגילים, מסולסלים ומרובעים. לכל סוגר פותח צריך להיות סוגר סוגר - הרבה מהשגיאות שעולות זה כי מוחקים בטעות אחד מהסוגרים. - בדר"כ ההודעת שגיאה תיהיה unexpected … כי העורך לא מצפה לראות את הקוד המסויים לפני שהסוגרים נסגרים.

• הכרזה על ספריה לא במקום: אם השורה של הכרזה על ספריה (שמתחילה ב-IMPORT ) לא נמצאת בראש העמוד, תעלה הודעת שגיאה.

• שימוש ב- ID של אלמנט לא נכון: במקרה בו העתקתם קוד ושכחתם לשנות את ה- ID בקוד כך שיתאים ל- ID של האלמנט באתר שלכם.

טיפים לגבי שימוש בעורך הקוד של וויקס

בעורך קוד של וויקס יש השלמת טקסט אוטומטית, ככה שאם נקרא לאלמנט מסויים בדף:

$w(“#elementid”). 

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

סרטון ובו המחשת ההטמעה של כל קטעי הקוד המופיעים במדריך

כמה מילים לסיכום

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

אם בכל זאת אתם מתקשים עם קוד מסויים, או זקוקים לעבודת קוד מורכבת יותר, אתם יותר ממוזמנים ליצור קשר.