היי חברים,
היום, אני רוצה לעזור לכם להטמיע פונקציה שתייעל את חוויית המשתמש באתר שלכם!
בפוסט הבא אשתף אותכם בדרך קלה וקצרה שבא נוכל להציג לגולש באתר שלנו לייטבוקס פעם אחת בכל פרק זמן מסויים.
למי שלא מכיר, לייטבוקס (Lightbox) זו הוריאציה הוויקסית של 'פופ-אפ' - מודעה שקופצת לנו באתר על כל המסך או חלקו.
מדריך כתוב נמצא למטה.
מדריך וידאו:
מדריך כתוב
למעשה מה שאתם צריכים לעשות בשביל הפעיל את האופציה הזו הוא מאד פשוט!
צרו לייטבוקס מתאים.
בדקו בהגדרות שלו שהוא לא מוגדר להופיע באופן אוטומטי (שאין לו טריגר או דף מסויים).
רחפו עם העכבר על הלשונית למעלה שכתוב עליה Dev Mode והדליקו את הסוויצ' של האופציה Enable Developer Mode
כעת, הקליקו על הHeader שלכם. (Header זה השם של האזור העליון של האתר שחוזר על עצמו בכל הדפים השונים).
שימו לב שבחלק התחתון מצד ימין מופיע כפתור בשם Open masterPage.js. הקליקו עליו.
כעת עליכם למחוק את כל הטקסט שמופיע שם ולהדביק במקום את הקוד הבא:
קוד להעתקה:
import wixWindow from 'wix-window';
import {local} from 'wix-storage';
$w.onReady(function () {
const DAYS_TO_CHECK = 30;
let lastShownDateString = local.getItem('lastShownDate');
let lastShownDate = Number(lastShownDateString);
let today = new Date().getTime();
// If the lightbox hasn't been shown in the last 30 days, show it
if (!lastShownDate || (today - lastShownDate) > (DAYS_TO_CHECK * 24 * 60 * 60 * 1000)) {
console.log("זוהה שלייטבוקס לא עולה בחודש אחרון")
wixWindow.openLightbox("Test");
local.setItem('lastShownDate', today.toString());
} else {
console.log("זוהה שלייטבוקס ניוזלטר עלה בחודש אחרון")
}
})
שימו לב
בקוד הזה מוגדר שהלייטבוקס יופיע לגולש גולש פעם ב30 ימים. אם תרצו לשנות את מספר הימים תשנו את המספר 30 למספר אחר בשורה הזו:
const DAYS_TO_CHECK = 30;
בנוסף, חשוב ללכת לשורה הזו:
wixWindow.openLightbox("Test");
ולהחליף את המילה Test בשם של הלייטבוקס שלכם.
אם יש משהו לא מובן - תכתבו בתגובות או תצפו בסרטון :)
Comments