בקשת פיתוח ב-CMS: חלונות פופ-אפ דינמיים

בקשת פיתוח|אנחנו אוספים הצבעות בנושא הזה

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

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

מה כן אפשר לעשות?

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

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

לפני שאתם מתחילים:

ודאו שבאתר שלכם יש את הדברים הבאים:

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

Studio Editor

Wix Editor

עברו ל-Editor.
עברו לעמוד הפריט הדינמי הרלוונטי.
הפעילו את Velo Dev Mode:
1. הקליקו על Dev Mode בחלק העליון של ה-Editor.
2. הקליקו על Turn on Dev Mode (הפעלת מצב פיתוח).
העתיקו את קטע הקוד שלמטה והדביקו אותו בחלק העליון של קוד העמוד:

1import wixWindowFrontend from 'wix-window-frontend';

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

העתיקו את קטע הקוד שלמטה והדביקו אותו אחרי: ‎$w.onReady(function () {

1$w('#openLightbox').onClick(async () => { const item = await $w('#dynamicDataset').getCurrentItem(); const id = item._id; wixWindowFrontend.openLightbox("Dynamic Lightbox",‎ id); })

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

בקוד לדוגמה שהדבקתם, החליפו את המזהים שרשומים למטה באלו שמשמשים את האתר שלכם:
- openLightbox: החלפה עם מזהה הכפתור שפותח את חלון הפופ-אפ.
- dynamic Dataset: החליפו אותו במזהה של מערך הנתונים של עמוד הפריט הדינמי.
- Dynamic Lightbox (חלונית לייטבוקס): החלפה עם שם חלון הפופ-אפ.

צילום מסך שמראה את המזהים ואת שם הלייטבוקס שצריך להחליף בקוד.

ב-editor, היכנסו לחלון הפופ-אפ.
הוסיפו מערך נתונים וחברו אותו לאותו אוסף של עמוד הפריט הדינמי:
1. הקליקו על CMS בצד שמאל של ה-Editor.
2. הקליקו על Add Content Elements (הוספת אלמנטים של תוכן).
3. הקליקו על Dataset (מערך נתונים).
4. הקליקו על התפריט הנפתח Choose a collection (בחירת אוסף) ובחרו את אותו האוסף שמתחבר לעמוד הפריט הדינמי.
5. הקליקו על Create (יצירה).
הקליקו על השדה Items per load (מספר פריטים בכל טעינה) בהגדרות של מערך הנתונים והקלידו את המספר 1.
חברו את האלמנטים בחלון הפופ-אפ (למשל טקסט, תמונות, כפתורים) למערך הנתונים:
1. הקליקו על האלמנט הרלוונטי בחלון הפופ-אפ.
2. הקליקו על האייקון של חיבור ל-CMS .
3. הקליקו על התפריט הנפתח תחת Connections (חיבורים) ובחרו את השדות הרלוונטיים באוסף או בפעולות מערך הנתונים.
4. חזרו על השלבים האלה עבור כל אלמנט בחלון הפופ-אפ שאתם רוצים לחבר.
העתיקו את קטע הקוד למטה והדביקו אותו בחלק העליון של קוד הפופ-אפ:

1import wixWindowFrontend from 'wix-window-frontend'; import wixData from 'wix-data';

צילום מסך של הדבקת קטע הקוד לחלק העליון של קוד הלייטבוקס.

העתיקו את קטע הקוד שלמטה והדביקו אותו אחרי: ‎$w.onReady(function () {

1const getData = async () => { const id = await wixWindowFrontend.lightbox.getContext(); $w('#dataset1').setFilter(wixData.filter().eq('_id', id)); } getData();

צילום מסך של הוספת קטע הקוד למעלה לקוד הלייטבוקס.

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

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