איך לייצר לייטבוקס שמופיע לכל גולש פעם אחת בחודש / שבוע (וגם רק לגולשים מחו"ל)

היי חברים,

היום, אני רוצה לעזור לכם להטמיע פונקציה שתייעל את חוויית המשתמש באתר שלכם!

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

למי שלא מכיר, לייטבוקס (Lightbox) זו הוריאציה הוויקסית של ‘פופ-אפ’ - מודעה שקופצת לנו באתר על כל המסך או חלקו.

מדריך כתוב נמצא למטה.

לייטבוקס שמופיע לכל גולש פעם בחודש או בשבוע

מדריך וידאו:

מדריך כתוב

למעשה מה שאתם צריכים לעשות בשביל להפעיל את האופציה הזו הוא מאד פשוט!

1. צרו לייטבוקס מתאים.
2. בדקו בהגדרות שלו שהוא לא מוגדר להופיע באופן אוטומטי (שאין לו טריגר או דף מסויים).
3. רחפו עם העכבר על הלשונית למעלה שכתוב עליה Dev Mode והדליקו את הסוויצ’ של האופציה Enable Developer Mode
4. כעת, הקליקו על הHeader שלכם. (Header זה השם של האזור העליון של האתר שחוזר על עצמו בכל הדפים השונים).
5. שימו לב שבחלק התחתון מצד ימין מופיע כפתור בשם 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 בשם של הלייטבוקס שלכם.

אם יש משהו לא מובן - תכתבו לנו או תצפו בסרטון :)

לייטבוקס שמוצג רק לגולשים מחו”ל לפי IP

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

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

(מדריך כתוב מיד אחרי הסרטון)

מדריך וידאו:

מדריך כתוב:

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

התהליך הוא מאד קצר! (לא כי הוא כל כך קצר אלא מכיוון שעשיתי בשבילכם את כל העבודה)

מה שאנחנו צריכים בעצם זה:

1. להיכנס לאדיטור
2. לייצר לייטבוקס מתאים
3. לתת ללייטבוקס שם (שאותו נצטרך לזכור להמשך)
4. לרחף עם העכבר על הלשונית בסרגל העליון של האדיטור עליה כתוב Dev Mode ולאחר מכן להדליק את הסוויצ’ שנמצא על האופציה Enable Developer Mode
5. הקליקו על הHeader שלכם. (Header זה השם של האזור העליון של האתר שחוזר על עצמו בכל הדפים השונים).
6. שימו לב שבחלק התחתון מצד ימין מופיע כפתור בשם Open masterPage.js. הקליקו עליו.

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

קוד להעתקה:

import wixWindow from 'wix-window';
import {fetch} from 'wix-fetch';

$w.onReady(function () {
 // Fetching the user's location details
    fetch('https://ipinfo.io/json', {
        method: 'get'
    })
 // Check if the request was successful
    .then((httpResponse) => {
        if (httpResponse.ok) {
            return httpResponse.json();
        }
    })
 
    .then((json) => {
        // Set the user's countryName as a const
        const country = json.country;
        console.log(country, "מדינה שזוהתה")
 
        if(country !== "IL"){
            console.log("זוהה שלא ישראל")
            wixWindow.openLightbox("Test")

        }
    });

})

שימו לב:

שימו לב לשנות בשורה הזו:

            wixWindow.openLightbox("Test")

את המילה Test לשם של הלייטבוקס שלכם.

זהו!