בקשת פיתוח ב-CMS: לייטבוקס דינמי

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

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

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

לדוגמה, אם יש לכם עמודי פריטים דינמיים שבהם מוצגים השירותים שאתם מציעים, אתם יכולים לקשר כפתור בעמוד ללייטבוקס. בלייטבוקס, אפשר לחבר אלמנטים כמו טקסט, תמונות וכפתורים למערך נתונים שמתחבר לאותו אוסף. כתוצאה, כשהגולשים מקליקים על הכפתור בעמוד הפריט הדינמי, נפתחת חלונית לייטבוקס עם מידע נוסף על אותו הפריט שמוצג בעמוד. 
לפני שאתם מתחילים:
ודאו שבאתר שלכם יש את הדברים הבאים: 
Studio Editor
Wix Editor
  1. עברו ל-Editor.
  2. עברו לעמוד הפריט הדינמי הרלוונטי. 
  3. הפעילו את Velo Dev Mode: 
    1. הקליקו על Dev Mode בחלק העליון של ה-Editor. 
    2. הקליקו על Turn on Dev Mode (הפעלת מצב פיתוח). 
  4. העתיקו את קטע הקוד שלמטה והדביקו אותו בחלק העליון של קוד העמוד:
1import wixWindowFrontend from 'wix-window-frontend';
צילום מסך של הוספת קטע קוד לחלק העליון של קוד של עמוד פריט דינמי.
  1. העתיקו את קטע הקוד שלמטה והדביקו אותו אחרי: ‎$w.onReady(function () {
1$w('#openLightbox').onClick(async () => { 
2  const item = await $w('#dynamicDataset').getCurrentItem(); 
3  const id = item._id; 
4  wixWindowFrontend.openLightbox("Dynamic Lightbox",‎ id); 
5})
6
צילום מסך של הדבקת קטע הקוד השני בקוד עמוד הפריט הדינמי.
  1. בקוד לדוגמה שהדבקתם, החליפו את המזהים שרשומים למטה באלו שמשמשים את האתר שלכם:
    • openLightbox: החליפו אותו במזהה של הכפתור שפותח את הלייטבוקס. 
    • dynamic Dataset: החליפו אותו במזהה של מערך הנתונים של עמוד הפריט הדינמי. 
    • Dynamic Lightbox: החליפו בשם של חלונית הלייטבוקס. 
צילום מסך שמראה את המזהים ואת שם הלייטבוקס שצריך להחליף בקוד.
  1. ב-Editor, עברו לחלונית הלייטבוקס. 
  2. הוסיפו מערך נתונים וחברו אותו לאותו אוסף של עמוד הפריט הדינמי:
    1. הקליקו על CMS  בצד שמאל של ה-Editor.
    2. הקליקו על Add Content Elements (הוספת אלמנטים של תוכן). 
    3. הקליקו על Dataset (מערך נתונים).
    4. הקליקו על התפריט הנפתח Choose a collection (בחירת אוסף) ובחרו את אותו האוסף שמתחבר לעמוד הפריט הדינמי. 
    5. הקליקו על Create (יצירה). 
  3. הקליקו על השדה Maximum items displayed (מקסימום פריטים מוצגים) בהגדרות של מערך הנתונים וכתבו את המספר 1.
  4. חברו את האלמנטים בחלונית הלייטבוקס (לדוגמה, טקסט, תמונות, כפתורים) למערך הנתונים:
    1. הקליקו על האלמנט הרלוונטי בלייטבוקס. 
    2. הקליקו על האייקון של חיבור ל-CMS .
    3. הקליקו על התפריט הנפתח תחת Connections (חיבורים) ובחרו את השדות הרלוונטיים באוסף או בפעולות מערך הנתונים. 
    4. חזרו על השלבים האלה עבור כל אלמנט בלייטבוקס שאתם רוצים לחבר. 
  5. העתיקו את קטע הקוד שמתחת והדביקו אותו בחלק העליון של קוד הלייטבוקס: 
1import wixWindowFrontend from 'wix-window-frontend'; 
2import wixData from 'wix-data';
צילום מסך של הדבקת קטע הקוד לחלק העליון של קוד הלייטבוקס.
  1. העתיקו את קטע הקוד שלמטה והדביקו אותו אחרי: ‎$w.onReady(function () {
1const getData = async () => {
2  const id = await wixWindowFrontend.lightbox.getContext();
3  $w('#dataset1').setFilter(wixData.filter().eq('_id', id)); 
4} 
5getData();
צילום מסך של הוספת קטע הקוד למעלה לקוד הלייטבוקס.
  1. בקוד לדוגמה שהדבקתם, החליפו את dataset1 במזהה של מערך הנתונים של הלייטבוקס . 
  2. בדקו את האתר בתצוגה מקדימה כדי לבדוק את הפונקציונליות שלו. 
  3. כשאתם מוכנים, פרסמו את האתר.