בנה נושא Shopify באמצעות מנוע הנוזל

תוֹכֶן

• קבצי ותיקיות נושא
• מיפוי כתובות אתרים לתבניות
• נוזל: היסודות
• הבנת מוצר. נוזל
• תְפוּקָה
• הִגָיוֹן
• מסננים
• מה הלאה?
• משאבים והשראה נוספים

במהלך השבועות האחרונים בניתי את נושא Shopify עבור Viewport Industries, חברת Elliot Jay Stocks ואני הקמנו בשנה שעברה. בחרנו ב- Shopify מכמה סיבות:

1. זה מאפשר לנו למכור מוצרים דיגיטליים ופיזיים כאחד
2. הוא מתארח במלואו, כלומר אין שרתים לדאוג להם
3. הוא תומך במספר שערי תשלום המשתלבים יפה בבנק שלנו
4. זה מבוסס על נושא, מה שאומר שאנחנו יכולים לעשות שימוש חוזר בקלות ב- HTML, CSS וב- JavaScript של האתר הקיים שלנו

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

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

קבצי ותיקיות נושא

ערכות הנושא של Shopify אינן יותר ממספר קבצים (קבצי HTML עם סיומת. נוזל, CSS, JS, תמונות וכן הלאה) ותיקיות. ערכות נושא יכולות להיראות ולעבוד ככל שתרצה: אין באמת מגבלות. הנה המבנה הבסיסי של נושא:

• נכסים
• config
• פריסות
• נושא. נוזל
• קטעים
• תבניות
• 404. נוזל
• מאמר. נוזל
• blog.liquid
• עגלה. נוזל
• collection.liquid
• אינדקס.נוזל
• page.liquid
• מוצר.נוזל
• search.liquid

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

לקבלת מידע נוסף על אופן הפעולה של ערכות נושא, וכדי לברר אודות תיקיות התצורה והקבצים, אני ממליץ לקרוא את ערכת הנושא מ- Scratch והגדרות ערכת נושא ב- Shopify Wiki

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

מיפוי כתובות אתרים לתבניות

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

http://www.unitedpixelworkers.com/products/indianapolis

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

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

לדוגמא בתבנית product.liquid שלנו, יש לנו גישה לשם המתאים מוצר מִשְׁתַנֶה. המשמעות היא שנוכל להעביר את השם, התיאור, המחיר והזמינות של המוצר שלנו בתבנית שלנו. נשתמש בשילוב של משתנים נוזליים ותבניות כדי לאכלס את התבניות שלנו בנתונים הקשורים למוצרים שלנו.

לרשימה מלאה של משתני התבניות הזמינים, בקרו ב- Shopify Cheat Sheet של Mark Dunkley.

נוזל: היסודות

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

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

לא ראיתי את קובץ הנושא.נוזל של United Pixelworkers, אבל אתה יכול לדמיין שהוא מכיל את הסימון לאזורים המתוארים באדום למטה.

כך יכול להראות פריט נושא בסיסי. נוזלי:

1. ! DOCTYPE html>
2. html>
3. ראש>
4. {{content_for_header}}
5. כותרת> כותרת דף הולך לכאן / כותרת>
6. / ראש>
7. גוף>
8. {{content_for_layout}}
9. / גוף>
10. / html>

תבחין בשני ביטויים עטופים בסוגריים מתולתלים כפולים: {{content_for_header}} ו {{content_for_layout}}. אלה הדוגמאות הראשונות שלנו לנוזל בפעולה.

Shopify משתמש לעתים קרובות ב {{content_for_header}} כדי להוסיף קבצים ספציפיים לראש> לקטע של מסמך: למשל, הוספת קוד מעקב. {{content_for_layout}} הוא המקום שבו תוכן התבנית הממופה על כתובת האתר שלנו יופיע. לדוגמה, אם אנו צופים בדף מוצר, קובץ product.liquid שלנו יחליף את {{content_for_layout}} בקובץ הפריסה שלנו.

הבנת מוצר. נוזל

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

הנה דוגמה מאוד פשוטה אך פונקציונלית לתבנית product.liquid.

1. h2> {{product.title}} / h2>
2. {{ תיאור מוצר }}
3. {% if product.available%}
4. טופס פעולה = "/ עגלה / הוסף" method = "post">
5. בחר id = "product-select" name = ’id’>
6. {% עבור גרסה ב- product.variants%}
7. option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
8. {% endfor%}
9. / בחר>
10. input type = "submit" name = "add" value = "הוסף לעגלה" id = "purchase" />
11. / טופס>
12. {% אחר%}
13. מוצר זה אינו זמין / p>
14. {% endif%}

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

תְפוּקָה

שורת הקוד הראשונה מכילה את הביטוי {{product.title}}. כאשר הוא מעובד, זה יפיק את כותרת המוצר, שכפי שידוע כעת נקבע על ידי כתובת ה- URL. בדוגמה של United Pixelworkers שלמטה, כותרת המוצר היא פשוט 'אינדיאנפוליס'.

נוזל משתמש בפורמט התחביר הנקודתי. במקרה זה, {{product.title}} משווה למשתנה תבנית המוצר ולמאפיין הכותרת שלו. אנו יכולים להפיק את תיאור המוצר באותו אופן באמצעות {{ תיאור מוצר }}.

זה ידוע במונחים נוזליים בתור תְפוּקָה. כל הפלט מסומן באמצעות סוגריים מתולתלים כפולים, כדלקמן: {{your_output}}.

הִגָיוֹן

בשורה הבאה של הקוד תבחין בהצהרה בסד מתולתל ואחריה%: במקרה זה, {% if product.available%}. זהו מושג חשוב נוסף בנוזל המכונה הִגָיוֹן. בהמשך הדרך תבחין בהצהרות {% else%} ולבסוף בהצהרות {% endif%}.

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

כל הצהרות ההיגיון ב- Liquid משתמשות בסימן האחיזה המתולתל, כלומר {% אם ...%}. רק זכור לסגור את הצהרותיך כראוי, אחרת תיתקל בבעיה. לדוגמה:

1. {% if product.available%}
2. הצג כפתור הוסף לעגלה כאן
3. {% אחר%}
4. הצג הודעה על המועד שבו המוצר יהיה זמין כעת
5. {% endif%}

מסננים

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

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

מסננים אחרים כוללים strip_html, אשר יסלקו את כל תגי ה- HTML מפיסת טקסט נתונה ו- ucase, אשר ימיר אותו לאותיות גדולות.

אתה יכול גם להצטרף למסננים יחד. לדוגמה:

1. {article.content}

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

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

1. {asset_url}

שימוש בזה בתוכנת Shopify שלנו יביא לכך שרכיב ה- img הבא יוצג בתבנית שלנו:

1. img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "לוגו האתר" />

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

מה הלאה?

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

משאבים והשראה נוספים

• מדריכי שימושי למתחילים Shopify
• גיליון הצ'יטים של Shopify של מארק דאנקלי
• Blankify: נושא התחלה של Shopify
• הדרכה: בניית נושא מאפס
• תוכנית השותפים של Shopify
• 40 חנויות Shopify מעוררות השראה