בפוסט תלמדי איך ליצור פופאפ לצפיה מהירה במוצר + וריאציות + החלפת תמונת וריאציה + דירוג כוכבים + מחיר מוצר + הוספה לסל.
2 הערות חשובות לפני שנתחיל:
- הפופאפ של ג’ט לא תומך בתמונות וריאציה.
- השתמשתי בתוסף הזה להצגת צבעים בוריאיציות (היחיד שמסתנכרן עם פופאפ צפיה מהירה)
הפתרון לצפיה מהירה במוצר – תוסף YITH חיבור תוסף רגיל לליסטינג של ג’ט
אחרי חפירות ארכיאולוגיות בגוגל, ופסילת כמה תוספים שלא ממש הועילו, הגעתי לתוסף של YITH.
רק להתקין, והופ – יש לך צפיה מהירה במוצר.
התוסף עובד מצויין עם אלמנטור, ומוסיף לו כפתור צפיה מהירה ליד ההוספה לסל.
אבל אני רציתי להשתמש בליסטינג של ג’ט
עם כפתור מיוחד לצפיה מהירה, שנמצא על תמונת המוצר, ולא ככה ליד ההוספה לסל…
(בליסטינג הוספתי גם אופציות של לייק, כמות באריזה ועוד – דברים שמסובך להוסיף באלמנטור)
אז לחצתי F12 ובדקתי מה מכיל כפתור צפיה מהירה באלמנטור, הנה תראי:
לכפתור יש 3 חלקים שגורמים לו לפתוח את הפופאפ:
id – תסתכלי בשורה הראשונה, יש שם id ארוך שנגמר ב67
class – תסתכלי בשורה השניה, יש לכפתור 2 קלאסים
תכונה – הגדרה בHTML ששומרת את הID של המוצר
את 3 החלקים האלה שמרתי בצד, והוספתי כפתור רגיל של אלמנטור.
את הכפתור עיצבתי עם אייקון מתאים לצפיה מהירה, והנחתי אותו על תמונת המוצר.
אח”כ עברתי לכרטיסיית מתקדם של הכפתור:
הוספתי id בהגדרה דינמית
הוספתי את הclass בהעתק-הדבק, כמות שהוא
את התכונה של הכפתור הוספתי בטאב “תכונות” (בטח אף פעם לא השתמשת בזה…)
בחרתי id דינמי של הפוסט, ולפני שמתי את התכונה data-product_id שהעתקתי מהכפתור של התוסף.
אחרי התכונה הוספתי קו עומד |
כי ככה אלמנטור מבין מה השם של התכונה ומה התוכן שלה.
מה שנמצא לפני הקו זה השם של התכונה (data-product_id) ומה שאחרי הקו זה הערך.
ובמילים פשוטות – ככה הפופאפ שיפתח יידע לשלוף את התוכן של המוצר הספיציפי.
וזהו!
הכפתור של אלמנטור עובד מעולה בלייב, ופותח לי את הפופאפ של המוצר, בדיוק כמו שהכפתור של התוסף עובד!!
כולל תמיכה בוריאציות של צבעים והחלפת תמונות.
הנה, ככה נראה הקוד של כפתור אלמנטור אחרי 3 החלקים שהוספתי:
את הפופאפ עיצבתי כמובן עם CSS, שיתאים לשפה של האתר.
(אין דרך אחרת לעצב אותו, זה תוסף שאי אפשר לעצב אותו באלמנטור).
