על 4.4 מיליון אתרי מסחר אלקטרוני נבנים באמצעות Shopify פּלַטפוֹרמָה. זוהי פלטפורמת ה-all-in-one eCommerce שהרעידה את הרשת מאז תחילתה ב-2006. סוחרים בוחרים בפלטפורמה זו כדי לארח את החנויות המקוונות שלהם מסיבות רבות, החל מהגדרת תשלום קלה ועד לכלי שיווק מובנים ועוד הרבה יותר.
אבל אחד ההיבטים הקריטיים של Shopify הוא בונה האתרים האינטואיטיבי שלו עם אלפי ערכות נושא ו Shopify שילובי אפליקציות לבחירה.
עם זאת, בעוד ש ללא קוד בונה מאפשר לך ליצור אתרים מדהימים וייחודיים, יש כמה מגבלות. לדוגמה, כאשר אתה מתחיל לבנות את החנות המקוונת שלך, עליך לבחור נושא שמגדיר את הסידור ורמת השליטה שאתה מקבל על התוכן שלך. גם אם תבחר ערכת נושא ריקה, כלומר ערכת נושא ללא תוכן - עדיין ישנה ארכיטקטורת קוד שמגדירה מראש כיצד תוכן מאורגן.
אבל יש חדשות טובות. אם אתה רוצה ליצור משלך Shopify תבנית עבור האתר שלך או של מישהו אחר, יש Shopify נוזל.
מעוניין? הצטרפו אליי כשאני משתדל לענות על השאלה: מה זה Shopify נוזל? בואו לצלול פנימה!
מה Shopify נוזל?
מעניין, Shopify נוזל קיים מאז Shopifyתחילתו של. מתי Shopifyהיוצרים של תכננו לראשונה את הפלטפורמה, הם בנו פרויקט קוד פתוח שישמש כשפת התבנית לכולם Shopify אתר אינטרנט תבניות.
עבור חסרי התחלה, 'שפת תכנות בקוד פתוח' מתייחסת לקוד המקור של תוכנה הזמין באופן חופשי לציבור, ומאפשר לכל אחד להשתמש, לשנות ולהפיץ את הקוד לכל מטרה.
נוצר באמצעות רובי, Shopify נוזל משמש למעשה כמציין מיקום כדי שתוכל להכניס נתונים לפורמט מוגדר מראש (עוד על כך בהמשך).
אז איך זה עובד?
כדי להבין זאת, תחילה עליך לדעת שאתרים הם בדרך כלל סטטיים או דינמיים. חנויות סטטיות מקודדות בצורה קשיחה כדי להציג תוכן בדיוק כפי שהוא כתוב, למשל, ב-HTML. לעומת זאת, אתר דינמי יכול להציג תוכן שונה בהתאם לאופן האינטראקציה של המשתמש איתו.
עכשיו נניח שיש לך אתר סטטי; השלד הבסיסי של האתר מוגדר מראש, אבל אתה רוצה להציג תוכן דינמי. זה המקום שבו כותבים Shopify נוזל לקוד ה-HTML שלך שימושי. זה מתאים את עצמו כמציין מיקום לתוכן דינמי.
Shopify נוזל משמש כמתווך בין החנות שלך לבין Shopifyהשרת של, המאפשר ל-Liquid למשוך ממנו נתונים Shopifyהשרת של ושלח אותו לחנות שלך. נוזל יכול לבקש שלושה סוגים עיקריים של נתונים:
- אובייקטים
- תגים
- מסנן
להלן, נסקור כל סוג נתונים בתורו:
חפצים נוזליים
אובייקטים דומים לספריית פונקציות או תוכן; בתוך כל אובייקט, ישנם מאפיינים שונים.
אם אינך מכיר את המושג חפצים, הנה סקירה קצרה:
אובייקט הוא מושג בסיסי בתכנות. חפץ מורכב משני מרכיבים:
- מאפיינים המגדירים את מצב האובייקט
- פונקציות שמגדירות את התנהגות האובייקט
כדי להמחיש טוב יותר איך זה עובד, נשתמש בדוגמה שאינה קשורה לקידוד. למשל, מכונית. כאן, למכונית, כלומר לאובייקט, יכולות להיות פונקציות כמו "האצה", "סיבוב" ו"בלימה". לעומת זאת, המאפיינים יכולים להיות "חלונות", "דלתות" וכו' של המכונית.
במילים פשוטות, חפצים הם דבר חשוב מושג בקידוד מכיוון שהם עוזרים לארגן מערכות מורכבות לנתחים ניתנים לניהול.
לדוגמה, נניח שאתה יוצר מותאם אישית Shopify נושא ורוצים להציג א כותרת הבלוג בתבנית שלך. אתה יכול להשתמש ב-Liquid כדי להביא את המידע הזה Shopifyהשרת של והצג אותו איפשהו בדף. בדוגמה זו, זו פיסת הקוד Liquid שבה תשתמש כדי להשיג זאת:
{{Blog.title}}
בואו נשבור את זה:
- כאן, 'בלוג' הוא האובייקט.
- הנכס שאנחנו רוצים בתוך זה ספריה מסומן על ידי 'כותרת'.
- השמיים ''. מספר ל-Liquid כיצד שתי פיסות הנתונים הללו קשורות.
- הסוגריים הכפולים הם תחביר נוזלי שמגדיר את ה{{תוכן/פלט שאתה רוצה}} שאתה רוצה מה- Shopify שרת.
תגים נוזליים
כשמשתמש Shopify נוזל, תגים מוסיפים היגיון לתוכן שאנו מבקשים מה- Shopify שרת כדי לעזור להגדיר מתי התוכן צריך להיות גלוי בדף. לדוגמה, נניח שאנו רוצים להציג גרפיקה מסוימת בפוסטים החגיגיים שלנו בבלוג. כלומר, אנו רוצים שהגרפיקה הזו תופיע רק כאשר מתקיים תנאי ספציפי.
כך זה עשוי להיראות:
{% if blog.title == 'חגיגה' %}
**HTML של תמונה**
{% end if %}
זה אולי נראה מורכב, אבל אם אנחנו מפרקים את זה, זה די פשוט להבין:
- תגיות משתמשות בתחביר מעט שונה מאובייקטים שנראים כך {%…%}.
- התג הראשון {% if blog.title == 'חגיגה' %} אומר ל-Liquid באיזה תנאי יש לעמוד לפני בקשת תוכן מהשרת.
- התנאי שביקשנו מוגדר על ידי an הצהרת 'אם'. אם אתה מכיר את הקידוד, תדע שהצהרות 'אם' פועלות על ידי השוואת שתי פיסות נתונים או יותר זו לזו. אם הם תואמים, זה יעבור לשורה הבאה בקוד שלנו. כאן, if blog.title == 'חגיגה,' אנו מבקשים מ-Liquid לבדוק אם כותרת הבלוג שלנו מכילה את המילה 'חגיגה'. אם כן, זה יירד לשורה הבאה בקוד שלנו. אם לא, Liquid לא יחזיר שום תוכן.
- בדוגמה זו, אם יש לנו כותרת בלוג שמכילה את המילה 'חגיגה', Liquid ימשוך ויציג את ה-HTML של התמונה שלנו.
- ברגע שהוא עושה זאת, הוא עובר לשורה הבאה {% end if %}, מה שמסיים את התוכנית שלנו.
זו רק דוגמה אחת למה שאתה יכול לעשות עם תגים. Shopify לנוזל יש תגים ל:
- שליטה כאשר הקוד מבוצע
- לְחַזֵר/איטרציה (חזור) על גוש קוד
- לְהַצִיג תגי HTML מסוימים
- צור משתנים חדשים.
מסננים נוזליים
מסננים הם פיסות קוד שמשנות או משנות את הפלט של אובייקט. לדוגמה, הם יכולים לשנות את הצבע, הגופן, הגודל או המראה של רכיבי אתר.
אבל, כמו גם לשנות את ההיבטים הגלויים של האובייקט, הם יכולים לבצע פונקציות על אובייקט. לדוגמה, אם ברצונך להציג את כותרות הבלוג שלך בבת אחת, מסנן יכול לעזור לך להשיג זאת מבלי לשנות ידנית את כל כותרות הבלוג שלך:
{{ blog.title | uppercase }}
- התחביר עבור מסננים הוא {{…}}.
- כאן, מאפיין האובייקט שאנו מחפשים הוא 'כותרת הבלוג'.
- המסנן שאנו מיישמים הוא באותיות רישיות.
- השמיים '|' מפריד בין הקלט והפלט של הקוד שלנו.
כעת, כאשר משתמש מסתכל על כותרת הבלוג שלנו, היא תופיע באותיות רישיות.
יתרונות של Shopify נוזל
נניח שאתה מעצב או מפתח אתרים. במקרה כזה, אחד היתרונות המשמעותיים ביותר של Shopify נוזל הוא שאתה לא צריך את נתוני החנות (כלומר, מידע על החנות) כדי ליצור או לשנות אתר אינטרנט. הסיבה לכך היא שכאשר משתמש יוצר לראשונה א Shopify חנות, כל המידע מאוחסן ב- Shopify שרת, כלומר אתה יכול להשתמש ב-Liquid כדי פשוט לאחזר את הנתונים שאתה צריך.
עם זאת, אם אינך מפתח אתרים, במקום זאת אתה רק בעל חנות שמעוניין לשפר את החנות שלך, ישנם יתרונות גם עבורך:
- קל ללמוד ולהשתמש: ל-Liquid יש תחביר פשוט והוא קל להבנה, מה שהופך אותו לנגיש למפתחים וללא מפתחים.
- תוכן דינמי: נוזל מאפשר יצירת תוכן דינמי
- ניתן להתאמה אישית: עם Liquid, אתה יכול ליצור תבניות וערכות נושא מותאמות אישית, המעניקות לך שליטה מלאה על המראה והתחושה של חנות המסחר האלקטרוני שלך.
- ביצועים משופרים: תבניות נוזליות מורכבות ונשמרות במטמון, ומשתפרות ביצועים ומהירות האתר בהשוואה למנועי תבנית אחרים.
- קהילה גדולה: Shopify יש קהילת משתמשים גדולה, המספקת גישה לשפע של ידע ותמיכה, מה שמקל על מציאת פתרונות לבעיות נפוצות הקשורות לנוזל.
דרישות
אז מה אתה צריך כדי להתחיל להשתמש Shopify נוזל?
אם כבר יש לך Shopify חנות, Shopify הנוזל יהיה זמין עבורך לשימוש בחינם. נדון כיצד תוכל למצוא נוזל להלן. אבל כל מה שאתה צריך לדעת כרגע הוא שכל אתר שנוצר בו Shopify בנוי עם Liquid, כך שתוכל להתחיל לערוך קוד זה באופן ידני ברגע שיצרת אתר.
עם זאת, אם אין לך א Shopify בחנות, תצטרך ליצור אחת כדי להתחיל לשחק עם Liquid.
- ראשית, ראש אל Shopify ו לבחור תוכנית. מלא את הפרטים שלך וצור את החשבון שלך.
- משלך Shopify מנהל, לחץ על ערכות נושא. Shopify מספק אוטומטית ערכת נושא ברירת מחדל. אתה יכול להשאיר את זה כפי שהוא או לבחור ערכת נושא אחרת להתחיל ממנה.
- Shopify יש רשימת בדיקה שתוכל לעבור עליה כדי להשלים את החנות שלך. תרצה לעשות את כל היסודות, כגון הוספת דפי מוצר, עיצוב חלון הראווה שלך וכו'.
עכשיו, כשיש לך את השלד הבסיסי של החנות המקוונת שלך, אתה יכול למשוך את הנתונים האלה מה- Shopify שרת ולהתאים אותו אישית באמצעות Liquid (עוד על כך בהמשך).
אמנם אינך צריך שום ניסיון בקידוד כדי להתחיל להשתמש ב-Liquid, אך היכרות עם עקרונות קידוד בסיסיים תקל על המסע שלך. אבל לרוב, אתה יכול למצוא תיעוד מקיף לעזרה עצמית והדרכות בנושא Shopify פורטל מפתחים. כאן תמצא מדור שלם המוקדש ל יסודות נוזלים.
מומלץ להקדיש זמן לעיון במדריכים אלו לפני שתתחיל. בעוד Liquid הוא כלי רב עוצמה להתאמה אישית, יש לו גם פוטנציאל לשבור את האתר שלך אם אתה לא יודע מה אתה עושה!
להתחיל עם Shopify נוזל
אז, בעזרת מה שלמדנו עד כה, בואו נראה איך נוכל לערוך את שלנו Shopify ערכת נושא באמצעות Liquid.
כדי לגשת ל-Liquid, בצע את השלבים הבאים:
- שכפל את העיצוב שלך: כדי למנוע תקלות גדולות, כדאי ליצור עותק של ערכת הנושא שלך לפני שמתחילים. כך, אם אתה עושה טעויות, המקורי שלך Shopify הנושא נשאר שלם. כדי לעשות זאת, נווט אל קטע הנושאים בצד ימין שלך Shopify לוּחַ מַחווָנִים. בחר את ערכת הנושא שברצונך לערוך ולחץ על פעולות כדי לראות את התפריט הנפתח. כעת, בחר שכפול.
- שנה את שם הכפיל שלך: כאשר אתה משכפל ערכת נושא, אתה תראה אותו מופיע ברשימת העיצובים שלך. אתה יכול לשנות את שם העותק שלך כדי לא לבלבל בין המקור לבין השכפול. פשוט לחץ שוב על כפתור הפעולות ולחץ על שנה שם בתפריט הנפתח.
- כניסה לעורך הקוד: כעת, בחר שוב פעולות בשכפול שלך ובחר ערוך קוד. תופנה לרשימת הקודים המלאה בתוך הנושא שלך. תסתכל על התיקיות הרשומות מימין. אתה אמור לראות חבורה של תיקיות המכילות היבטים שונים של הנושא שלך, כגון הפריסה, התבניות, הקטעים וכו'. פתח את תיקיית התבניות.
- קידוד בנוזל: בתוך תיקיית התבניות, תראה רשימה של קבצים עם סוג הקובץ .liquid. אתה יכול גם ליצור תבנית חדשה של קובץ נוזלי על ידי בחירה בלחצן הפלוס בתיקיית התבנית. זה ישאל אותך איזו תבנית אתה רוצה ליצור, כלומר, עמוד, מדור, בלוג וכו', ולתת שם לקובץ. כדי לערוך קובץ, לחץ פעמיים על קובץ תבנית, והוא ייפתח בעורך הקוד בצד ימין.
בתוך כל קובץ Liquid, תראה סקריפט HTML. זהו השלד של האתר שלך. אתה יכול להשתמש בשפה Liquid בתוך HTML זה כדי לאחזר מידע מה- Shopify שרת. כל עוד אתה משתמש בתחביר Liquid הנכון, כלומר בסוגריים, הוא אמור להציג את התוכן שלך בהתאם.
כדי להמחיש, בואו נעבור על דוגמה קלה:
שינוי גודל תמונות באמצעות Shopify נוזל
תמונות הן היבט חיוני של רוב Shopify חנויות. אבל אם אתה משתמש במספר תמונות, זה יכול להיות סיוט לגודל את כולן בצורה נכונה, כך שהן יופיעו בצורה מסודרת. כדי לתקן זאת, אנו מסתכלים על img_url לְסַנֵן. כמו מסננים אחרים, img_url נועד לשנות את התוכן שהוא לוקח מה- Shopify שרת. אתה יכול להשתמש במסנן זה כדי לשנות את הגודל, קנה המידה, הפורמט והחיתוך של התמונות שלך.
זוהי טכניקה מצוינת מכיוון שהפילטר משנה רק תמונה קיימת באופן זמני; זה לא יוצר תמונה חדשה בכל פעם לעיבוד התבנית שלך, כך שזה לא יאט את זמן הטעינה של האתר שלך.
אז איך משנים את גודל התמונה?
ראשית, עלינו להחליט היכן אנו רוצים להחיל את השינויים. אתה יכול ליישם את מסנן img_url לכל אובייקט עם מאפיין תמונה, כולל:
- מוצרים
- גרסאות מוצר
- פריטים
- קולקציות
- מאמרים
לאחר שתחליט אילו תמונות ברצונך לערוך, עליך לדעת לאיזה נכס אתה רוצה למקד. כדי לגלות לאילו מאפיינים יש תכונת תמונה, הסתכל Shopifyרשימת החפצים של והנכסים שלהם.
בדוגמה זו, נתמקד בתמונות מאמרי הבלוג שלנו.
הנה הקוד הבסיסי:
{{ blog.articles.image | img_url: ‘100×100' }}
התקלקל:
- בלוג הוא האובייקט שאנו מחפשים, ואנחנו רוצים את הנכס מאמרים, שכן זה מכיל את כל המאמרים בבלוג שלנו. באופן ספציפי, אנחנו רוצים לשנות את התמונות במאמרי הבלוג שלנו, אז אנחנו מכוונים ל תמונה רכוש בתוך מאמרים.
- כעת אנו מיישמים את המסנן img_url. אם נשאיר את זה כפי שהוא, הוא פשוט יציג תמונה שנשלפה מכתובת האתר שסופקה על ידי Shopify שרת. עם זאת, אנחנו גם הולכים לתת פרמטר נוסף: גודל התמונה '100×100' (ציין זאת Shopify משתמש בפיקסלים כדי לקבוע טווחי גודל).
- לבסוף, אנו עוטפים את הקוד שלנו באמצעות התחביר Liquid כפול, המשמש למסננים.
וסיימנו! זה אמור להחזיר פלט עבור כל תמונות הבלוג שלנו, ולהפוך אותן לגודל של 100 על 100 פיקסלים.
טיפים וטייק אווי
אני מקווה שאחרי שקראת את המאמר הזה, עכשיו יש לך תשובה לשאלה: מה זה Shopify נוזל?
כפי שניתן לראות, Shopify נוזל הוא כלי רב תכליתי שיכול לשרת פונקציות שונות בעת עיצוב או עריכה של א Shopify תבנית. אמנם יש קצת עקומת למידה, אבל ברגע שמתרגלים לזה, זה קל למדי לשימוש - במיוחד בהשוואה לשפות קידוד מורכבות יותר כמו Javascript.
אם אתה מעוניין להשתמש Shopify נוזלי, היינו ממליצים לך לעקוב אחר השיטות הבאות כדי להפיק ממנו את המרב:
- התחל עם הבנה מוצקה של Liquid: הבנה חזקה של Liquid תאפשר לך לבנות ערכות נושא מורכבות יותר בהתאמה אישית. עם הבסיס הזה, משתמשים חדשים יכולים למנף את מלוא הפוטנציאל של Shopify ליצור חנויות מקוונות ייחודיות ומרתקות.
- בדוק את הנושא שלך ביסודיות: בדיקה חיונית כדי להבטיח שהנושא המותאם אישית שלך עובד כמצופה בדפדפנים ובמכשירים שונים. על ידי זיהוי מוקדם של בעיות תאימות, אתה נמנע מתסכול פוטנציאלי עבור הלקוחות שלך.
- השתמש בכלים ומשאבים זמינים: Shopify יש שפע של משאבים זמינים כדי לעזור למפתחי ערכות נושא, אז השתמש בהם! בשימוש זה יכול להפוך את תהליך הפיתוח למהיר וקל יותר.
עם כל הנקודות הללו מכוסות, אני חושב שזה בטוח לומר את זה Shopify נוזל יכול להיות דרך מהנה ויעילה לעדכן או ליצור עניין ודינאמי יותר Shopify לאחסן.
זה הכל ממני; אליך. ספר לי על החוויות שלך עם Shopify נוזל בתגובות למטה!
תגובות תגובות 0