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