קונימבו - חנויות מקצועיות באינטרנט

https://docs.google.com/document/d/1P3eQwitTcM47kKsGGJnmcEQgu2qIXDmcDN6sWaxyeOc/edit

מצורף לינק למסמך הדרכה באלמנטי לייאוט איקס שבוצעה עי ענת ציוני 

הדרכת אלמנטים Layout X

לינק להדרכה המוקלטת - https://us02web.zoom.us/rec/share/3dGCZJn_yEbc2jOMjB8IDwKeUcckssB5kb2n3os0VM43JtvmMxgX8UGzZNzi3_ni.sxhdYDzwWM1m9QfE

בלייאוט איקס יש כמה סוגי אלמנטים שמסודרים לפי אותיות:

האלמנט g_x מכיל גריד מוצרים בדף קטגוריה \ דף תוצאות חיפוש. (יש לוודא שהאלמנט מופיע פעמיים, ושכל שינוי נעשה בשני האלמנטים בנפרד).

האלמנט c_x מכיל קרוסלת מוצרים, בעלת טאבים (ניתן פתוח \ סגור), המופיעה בדף הבית בלבד. 

האלמנט מכיל את אותה פונקציונליות (כמעט במלואה) של אלמנט g_x.

שינויים שניתן לבצע בלייאוט איקס:

• שינויי צבעים 

• גדלי פונטים

• הוספת כפתורים 

• שינויים בהובר ( מעבר עכבר)

• הוספת בורדר לגריד

• הוספת כפתורי פלוס מינוס (לאתרים עם עגלה צפה בלבד)

• כמות מוצרים בשורה בגריד (דסקטופ/ מובייל)

• בחירה של שליפת חלקים בקוביית מוצר (כמו למשל מחיר לפני מבצע)

1. כל קוביית מוצר מחולקת ל4 קבוצות, כל קבוצה מכיל בתוכה חלקים שונים של קוביית המוצר.

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

2. כל קוביית מוצר יכולה להתחלק בדרך שונה:

בתמונה שלפנינו, קוביית המוצר מורכבת מ4 קבוצות, כאשר: 

• group1 מקבל את כל השורה (col-12) ומכיל בתוכו- תמונה, כותרת, אייקונים ועגלה

•  group2 תופס חצי שורה ביחד עם group3 ומכיל בתוכו מחיר לפני מבצע - (מקבל col-6)

• group3 נמצא המחיר הרגיל - (מקבל col-6)

• group4 מקבל את כל השורה - (col-12) ומכיל בתוכו כפתור המופיע רק בהובר.  

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

ניתן לראות, שבקוביית המוצר שלנו, בחלק 4 הוספנו כפתור והוא מופיע רק במעבר עכבר, זה קרה בעקבות הוספה של הclass בשם show-and-disappear לאותו הgroup .

דוגמא, אם נרצה להוסיף על המחיר המחוק (בgroup3 ) קו בהובר, נצטרך להכנס לתוך לשונית origin_price ולהוסיף לו class בשם - line-through

בהתאם לכל חלק שבחרתם בgroupים תפתח לשונית מתאימה בתוכו יש שני חלקים - הגדרות החלק (בירקו), והגדרות עיצוב לחלק (בכחול).

התכונות החשובות בחלק הירוק:

• שדה tag- ניתן להחליף את סוג התג הHTMLי הנדרש (טוב לבקשת מקדמים)

• שדה class - מאפשר להוסיף קלאסים לאותו חלק (בדומה לדוגמא קודם שהקלאס היה על כל הקבוצה)

• שדה מיקום - מאפשר לנו לשחק עם מירכוז הטקסט

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

• רוחב החלק -  האם לשנות את הרוחב של החלק.

• גובה החלק- מחושב באופן אוטומטי עי הכפלת הערך בשדה ''מספר השורות'' עם שדה line-height

אם נרצה לדרוס את החישוב ולקבוע גובה אחר ניתן להכניס את הגובה החדש בשדה more-style בצורה כזאת: height:70px

התכונות החשובות בחלק הכחול:

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

• עמודה ראשונה מתייחסת לחלק עצמו

• עמודה שניה מתייחסת לחלק במעבר עכבר ( על אותו החלק בלבד)

• עמודה שלישית מתייחסת לafter שהקימו לאותו החלק (בדר"כ בsnippets) 

• עמודה רביעית מתייחסת לbefore שהקימו לאותו החלק (בדר"כ בsnippets)

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

איזה תכונות רלוונטיות יש בחלק זה? - השורות בעצם:

• צבע טקסט

• צבע רקע

• תמונת רקע

• צבע מסגרת

• עובי פונט

• גודל פונט

• ועיצוב נוסף