הפכו מדורים לכל מקום בעזרת קבוצות מדורים

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

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

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

מהן קבוצות מדור?

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

פונקציונליות זו נוצרת בספריית sections של ערכת הנושא ומוצגת בקבצי הפריסה של ערכת הנושא דרך {% sections %} תגית נוזלית.

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

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

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

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

למה להשתמש בקבוצות מדור

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

1. סוחרים מקבלים את הגמישות להוסיף מדורים בכל מקום

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

2. מפתחי ערכות נושא יכולים לבנות ערכות נושא הניתנות להתאמה אישית יותר

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

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

3. אפליקציות יכולות להשתלב עם ערכות נושא מבלי לשנות את קוד העיצוב

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

כיצד קבוצות מקטעים פועלות

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

מבנה הנושא

קבוצות מקטעים הן קבצים בפורמט JSON הממוקמים לצד מקטעי Liquid בספריית המקטעים של ערכת הנושא. כל ערכת נושא יכולה להכיל עד 20 קבצי קבוצת מקטעים בספריית המקטעים.

בדוגמה לעיל, שניהם footer-group.json ו header-group.json ב /sections ספריות הן קבוצות מקטעים. כשמדובר בשמות לקבוצות מקטעים אלו, אנו ממליצים לקרוא להן על שם אזורי החנות שהן מייצגות, או על שם סוג המקטעים שהן יקבצו. אנו ממליצים גם להשתמש בקידומת "-group" בשמות הקבצים כדי לציין שהקובץ הוא קבוצת מקטעים. מוסכמה זו מקלה על ההבחנה בין קבצי מקטעים של Liquid לקבוצות מקטעים.

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

בואו נסתכל על התוכן ב- header-group.json קבוצת מקטעים. הדוגמה שלהלן מציגה קבוצת מקטעים המכילה את נתוני ההגדרות עבור שני מקטעים: כותרת עליונה וסרגל הכרזות.

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

<

שֵׁם: שדה חובה המייצג את שם קבוצת המדורים. שם זה יוצג בעורך העיצובים, כאשר קבוצות המדורים מוצגות כחלק מהדף. שדה זה מקבל גם הפניה לתרגום מה שהופך את השם לניתן לתרגום.

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

השמיים פורמט נתוני המקטע זהה לנתוני המקטע ב הגדרות_נתונים.jsonכל קבוצת מקטעים יכולה לקבל עד 25 מקטעי נוזל. 

סדר: מערך של מזהי מקטעים, המפורטים לפי הסדר שבו יש לעבד אותם. המזהים חייבים להתקיים באובייקט המקטעים.

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

סוּג: כל קבוצת מקטעים חייבת להשתמש באחד מסוגי קבוצות המקטעים הסטנדרטיים:

• כותרת
• תחתונה
• בצד 

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

custom.

כיצד לעבד קבוצות מקטעים

כעת, לאחר שיצרנו ושמרנו קבוצת מקטעים בספריית המקטעים של ערכת הנושא, נוכל להתחיל לשלב אותה עם קוד פריסת ערכת הנושא שלנו באמצעות סעיפים תגית נוזל. קבוצות מקטעים ניתנות לשילוב רק ב- פריסת ערכת נושא קבצים, אשר יאפשרו לקבוצות מקטעים להיות מעובדות בכל התבניות המשתמשות בפריסה זו. על מנת שקבוצת מקטעים תעובד בקובץ פריסה, כגון layouts/theme.liquid, נוכל פשוט להפנות לשם קובץ קבוצת המקטעים ללא הסיומת .json בתוך קובץ סעיפים תגית Liquid. לדוגמה, קחו את מבנה התבנית הבא:

אנחנו יכולים פשוט להפנות footer-groups.json ו header-group.json בתוך layout/theme.liquid קובץ:

{% sections "header-group" %} {% sections "footer-group" %}

שימוש בתג Liquid נפרד לשילוב ולעיבוד קבוצות מקטעים מעניק לך גמישות נוספת:

• אין הגבלות על אופן עיצוב ומבנה פריסות העיצוב
• ניתן לעצב בקלות כל קבוצת מקטעים

בואו נסתכל כיצד שחר החליף מקטעים שעברו רינדור סטטי בקבוצות מקטעים ב layout/theme.liquid קובץ:

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

כפי שאומר הציטוט המפורסם, עם כוח גדול מגיעה אחריות גדולה. קבוצות מדורים מביאות גמישות ושליטה רבה לסוחרים בעיצוב חזיתות החנויות שלהם. זה מאפשר לסוחרים להוסיף, להסיר ולסדר מחדש מדורים בחופשיות בתוך קבוצות מדורים אלה. ומכיוון שקבוצות מדורים מוצגות בכל הדפים, אנו רוצים לוודא שתוכלו להדריך סוחרים בכל הנוגע לבניית חזיתות החנויות הטובות ביותר. מסיבה זו, הוצאנו משימוש את התכונה theme section templates והחלפנו אותה בשני מאפיינים חדשים, חזקים יותר וניתנים להרחבה: enabled_on ו disabled_on.

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

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

תרחיש 1: ניתן להוסיף את המקטע לכל התבניות ולכל קבוצות המקטעים

מכיוון שהסעיף לא השתמש באף אחד מהמאפיינים—enabled_on, disabled_on, או templates—המקטע יהיה זמין אוטומטית להוספה לכל התבניות וקבוצות המקטעים. 

זה גם שווה ערך לאמירה:

{ "enabled_on": {   "templates”: ["*"],   "groups”: ["*"] } 

תרחיש 2: לא ניתן להוסיף את המקטע לתבניות סיסמה, אך עדיין ניתן להוסיף אותו לכל קבוצות המקטעים

אנו יכולים לראות כמה קל להשבית מקטע בתבניות מסוימות באמצעות disabled_on מאפיין section. זה ימנע מהסוחר להוסיף בטעות את המאפיין section לתבנית הסיסמה.

תרחיש 3: לא ניתן להוסיף את המקטע לתבניות סיסמה או לקבוצות כותרות

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

העברת התאמה אישית של סוחר באופן אוטומטי במהלך שדרוג ערכת נושא

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

במילים אחרות, כאשר ערכת נושא מתעדכנת, אנו בודקים את כל סוגי המקטעים המוזכרים בקבוצות המקטעים של הגרסה החדשה, ומנסים למצוא ולהתאים התאמה אישית ב... settings-data.json תצורה של הגרסה הישנה.

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

מקרי שימוש בקבוצות מקטעים

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

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

אחד מקרי השימוש העיקריים של קבוצות מקטעים הוא הפיכת אזורים מסוימים בפריסת התבנית לניתנים להתאמה אישית, גמישות והרחבה. הנתונים שלנו שיקפו שרבים משינויי הקוד ב... layout/theme.liquid הקובץ נועד להוסיף ולהסיר מדור שעבר רינדור סטטי או לשלב אפליקציה של צד שלישי באזור הכותרת העליונה והתחתונה של התבנית. על ידי המרת אזורים אלה לקבוצות מדור, אנו נותנים לסוחר שליטה מלאה דרך עורך התבנית וללא צורך לערוך קוד.

2. מדורים הקשורים לקבוצה

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

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

שדרגו את הנושא שלכם

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

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

גרפיקה מאת צ'אז מור.